ساخت تولتیپ خودکار با کمک جی کوئری

ساخت تولتیپ خودکار با کمک جی کوئری

مدتی پیش، یکی از دوستان سؤالی رو مطرح کرده بود که “چطور میشه حالت پیشفرض تولتیپ رو در لینک های سایتمون شخصی سازی کنیم؟ “، در پاسخ به این دوست عزیز، امروز فرصتی پیدا کردم تا با یک پست آموزشی جدید در خدمت همراهان همیشگی دنیای وردپرس و برنامه نویسی باشم.

و اما بعد…

اولین و مهمترین مرحله در انجام این کار، تعریف یک تابع جی کوئری! اما کار این تابع چیه؟!؟
محوریت کار این تابع، گرفتن توضیحات (Description) از خاصیت (attribute) عنوان (title) یک لینک، حذف حالت پیشفرض و تعیین حالتی جدید… این عملیات رو میتونیم به راحتی با کمک جی کوئری پیاده سازی کنیم. به همین منظور، تابع زیر رو تعریف کردیم:

JQuery

$( document ).ready( function()
{
	var targets = $( '[rel~=tooltip]' ),
		target	= false,
		tooltip = false,
		title	= false;

	targets.bind( 'mouseenter', function()
	{
		target	= $( this );
		tip		= target.attr( 'title' );
		tooltip	= $( '<div id="tooltip"></div>' );

		if( !tip || tip == '' )
			return false;

		target.removeAttr( 'title' );
		tooltip.css( 'opacity', 0 )
			   .html( tip )
			   .appendTo( 'body' );

		var init_tooltip = function()
		{
			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
				tooltip.css( 'max-width', $( window ).width() / 2 );
			else
				tooltip.css( 'max-width', 340 );

			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
				pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

			if( pos_left < 0 )
			{
				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
				tooltip.addClass( 'left' );
			}
			else
				tooltip.removeClass( 'left' );

			if( pos_left + tooltip.outerWidth() > $( window ).width() )
			{
				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
				tooltip.addClass( 'right' );
			}
			else
				tooltip.removeClass( 'right' );

			if( pos_top < 0 )
			{
				var pos_top	 = target.offset().top + target.outerHeight();
				tooltip.addClass( 'top' );
			}
			else
				tooltip.removeClass( 'top' );

			tooltip.css( { left: pos_left, top: pos_top } )
				   .animate( { top: '+=10', opacity: 1 }, 50 );
		};

		init_tooltip();
		$( window ).resize( init_tooltip );

		var remove_tooltip = function()
		{
			tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
			{
				$( this ).remove();
			});

			target.attr( 'title', tip );
		};

		target.bind( 'mouseleave', remove_tooltip );
		tooltip.bind( 'click', remove_tooltip );
	});
});

چون یه مقدار دستورات زیاد، من دیگه تک تک خطوط رو توضیح نمیدم! فقط به این چند مورد اشاره میکنم که توابع مهم ما عبارتند از: attr (تابع پیشفرض جی کوئری) که به همراه مقدار title، وظیفه گرفتن توضیحات خاصیت یک عنوان رو داره – init_tooltip مربوط به بحث موقعیت (position) سازی – remove_tooltip هم برای این که وقتی موس رو از روی یک لینک برداشتیم، کادر تولتیپ رو مخفی کنه…

اما یک بخش مهم دیگه در تابع بالا، تعریف یک متغیر با نام targets که مقدار خاصیت “rel=”tooltip رو (در صورت موجود بودن) میگیره و انجام کلیه توابع رو محدود به وجود این متغیر میکنه. حالا با توجه به این توضیحات، جهت استفاده از تابع بالا، تنها کافیه که خاصیت  “rel=”tooltip رو به لینک هامون اضافه کنیم. به عنوان نمونه:

HTML

<a href="#" title="دنیای وردپرس و برنامه نویسی" rel="tooltip">مشاهده تولتیپ</a>

* توجه: یادتون باشه که برای کار کردن تولتیپ، حتما باید لینک هاتون دارای خاصیت عنوان (title) باشند.

تا اینجا بخش مهمی از کار رو انجام دادیم، فقط چون این حالت جدید فارق از یک استایل مشخص، با استفاده از نام آی دی tooltip (که تعریفش رو در متغیر tooltip ریخته بودیم)، یک استایل زیبا رو به فرم زیر ایجاد میکنیم که شباهت زیادی به تولتیپ بوت استرپ داره:

CSS

#tooltip
{
	font-family: Tahoma, sans-serif;
	font-size: 0.875em;
	text-align: center;
	text-shadow: 0 1px rgba( 0, 0, 0, .5 );
	line-height: 1.5;
	color: #fff;
	background: #333;
	background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .8 ) ), to( rgba( 0, 0, 0, .8 ) ) );
	background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -moz-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -ms-radial-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -o-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: absolute;
	z-index: 100;
	padding: 15px;
}

#tooltip:after
{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top-color: #333;
	border-top: 10px solid rgba( 0, 0, 0, .8 );
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
}
#tooltip.top:after
{
	border-top-color: transparent;
	border-bottom-color: #333;
	border-bottom: 10px solid rgba( 0, 0, 0, .8 );
	top: -20px;
	bottom: auto;
}

#tooltip.left:after
{
	left: 10px;
	margin: 0;
}

#tooltip.right:after
{
	right: 10px;
	left: auto;
	margin: 0;
}

و کار تموم…
امیدوارم که از این آموزش خوشتون اومده باشه… 🙂

منبع: دنیای وردپرس و برنامه نویسی – http://alimir.ir

فقط فراموش نکنيد که کتابخانه جي کوئري هم حتما بايد در قالبتون فراخواني شده باشه.
دوستان وردپرسي ميتونن، تابع رو در يک فايل js و کدهاي css رو در شيوه نامه قرار بدن. در آخر هم براي لينک هاشون خاصيت rel رو که توضيحش رو دادم تعريف کنند.

دیدگاه کاربران در مورد این نوشته

  1. سلام خیلی سایت زیبایی داری
    من همه ی کار هایی که گفتی انجام دادم ولی نشد ادرس تولتیپ اینجا
    http://themefars.ir/item/kuteshop/
    این قسمت
    http://s8.picofile.com/file/8277235734/Capture.JPG

    توسط علی پاسخ

  2. سلام علی جان
    ممنون . فقط چطور کاری کنم که از پایین تولتیپ رو نشون بده..یعنی بالا نشون نده..پایین نشون بده

    توسط حسین پاسخ

  3. درود بر شما
    خیلی عالی بود ساده و روان!
    ممنون

    توسط عدنان پاسخ

    1. قابلی نداشت عدنان خان {گل}

      توسط علی میرزائی پاسخ

  4. با سلام. خسته نباشید عرض می کنم و کمال تشکر را از شما دارم

    توسط طراحی سایت پاسخ

  5. سلام
    اقا خیلی خیلی ممنون
    قبلا کد تولتیپ رو برداشته بودم اما الان با آموزش عالیههه!!
    انشاالله قالب سایتمو که طراحی کنم و سایتو بسازم بنرتونو به طور کامل میزارم تو سایت . یک دنیا ممنون

    توسط عرفان پاسخ

    1. موفق باشی عرفان جان {گل}

      توسط علی میرزائی پاسخ

  6. آقا بعنوان قدر دانی لوگو شما رو در قسمت حامیان ما در سایتم گذاشتم.
    www.sinagfx.ir

    توسط سینا پاسخ

    1. ممنونم سینا جان، شرمندمون کردی!
      شما هم که خودتون دستی در طراحی فلت دارید… فقط اگه یه خورده رو اندازه و نوع فونتی که استفاده کردید + فاصله گریدبندی، بیشتر کار کنید نتیجه ی کارتون خیلی بهتر میشه 🙂

      توسط علی میرزائی پاسخ

  7. دستت درست. در ضمن طراحی سایتت خیلی شیکه، اصلا من عاشق اینجور طراحی فلت هستم.

    توسط سینا پاسخ

  8. دستت درد نکنه…
    دلم نیومد نظر نذلرم ♥

    توسط حمید پاسخ

    1. خیلی آقایی ♥

      توسط علی میرزائی پاسخ

  9. سلام داش علی
    من این کد جی کوئری رو تو head قبل از کد گذاشتم و کد سی اس اس هم تو فایل شیوه نامه در آخرش قرار دادم و به لینک هم تایتل و rel رو دادم ولی نمیاره
    خودتون یه نگاهی بندازید همون بنر تبلیغاتی روی اون گذاشتم ولی نمیاره
    دقیق همینو گذاشتم
    title=”محل تبلیغات شما” rel=”tooltip”

    توسط علی پاسخ

    1. در این آدرس (p-design) که به نظر میاد هیچ یک از مراحل انجام نشده! (نه rel=tooltip ای مشاهده شد و نه کدنویسی جی کوئری!)

      توسط علی میرزائی پاسخ

  10. آخ ببخشید آدرس سایت یاد رفت
    اینم آدرس : rahpooyansms.com

    توسط مهدی پاسخ

  11. علی جان سلام
    اول باید بگم ممنون از راهنمایی های بی دریغت که هر وقت سوالی برامون پیش میاد بدون منت جواب میدی و راهنماییمون میکنی و دقیقاً هم پاس سوالمون رو میگیریم ، بابت این قضیه خیلی ممنونم ازت .
    دوم اینکه یه سوال دیگه برام پیش اومده و اونم اینکه من میخوام تو برگه ی وردپرس خودم 4 تا مستطیل باشه که تو اون مستطیل ها که به رنگ های متفاوت از هم هستند توضیحاتی در مورد کارام بدم مثل قیمت و امکانات و … و برای یه سری شماره ها تولتیپ بزارم که با رفتن ماوس روی اون شماره ها خصوصیات شماره ها ظاهر شه . برای مثال به آدرس زیر نگاهی کن منظورم رو خوب می فهمی :
    آدرس : arinasms.com وقتی که میری پایین 4 تا کادر مستطیل سبز رنگ هستش که کامل منظورم رو متوجه خواهی شد . اگه در این باره منو کمک کنی خیلی ممنون میشم . در ضمن من اگه درگاه بانک ملت رو بخوام به وبسایتم وصل کنم باید چی کار کنم . من شماره ترمینال و غیره رو از بانک گرفتم قبلاً ها . من میخوام از طریق سایت خودم انتقال وجه به حسابم ایجاد کنم . این آدرس سایت منه اگه میتونی یه نگاهی بهش بکن و نظرت رو برام بگو . راهنمایی های شما می تونه کار ساز باشه و به من کمک خواهد کرد /. ببین چه چیزی نواقص داره .ممنون از لطف بی دریغت

    توسط مهدی پاسخ

    1. سلام،
      خواهش میکنم مهدی جان،
      1- اگه منظورت popover لینک هاست که یه مقدار قضیه اش با تولتیپ فرق میکنه. پیشنهادم اینه که popover رو در گوگل سرچ کنی.
      2- اگه نمیخوای به صورت اسکریپتی استفاده کنی، میتونی از افزونه های وردپرس بانک استفاده کنی. فک میکنم چند نمونه برای بانک ملت وجود داشته باشه!!!

      توسط علی میرزائی پاسخ

  12. ممنون

    توسط اکبر قره باغی پاسخ

  13. عالی بود داداش. مرسی از لطفت.

    توسط محمد پاسخ

    1. قابلی نداشت محمد جان {گل}

      توسط علی میرزائی پاسخ

  14. عالی

    توسط نوید میرزاآقازاده پاسخ

دیدگاه خود را بیان کنید