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

دسته بندی ها : آموزشگاه 1 فوریه 2014 خانه وردپرس 855 بازدید

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

و اما بعد…

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

فقط فراموش نکنيد که حتما مارو تو گوگل پلاس محبوب کنید البته لایکم فراموش نشه…:)

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

نظرات کاربران

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    Time limit is exhausted. Please reload CAPTCHA.

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

    لینک کوتاه :
    0