no-img

اِمیلا تولتیپ خودکار با جی کوئری
اِمیلا
ترفند وب تولتیپ خودکار با جی کوئری
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

منتشر شده در پنجشنبه 27 تیر 1398، 5 روز پیش
تولتیپ خودکار با جی کوئری
امتیاز 4.75 ( 4 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

emila.ir QR-codeتولتیپ خودکار با جی کوئری

منتشر شده در پنجشنبه 27 تیر 1398، 5 روز پیش
50
milipinkman

چگونه می توان حالت پیشفرض 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
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

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

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

لینکهای دانلود قرار گرفته در جعبه دانلود، به صورت مستقیم می باشند.
تمامی فایلها قبل از انتشار تست شده اند تا از بروز هرگونه مشکل جلوگیری شود.
برای دانلود سریعتر و راحت تر، توصیه میکنیم از نرم افزارهای مدیریت دانلود استفاده کنید.
اگر برای دانلود فایلی با مشکل مواجه شدید، از قسمت گزارش اپدیت یا خرابی لینک، ما را باخبر سازید.

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک به ما  -  ارسال ایمیل به ما
IP شما: 54.174.43.27