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

دسته‌ها : آموزش, جی کوئری, وردپرس علی میرزائی 58 دیدگاه‌ها

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

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

و اما بعد…

اولین و مهمترین مرحله در انجام این کار، تعریف یک تابع جی کوئری! اما کار این تابع چیه؟!؟
محوریت کار این تابع، گرفتن توضیحات (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. لودش را سنگین می کنه .

    توسط برق گرفته پاسخ

  2. سلام
    تویه موزیلا کار نمیکنه !

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

    1. سلام،
      نه! اتفاقا با موزیلا هم کاملا مطابقت داره.

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

  3. سلام
    طبق حرفتونکه گفتین ” این کد نیاز به ویژگی title داره، بنابراین شما میتونید در لینک زمینه های دلخواهتون ویژگی title تعریف کنید .”
    چه طوری می تونم title رو تعریف کنم
    تشکر

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

    1. نمونش رو میتونید در کد html متن اصلی مشاهده کنید.

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

  4. سلام
    چه طور می تونم به جای عنوان محتوای یکی از زمینه های دلخواه رو بگیرم ؟
    تشکر

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

    1. همونطور که تو متن اصلی اشاره شد، این کد نیاز به ویژگی title داره، بنابراین شما میتونید در لینک زمینه های دلخواهتون ویژگی title تعریف کنید.
      اما اگه محتوای این زمینه ها خارج از لینک و title هستند، میتونید به صورت استاتیک براش یه تولتیپ تعریف کنید که اسکریپت های زیادی هم برای این کار وجود داره.
      یه نمونه سایت واس تعریف استایل اختصاصی:
      http://tiny.alimir.ir/bg

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

  5. آقا عاشق قالب وبسایتت شدم…

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

  6. خیلی خوب و کاربردی. مرسی

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

    1. ممنونم دوست عزیز {گل}

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

  7. سلام ممنون آموزش خوبی بود

    توسط رسول پاسخ

    1. خواهش میکنم آقا رسول، قابلی نداشت {گل}

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

  8. سلام . مطلب کاربردی ای بود . درضمن پلاگین خوبی هم ارائه دادین .

    توسط hannanstd پاسخ

  9. با سلام وخسته نباشید وب سایت بسیار عالی دارین واقعا بیسته
    ببخشید پوسته سایتتون هم برای استفاده بقیه میشه قرار بدین؟؟
    یا اگه امکانش هست برای درست کردن همچی پوسته ای چقدر باید هزینه کرد
    با تشکر

    توسط mostafa پاسخ

    1. ممنونم آقا مصطفی، لطف دارید…
      متأسفانه امکان انجام این کار رو ندارم، چون پوسته اختصاصیه و کار زیادی روش انجام شده. :(
      از طریق فرم تماس، ایمیل بزنید تا در این رابطه بیشتر صحبت کنیم…

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

  10. ببخشید ، بوت استرپ چی هست ؟

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

    1. بوت استرپ، در واقع یک فریم ورک قدرتمند (بر پایه html ، css و جی کوئری) با مجموعه ای از کامپوننت های رایگان که کار طراحی قالب رو بسیار ساده میکنه.
      توضیحات بیشتر رو میتونید در صفحه اصلی بوت استرپ مطالعه کنید:
      getbootstrap.com

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

      1. وقتی از کدهای bootstrap در قالبم استفاده می کنم به هم می خوره قالب سایتم چرا ؟

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

        1. مشکل از بوت استرپ نیست، احتمالا این مسأله به خاطر شباهت در نام سلکتورها به وجود اومده!!!
          اما صرفا برای ساختن همچین باکس هایی نمی ارزه که کل کتابخانه بوت استرپ رو در قالبتون فراخوانی کنید! چرا که خیلی ساده میتونید یک div در html ایجاد کنید و با چند خط css بهش استایل بدید…
          یک نمونه ساده رو فردا در سایت میذارم که استفاده کنید :)

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

  11. راستی شما قالب سئو می کنید یا نه ؟
    من یه قالب دست کاری کردم یکم می خواهم سئو بره بالا
    اگر انجام می دهید خبر م کنید با قیمت

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

    1. از طریق فرم تماس، ایمیل بزنید تا در این رابطه صحبت کنیم…

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

  12. تشکر داش علی
    مشکلم حل شد ، یکی از کد ها مشکل داشت
    دستتون درد نکنه بابت آموزش ، اومدی شیراز خبر بده جبران کنیم
    :)

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

    1. خواهش میکنم آقا محمد حسین،
      باوشه حتما سر میزنم 😉

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

  13. سلام آقا علی شرمنده هی مزاحم میشم ، من انجامش دادم و یه مشکل پیش اومده
    به این تصویر یه نگاه بندازید خودتون می فهمید که مشکل چیه :
    http://axgig.com/images/97613575009834035427.jpg
    مشکلش اینه که برای بار اول که روی لینک میرم تولتیپ رو درست نشون میده و برای بار دوم که می رم دیگه نشون نمیده.
    حالا باید چیکارش کرد

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

    1. سلام،
      اختیار دارید، هیچ مزاحمتی نیست…
      اینطوری نمیتونم نظر قطعی بدم، باید کدهاتون رو به صورت آنلاین بررسی کنم…
      کدهای بخش جی کوئری رو کامل در قالب قرار دادید؟!؟

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

  14. سلام مجدد
    میشه بگید این قسمت آبی رنگ که داخلش نوشتید : فقط فراموش نکنید که کتابخانه جی کوئری هم حتما باید…
    ، چگونه ساخته اید ؟ اگر افزونه هست معرفی کنید ، اگر هم کد نویسی شده است اگر برایتان مقدور هست به ما هم بگید که استفاده کنیم ، ممنون

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

    1. سلام،
      این کامپوننت به طور پیشفرض در بوت استرپ وجود داره و کاری که من کردم، استفاده از زمینه های دلخواه وردپرس در این ماژول.
      اما نمونه های مشابه دیگه ای هم در سطح وب وجود داره که -اگه قالبتون بوت استرپ نیست- میتونید از اونها استفاده کنید.
      http://tiny.alimir.ir/jk

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

  15. خیلی جالب بود و ازش استفاده کردم
    خیلی بدردم خرد
    (از اینکه برای پست هاتون ارزش قائلید و پست های قوی ارسال می کنید سپاسگزارم)
    یک رای ناقابل هم تقدیم به شما بزرگوار
    پاینده باشید

    توسط شاهرخ پاسخ

    1. ممنونم شاهرخ جان، لطف کردی {گل}
      اینکه قابلی نداشت، لیاقت کاربران وب پارسی خیلی بیشتر از این حرفاست…

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

  16. حالا شد! علی جان بیشتر رو این مطالب کار کن ! روی بخش گرافیک زیاد مطالب حرفه ای قرار نمیدی!(انتقاد بودا ناراحت نشی)

    توسط mohammad پاسخ

    1. به روی چشم! نه بابا، من خیلی هم انتقاد پذیرم! فقط اگه دستم بهت نرسه… :) 😉 :) 😉

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

  17. عای عالی عالی
    خسته نباشید
    منم یک رای دادم

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

    1. ممنونم آقا مجید، لطف کردید {گل}

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

  18. سلام
    آقا واقعا دستتون درد نکنه ، همون طور که قول دادم لینک شما داخل سایت قرار گرفت.
    فقط یه سوال اون قسمت JQuery رو کجا می تونم قرار بدم ؟
    فایل Js بسازم یا اینکه داخل فانکشن قالب بذارمش ؟

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

    1. خواهش میکنم، کاری نکردم که :)
      فرقی نداره، هم میتونید یک فایل با فرمت js بسازید و اون رو در قالب فراخوانی کنید و هم اینکه کدها رو داخل تگ script، به صورت مستقیم در قالب قرار بدید.
      * بهترین مکان قرار دادن کدهای جاوااسکریپتی، قبل از پایان تگ body.

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

  19. یه رای ناقابل مخصوص وبسایت شما توی جشنواره ی وب ایران از طرف من.امیدوارم موفق بشید

    توسط علیرضا پاسخ

    1. ممنون از شما دوست عزیز که اینقدر به ما لطف دارید {گل}
      پیروز باشید…

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

  20. بی نظیر بود

    توسط علیرضا پاسخ

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