خرید هاست ارزان ایران / آلمان

متنوع ترین سرویس های هاستینگ با CPANEL افزودن دامنه - ایمیل - mysql نامحدود پرداخت بصورت ماهانه / سه ماهه / شش ماهه / سالانه SSL رایگان حتی برای دامنه های IR راه اندازی آنی پشتیبانی 24 ساعته ، یکماه ضمانت بازگشت وجه امکان استفاده از شتابدهنده و پکیج تضمین امنیت وردپرس مشاوره آنلاین روی سایت | 02154109999 | talashnet.com

اپلیکیشن ساز آنلاین اپتو

ساخت اپلیکیشن بدون کدنویسی دریافت خروجی برای اندروید و آی او اس امکان ساخت اپلکیشن فروشگاهی، خبری، آموزشی، وردپرس، ووکامرس، موزیک و....تلفن تماس و پشتیبانی 03136626049 از ساعت 10 الی 17 خودت اپتو بساز و.. ..

کابین وب

100 قالب وردپرس کاملا اورجینال و فارسی همراه با بسته نصبی + آپدیت و پشتیبانی مادام العمر 75 افزونه پرکاربرد و پرفروش تماما فارسی و اورجینال با 99 درصد تخفیف ویژه برای کاربران قالب های 100 هزارتومانی را 1000 تومان خرید کنید و...

خانه » مقالات,آموزش,ترفند » آموزش ها » ساخت تولتیپ خودکار با کمک جی کوئری

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

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

و اما بعد…

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

$( 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>

1	<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;
}

#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;

}

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

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