بوت استرپ JS

جاوا اسکریپت برای بوت استرپ

با افزونه های جدید و سفارشی که با jQuery و Ender کار می کنند، اجزای Bootstrap را زنده کنید.

← بازگشت به خانه بوت استرپ

ScrollSpy bootstrap-scrollspy.js

این پلاگین برای افزودن تعامل scrollspy (به روز رسانی خودکار ناو) به نوار بالای بوت استرپ است.

دانلود

با استفاده از bootstrap-scrollspy.js

  1. $ ( '#topbar' ). scrollSpy ()

نشانه گذاری

برای اینکه به راحتی رفتار اسکرول‌اسپی را به ناوبری خود اضافه کنید، فقط data-scrollspyویژگی را به .topbar.

  1. <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>

مواد و روش ها

$().scrollSpy()

به طور خودکار دکمه های ناوبری را توسط موقعیت اسکرول کاربران فعال می کند.

  1. $ ( 'body > .topbar' ). scrollSpy ()

توجه داشته باشید تگ های لنگر Topbar باید دارای اهداف شناسایی قابل حل باشند. به عنوان مثال، <a href="#home">home</a>باید با چیزی در dom مطابقت داشته باشد مانند <div id="home"></div>.

.scrollSpy ('refresh')

Scrollspy دکمه های ناوبری و مختصات بخش را برای عملکرد ذخیره می کند. اگر نیاز به به روز رسانی این کش دارید (احتمالاً اگر محتوای پویا دارید) فقط با این روش رفرش تماس بگیرید. اگر از ویژگی داده برای تعریف اسکرول اسپای خود استفاده کرده اید، فقط refresh را روی بدنه فراخوانی کنید.

  1. $ ( "بدن" ). scrollSpy ( "بازخوانی" )

نسخه ی نمایشی

پیمایش نوار بالای این صفحه را بررسی کنید.

دکمه‌ها bootstrap-buttons.js

این افزونه قابلیت های بیشتری را برای مدیریت وضعیت دکمه ارائه می دهد.

دانلود

با استفاده از bootstrap-buttons.js

  1. $ ( '.tabs' ). دکمه ()

مواد و روش ها

$().button('toggle')

وضعیت فشار را تغییر می دهد. به btn ظاهری می دهد که فعال شده است.

توجه شما می توانید تغییر خودکار یک دکمه را با استفاده از data-toggleویژگی فعال کنید.

  1. <button class = "btn" data-toggle = "toggle" > ... </button>

$().button('بارگیری')

وضعیت دکمه را روی بارگیری تنظیم می کند - دکمه را غیرفعال می کند و متن را با متن بارگیری می کند. بارگذاری متن باید روی عنصر دکمه با استفاده از ویژگی داده تعریف شود data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>

$().button('reset')

حالت دکمه را بازنشانی می کند - متن را به متن اصلی تغییر می دهد.

دکمه (رشته) $()

حالت دکمه را بازنشانی می‌کند - متن را به هر حالت متنی تعریف‌شده با داده مبادله می‌کند.

  1. <button class = "btn" data-complete-text = "تمام شد!" > ... </button>   
  2. <اسکریپت>
  3.   $('.btn').button('کامل')
  4. </scrip>

نسخه ی نمایشی

برگه ها bootstrap-tabs.js

این افزونه قابلیت سریع و پویا تب و قرص را اضافه می کند.

دانلود

با استفاده از bootstrap-tabs.js

  1. $ ( '.tabs' ). برگه ها ()

نشانه گذاری

شما می توانید پیمایش یک تب یا قرص را بدون نوشتن جاوا اسکریپت با دادن یک data-tabsیا data-pillsویژگی به آنها فعال کنید.

  1.  <ul class = "tabs" data-tabs = "tabs" > ... </ul>

مواد و روش ها

$().tabs یا $().pills

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

  1. <ul class = "tabs" > 
  2.   <li class = "active" ><a href = "#home" > صفحه اصلی </a></li>  
  3.   <li><a href = "#profile" > نمایه </a></li> 
  4.   <li><a href = "#messages" > پیام‌ها </a></li> 
  5.   <li><a href = "#settings" > تنظیمات </a></li> 
  6. </ul>
  7.  
  8. <div class = "pill-content" > 
  9.   <div class = "active" id = "home" > ... </div>  
  10.   <div id = "profile" > ... </div> 
  11.   <div id = "پیام ها" > ... </div> 
  12.   <div id = "settings" > ... </div> 
  13. </div>
  14.  
  15. <اسکریپت>
  16.   $ ( تابع () {  
  17.     $ ( '.tabs' ). برگه ها ()
  18.   })
  19. </script>

مناسبت ها

رویداد شرح
تغییر دادن این رویداد در تغییر برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن تب فعال و برگه فعال قبلی به ترتیب استفاده کنید. 
  1. $ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  2.   ه . هدف // تب فعال شده
  3.   ه . relatedTarget // تب قبلی
  4. })

نسخه ی نمایشی

جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید. Nesciunt tofu stumptown aliqua، پاکسازی استاد مصنوعی یکپارچهسازی با سیستمعامل. سبیل کلیشه تمپور، ویلیامزبورگ کارلوس وگان هلوتیکا. Reprehenderit قصاب رترو keffiyeh dreamcatcher synth. ژاکت کازبی eu banh mi، qui irure تری ریچاردسون سابق مرکب. Aliquip placeat salvia cillum iphone. Seitan aliquip quis ژاکت کش باف پشمی پوشاک آمریکایی، قصاب voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Twipsy bootstrap-twipsy.js

بر اساس پلاگین عالی jQuery.tipsy نوشته شده توسط Jason Frame. twipsy یک نسخه به روز شده است که به تصاویر متکی نیست، از css3 برای انیمیشن ها و از ویژگی های داده برای ذخیره عنوان استفاده می کند!

دانلود

با استفاده از bootstrap-twipsy.js

  1. $ ( '#example' ). twipsy ( گزینه ها )

گزینه ها

نام نوع پیش فرض شرح
جان دادن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
تاخیر در عدد 0 تأخیر قبل از نمایش راهنمای ابزار (میلی‌ثانیه)
تاخیر عدد 0 تاخیر قبل از پنهان کردن نکته ابزار (ms)
بازگشتی رشته '' متنی برای استفاده زمانی که عنوان راهنمای ابزار وجود ندارد
تعیین سطح رشته 'در بالا' نحوه قرار دادن راهنمای ابزار - بالا | زیر | چپ | درست
html بولی نادرست به محتوای html در راهنمای ابزار اجازه می دهد
زنده بولی نادرست از نمایندگی رویداد به جای کنترل کننده رویداد فردی استفاده کنید
انحراف عدد 0 فاصله پیکسلی راهنمای ابزار از عنصر هدف
عنوان رشته، تابع 'عنوان' ویژگی یا روش برای بازیابی متن عنوان
ماشه رشته شناور راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای
قالب رشته [نشانه گذاری پیش فرض] قالب html که برای رندر کردن یک twipsy استفاده می شود.

توجه داشته باشید که گزینه‌های نمونه twipsy را می‌توان با استفاده از ویژگی‌های داده مشخص کرد.

  1. <a href = "#" data-placement = "below" rel = 'twipsy' title = 'متن عنوان' > متن </a>

مواد و روش ها

$().twipsy(گزینه ها)

یک کنترلر twipsy را به مجموعه عناصر متصل می کند.

.twipsy ('show')

یک عنصر twipsy را نشان می دهد.

  1. $ ( '#element' ). توئیپسی ( "نمایش" )

.twipsy ("پنهان کردن")

یک عنصر twipsy را پنهان می کند.

  1. $ ( '#element' ). توئیپسی ( "پنهان کردن" )

.twipsy (درست)

نمونه کلاس twipsy عناصر را برمی گرداند.

  1. $ ( '#element' ). توئیپسی ( درست )

توجه داشته باشید که این مورد را می توان با بازیابی کرد $().data('twipsy').

نسخه ی نمایشی

شلوارهای چسبان سطح بعدی کفیه که احتمالا اسمش را نشنیده اید. غرفه عکس ریش خام جین لترپرس وگان کیسه پیام رسان stumptown. سیتان مزرعه تا میز، پوشاک آمریکایی 8 بیتی کینوا پایدار فیکس مک‌سوئینی دارای یک مجلسی وینیل تری ریچاردسون است. استامپ تاون ریش، ژاکت کش باف پشمی بانه می لومو تندرکت. توفو بیودیزل ویلیامزبورگ مارفا، چهار لوکو مک‌سوئینی پاکسازی وگان شامبری. یک صنعت‌گر واقعا کنایه‌آمیز، با هر کیتار، منظره‌ای از مزرعه تا میز بانکی آستین توییتر ، قهوه جین تک اصل فریگان کرد خام را مدیریت می‌کند.

Popovers bootstrap-popover.js

افزونه popover یک رابط ساده برای افزودن پاپاور به برنامه شما ارائه می دهد. این افزونه bootstrap-twipsy.js را گسترش می دهد ، بنابراین هنگام گنجاندن پاپاورها در پروژه خود، حتماً آن فایل را نیز بگیرید!

توجه شما باید فایل bootstrap-twipsy.js را قبل از bootstrap-popover.js اضافه کنید.

دانلود

با استفاده از bootstrap-popover.js

  1. $ ( '#example' ). پاپاور ( گزینه ها )

گزینه ها

نام نوع پیش فرض شرح
جان دادن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
تاخیر در عدد 0 تأخیر قبل از نمایش راهنمای ابزار (میلی‌ثانیه)
تاخیر عدد 0 تاخیر قبل از پنهان کردن نکته ابزار (ms)
بازگشتی رشته '' متنی برای استفاده زمانی که عنوان راهنمای ابزار وجود ندارد
تعیین سطح رشته 'درست' نحوه قرار دادن راهنمای ابزار - بالا | زیر | چپ | درست
html بولی نادرست به محتوای html در راهنمای ابزار اجازه می دهد
زنده بولی نادرست از نمایندگی رویداد به جای کنترل کننده رویداد فردی استفاده کنید
انحراف عدد 0 فاصله پیکسلی راهنمای ابزار از عنصر هدف
عنوان رشته، تابع 'عنوان' ویژگی یا روش برای بازیابی متن عنوان
محتوا رشته، تابع "محتوای داده" رشته یا روشی برای بازیابی متن محتوا. اگر هیچ کدام ارائه نشود، محتوا از یک ویژگی داده-محتوای منبع گرفته می شود.
ماشه رشته شناور راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای
قالب رشته [نشانه گذاری پیش فرض] قالب html که برای رندر پاپاور استفاده می شود.

توجه داشته باشید که گزینه‌های نمونه پاپ اور را می‌توان از طریق استفاده از ویژگی‌های داده مشخص کرد.

  1. <a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > متن </a>

مواد و روش ها

$().popover(گزینه ها)

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

.popover('show')

پاپاور عناصر را نشان می دهد.

  1. $ ( '#element' ). پاپاور ( "نمایش" )

.popover ("پنهان کردن")

پاپاور عناصر را پنهان می کند.

  1. $ ( '#element' ). پاپاور ( "پنهان کردن" )

نسخه ی نمایشی

شناور برای پاپاور

هشدارهای bootstrap-alerts.js

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

دانلود

با استفاده از bootstrap-alerts.js

  1. $ ( ".alert-message" ). هشدار ()

نشانه گذاری

فقط یک data-alertویژگی به پیام های هشدار خود اضافه کنید تا به طور خودکار عملکرد نزدیک به آنها ارائه شود.

گزینه ها

نام نوع پیش فرض شرح
انتخابگر رشته '.بستن' کدام انتخابگر را برای بستن یک هشدار هدف قرار دهید.

مواد و روش ها

$().alert()

همه هشدارها را با عملکرد نزدیک بسته بندی می کند. برای اینکه هشدارها در هنگام بسته شدن متحرک شوند، مطمئن شوید که کلاس .fadeو .inکلاس قبلاً برای آنها اعمال شده است.

.alert ('close')

یک هشدار را می بندد.

  1. $ ( ".alert-message" ). هشدار ( "بستن" )

نسخه ی نمایشی

×

گواکامول مقدس! بهتر است خودتان را بررسی کنید، شما خیلی خوب به نظر نمی رسید.

×

آه ضربه محکم و ناگهانی! شما یک خطا دریافت کردید! این و آن را تغییر دهید و دوباره امتحان کنید. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

این اقدام را انجام دهید یا این کار را انجام دهید