سلام عزیزان وقتتون بخیر با اموزشهای امروز ما که درمورد jquery با شما همراه هستیم . ویجت tooltip در jQueryUI ابزار داخلی را جایگزین می کند. این ویجت زمینه های جدید اضافه کرده و اجازه ی تنظیم آن را می دهد. ابتدا اجازه بدهید tooltip ها را تعریف کرده و درک کنیم. Tooltip ها به هر عنصری ضمیمه می شوند. برای نمایش tooltip ها یک تیتر مرتبط به عناصر ورودی و یک تیتر در ارتباط با مقداری که قرار است به عنوان tooltip استفاده شود، اضافه کنید. وقتی که با ماوس خود روی tooltip حرکت می کنید، تیتر در یک باکس کوچک در کنار عنصر نمایش داده می شود.
jQueryUI متد tooltip() را برای افزودن tooltip به هر عنصر ارائه می دهد. این متد به طور پیش فرض یک انیمیشن محو ارائه می دهد تا tooltip را نمایش داده و پنهان کند.
ترکیب:
متد به دو فرم زیر قابل استفاده می باشد.
$(selector, context).tooltip (options) Method
$(selector, context).tooltip (“action”, [params]) Method
متد $(selector, context).tooltip (options) :
متد tooltip (options) اعلام می کند که یک tooltip می تواند به یک عنصر HTML اضافه شود. پارامتر options آبجکتی است که رفتار و ظاهر tooltip را تعیین می کند.
ترکیب:
$(selector, context).tooltip(options);
با استفاده از آبجکت javascript می توانید یک یا چند گزینه را همزمان ارائه دهید. اگر بیشتر از یک گزینه وجود داشته باشد، می توانید آنها را با استفاده از کاما از یکدیگر جدا کنید، مانند ترکیب زیر:
$(selector, context).tooltip({option1: value1, option2: value2….. });
جدول زیر گزینه های مختلفی را ارائه می دهد که با این متد استفاده می شوند:
Option
Description
content
این گزینه محتوای یک tooltip را نمایش می دهد. مقدار پیش فرض آن function returning the title attribute می باشد.
disabled
این گزینه وقتی روی true تنظیم شده باشد، tooltip را غیرفعال می سازد. مقدار پیش فرض آن false است.
hide
این گزینه افکت انیمیشن را در زمان پنهان کردن tooltip نمایش می دهد. مقدار پیش فرض آن true است.
items
این گزینه نشان می دهد که کدام آیتم ها می توانند tooltip ها را نمایش دهند. مقدار پیش فرض آن [title] است.
position
این گزینه موقعیت tooltip w.r.t ، عنصر مرتبط به هدف، را نشان می دهد. مقدار پیش فرض آن function returning the title attribute می باشد. مقادیر ممکن عبارتند از my, at, of, collision, using, within.
show
این گزینه نشان می دهد که نمایش tooltip را انجام دهیم. مقدار پیش فرض آن true است.
tooltipClass
این گزینه گروهی است که به tooltip widget اضافه می شود، برای ابزاری مانند هشدارها یا خطاها. مقدار پیش فرض آن null است.
track
این گزینه وقتی روی true تنظیم شده باشد، tooltip ماوس را حرکت می دهد / دنبال می کند. مقدار پیش فرض آن false است.
بخش بعدی چند مثال کاربردی برای کارآیی tooltip ارائه خواهد داد.
قابلیت پیش فرض:
مثال زیر قابلیت tooltip را توضیح می دهد که هیچ پارامتری به متد tooltip() انتقال نمی دهد.
$(function () {
$(“#tooltip-1”).tooltip();
$(“#tooltip-2”).tooltip();
});
I also have a tooltip
در مقال بالا روی لینک های بالا حرکت کنید یا از کلید تب استفاده کنید تا تمرکز را روی هرکدام از عناصر قرار دهید.
استفاده از content، track و disabled
مثال زیر استفاده از سه گزینه ی مهم (a) content (b) track و (c) disabled را در قابلیت tooltip از JqueryUI توضیح می دهد.
$(function () {
$(“#tooltip-3”).tooltip({
content: “Hi!“,
track: true
}),
$(“#tooltip-4”).tooltip({
disabled: true
});
});
در مثال بالا محتوای tooltip از اولین باکس بر روی استفاده از گزینه ی content تنظیم شده است. متوجه می شوید که tooltip ماوس را دنبال می کند. Tooltip مربوط به باکس دوم غیرفعال می باشد.
استفاده از position
مثال زیر استفاده از گزینه ی position را در قابلیت tooltip از JqueryUI نشان می دهد.
body {
margin-top: 100px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
content: “”;
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAA transparent;
border-width: 10px 10px 0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: white transparent;
border-width: 10px 10px 0;
}
$(function () {
$(“#tooltip-7”).tooltip({
position: {
my: “center bottom”,
at: “center top-10”,
collision: “none”
}
});
});
در مثال بالا موقعیت tooltip بر روی بالای باکس ورودی تنظیم شده است.
متد $(selector, context).tooltip (“action”, [params])
متد tooltip (action, params) می تواند عملی را روی عناصر tooltip انجام دهد، مانند غیرفعال کردن tooltip. Action به عنوان یک رشته در اولین برهان تعیین شده و یک یا چند params براساس عمل داده شده، ارائه می شوند.
اساسا در اینجا این اکشن ها متدهای jQuery می باشند که به فرم string استفاده می شوند.
ترکیب:
$(selector, context).tooltip (“action”, [params]);
جدول زیر اکشن های مربوط به این متد را ارائه می کند:
Action
Description
close()
این اکشن tooltip را می بندد. این متد هیچ برهانی (argument) قبول نمی کند.
destroy()
این اکشن قابلیت tooltip را به طور کل حذف می کند و عنصر را به وضعیت pre-init خود بازخواهد گرداند. این اکشن هیچ برهانی را نمی پذیرد.
disable()
این اکشن tooltip را غیرفعال می سازد. این متد هیچ برهانی را نمی پذیرد.
enable()
این اکشن tooltip را فعالسازی می کند. این متد هیچ برهانی را نمی پذیرد.
open()
این اکشن به طور برنامه ریزی شده ای tooltip را باز می کند. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این اکشن مقدار مربوط به optionName را برای tooltipدریافت می کند. این متد هیچ برهانی را نمی پذیرد.
option()
این اکشن یک آبجکت حاوی جفت های key/value را دریافت می کند، که گزینه های فعلی tooltip را hash نمایش می دهد. این متد هیچ برهانی را نمی پذیرد.
option( optionName, value )
این اکشن مقدار گزینه ی tooltip مرتبط با optionName تعیین شده را تنظیم می کند.
option( options )
این اکشن یک یا چند گزینه برای tooltip تنظیم می کند.
widget()
این اکشن یک آبجکت jQuery حاوی عنصر اصلی را بازمی گرداند. این متد هیچ برهانی نمی پذیرد.
مثال:
اکنون اجازه بدهید از اکشن های جدول بالا استفاده کنیم. مثال زیر استفاده از اکشن های disable و enable را توضیح می دهد.
$(function () {
$(“#tooltip-8”).tooltip({
//use ‘of’ to link the tooltip to your specified input
position: { of: ‘#myInput’, my: ‘left center’, at: ‘left center’ },
}),
$(‘#myBtn’).click(function () {
$(‘#tooltip-8’).tooltip(“open”);
});
});
در مثال بالا روی دکمه ی myBtn کلیک کنید که یک tooltip برای شما نمایش داده خواهد شد.
مدیریت رویداد روی عناصر tooltip
علاوه بر متد tooltip (options) که در بخش های قبل مشاهده کردیم، JqueryUI متدهایی ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر ارائه شده اند:
Event Method
Description
create(event, ui)
زمانیکه یک tooltip ایجاد می شود، این متد آغاز به کار می کند. درحالیکه رویداد از نوع Event می باشد، ui از نوع object است.
close(event, ui)
با بسته شدن tooltip فعال می شود. معمولا روی focusout یا mouseleave آغاز به کار می کند. درحالیکه رویداد از نوع Event می باشد، ui از نوع object است.
open(event, ui)
با نمایش یا اجرای tooltip آغاز به کار می کند. معمولا روی focusin یا mouseover آغاز می شود. درحالیکه رویداد از نوع Event می باشد، ui از نوع object است.
مثال:
مثال زیر استفاده از یک متد را در طول دوره ی قابلیت tooltip توضیح می دهد. این مثال در واقع استفاده از رویدادهای open و close را توضیح می دهد.
$(function () {
$(‘.tooltip-9’).tooltip({
items: ‘a.tooltip-9’,
content: ‘Hello welcome…’,
show: “slideDown”, // show immediately
open: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).fadeTo(“slow”, 0.5);
});
}
});
});
$(function () {
$(‘.tooltip-10’).tooltip({
items: ‘a.tooltip-10’,
content: ‘Welcome to TutorialsPoint…’,
show: “fold”,
close: function (event, ui) {
ui.tooltip.hover(function () {
$(this).stop(true).fadeTo(500, 1);
},
function () {
$(this).fadeOut(‘500’, function () {
$(this).remove();
});
});
}
});
});
در مثال بالا tooltip برای Hover over me! فورا ناپدید می شود، در حالیکه tooltip برای Hover over me too! پس از مدت زمان ۱۰۰۰ms محو می شود.
