آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با راهنمای ابزار bootstrap

در این آموزش فرا خواهید گرفت که چگونه tooltip هایی با تویتر بوت استرپ ایجاد کنید.

ایجاد tooltip با تویتر بوت استرپ

Tooltipیک پاپ آپ کوچک می باشد که زمانی ظاهر می شود که یوزر مکان نمای ماوس را روی عنصری مانند لینک و یا دکمه نگه دارد و اطلاعاتی در مورد آن عنصر ارائه می دهد. راهنمای ابزار می تواند برای بازدیدکنندگان جدید وب سایت شما بسیار مفید باشد، زیرا یوزر را قادر می کنند تا از هدف آیکن ها و لینک ها با قرار دادن ماوس زوی آنها مطلع شود.

راه اندازی راهنمای ابزار

راهنمای ابزار می تواند از طریق جاوا اسکریپت راه اندازی شود ، فقط برنامه tooltip بوت استرپ را با انتخابگر"id" یا "class" از عنصر هدف در کد جاوا اسکریپت خود فرا بخوانید.

مثال:


نکته:

برای اجرای محرک ها و استفاده از راهنمای ابزار و popover باید خود شما آنها را به راه بیندازید.

تنظیم جهت راهنمای ابزار

شما می توانید راهنمای ابزار را طوری تنظیم کنید که در قسمت بالا، پایین و یا سمت چپ و راست یک عنصر ظاهر شود.

تثبیت موقعیت راهنمای ابزار از طریق ویژگی های داده

مثال زیر به شما نشان خواهد داد که چگونه جهت راهنمای ابزار را با استفاده از ویژگی های داده تنظیم کنید.



Tooltip



|



Another tooltip

|



Large tooltip

|

Last tooltip

تثبیت موقعیت راهنمای ابزار از طریق جاوا اسکریپت

مثال زیر به شما نشان خواهد داد که چگونه جهت راهنمای ابزار را با استفاده از جاوا اسکریپت تنظیم کنید.

    

گزینه های خاصی وجود دارند که ممکن است وارد برنامه tooltip() بوت استرپ شوند تا عملکرد راهنمای ابزار پلاگین را به دلخواه در آورند:

Description
Default Value
Type
Name
یک CSS انتقال محو (fade transition) برای راهنمای ابزار به کار می گیرد.
true
boolean
animation
Html را وارد راهنمای ابزار می کند. اگر مقدارfalse، برنامه jQuery'stext() برای وارد کردن محتوا به DOM استفاده می شود. اگر در مورد حمله های XSS نگران هستید از متن استفاده کنید.
false
boolean
html
موقعیت راهنمای ابزار را تعیین می کند: بالا، پایین، چپ، راست یا خودکار. اگر خودکا یا auto انتخاب شده باشد، راهنمای ابزار را تغییر جهت می دهد، برای مثال اگر مکان جایگذاری auto top باشد، راهنمای ابزار در صورت امکان آن را در بالا نشان می دهد، در غیر اینصورت در پایین نمایش داده می شود.
'top'
string | function
placement
اگر یک انتخابگر ارائه شود، آبجکت های راهنمای ابزار به اهداف خاصی ضمیمه می شوند.
false
string
selector
اگر ویژگی تیتر مشخص نباشد مقدار title پیش فرض را تنظیم می کند.
""
string | function
title
مشخص می کند که چگونه ابزار راهنما تحریک می شود –بر روی hover / focus / manual کلیک کنید.
'hover focus'
string
trigger
زمان برای تاخیر در نشان دادن و پنهان کردن پیام نوار ابزار –برای نوع دستی به کار نبرید. زمان تاخیر برای ساختار پنهان کردن یا نشان دادن آبجکت عبارت است از:delay: { show: 500, hide: 100 }
0
number | object
delay
 
 
 
 
ابزار راهنما را به یک حاوی عنصر مشخص ضمیمه می کند: 'body'
false
string | false
container
HTML پایه برای استفاده در زمان ایجاد ابزار راهنما. عنوان ابزار راهنما وارد عنصری می شود که دارای گروه .tooltip-inner باشد و عنصری با گروه.tooltip-arrow مکان نمای راهنمای ابزار خواهد شد. بیرونی ترین عنصر پوشاننده باید گروه .tooltip را داشته باشد.
''
string
template
HTML پایه برای استفاده در زمان ایجاد ابزار راهنما. عنوان ابزار راهنما وارد عنصری می شود که دارای گروه .tooltip-inner باشد و عنصری با گروه.tooltip-arrow مکان نمای راهنمای ابزار خواهد شد. بیرونی ترین عنصر پوشاننده باید گروه .tooltip را داشته باشد.
''
string
template
ابزار راهنما را در داخل مرزهای این عنصر نگه دارید: : viewport: '#viewport' or{ selector: '#viewport', padding: 0 }
{ selector: 'body', padding: 0 }
string | object
viewport

شما همچنین این گزینه ها را با استفاده از ویژگی های داده برای راهنمای ابزار تنظیم می کنید. –فقط نام گزینه را به داده ضمیمه کنید - مانند data-animation="", data-placement="" و غیره.

برنامه ها

این ها برنامه های استاندارد ابزار راهنمای بوت استرپ می باشند.

$().tooltip(options)

این برنامه ابزار راهنما را به عناصر گروه ضمیمه می کند.

مثال:

این برنامه ابزار راهنمای یک عنصر را نمایان می کند.

مثال:

این برنامه ابزار راهنمای یک عنصر را مخفی می کند.

این برنامه ابزار راهنمای یک عنصر را در هم می پیچد.


این برنامه راهنمای ابزار یک عنصر را مخفی و نابود می کند.

رویدادها

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

Description
Event
زمانی که برنامه نمایش نمونه فراخوانده می شود، این رویداد فورا اتفاق می افتد.
show.bs.tooltip
وقتی که راهنمای ابزار برای یوزر قابل رویت باشد این رویداد اتفاق می افتد. این رویداد تا زمانی که فرایند تغییر CSS کامل نشده باشد، منتظر می ماند.
show.bs.tooltip
وقتی که راهنمای ابزار برای یوزر قابل رویت باشد این رویداد اتفاق می افتد. این رویداد تا زمانی که فرایند تغییر CSS کامل نشده باشد، منتظر می ماند.
shown.bs.tooltip
زمانیکه برنامه نمونه ی پنهان فرا خوانده شود، این رویداد فورا اتفاق می افتد.
hide.bs.tooltip

مثال زیر پیام هشداری را نمایش می دهد برای زمانیکه تغییر راهنمای ابزار به طور کامل انجام شده باشد.

مثال:

  • 3272
  •    1728
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .