no-img
اِمیلاسلام کاربر مهمان. امروز پنجشنبه ۲۳ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۲۱ تیر ۱۳۹۸،
124 روز پیش
تولتیپ خودکار با جی کوئری
امتیاز 4.83 ( 6 رای )
حمایت از emila.ir

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

انتشار؛ ۲۱ تیر ۱۳۹۸ - 124 روز پیش

چگونه می توان حالت پیشفرض tooltip را در لینک های سایت وردپرسی شخصی سازی کنیم؟

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

$( 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 را به لینک ها اضافه کنیم. به عنوان نمونه:

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

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

فراموش نشود کتابخانه جي کوئري هم حتما بايد در قالب سایت فراخواني شده باشد.
دوستان وردپرسي خلاصه ی کار: تابع رو در يک فايل js ( مثلا main.js )و کدهاي css رو در شيوه نامه style.css قرار دهید. در آخر هم به لینک های دارای خاصیت title ، خاصيت rel=”tooltip” را که پیش تر توضيح دادیم اضافه و تعریف کنید.


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=17053
designer