جاوا اسکریپت

اکنون با 13 پلاگین سفارشی جی کوئری، اجزای Bootstrap را زنده کنید.

فردی یا تالیفی

پلاگین ها را می توان به صورت جداگانه (اگرچه برخی از آنها وابستگی لازم دارند) یا همه به یکبار گنجانده شوند. هر دو bootstrap.js و bootstrap.min.js شامل همه افزونه ها در یک فایل هستند.

ویژگی های داده

شما می توانید از تمام پلاگین های بوت استرپ صرفاً از طریق API نشانه گذاری بدون نوشتن یک خط جاوا اسکریپت استفاده کنید. این اولین API کلاس بوت استرپ است و باید در هنگام استفاده از یک پلاگین اولین مورد توجه شما باشد.

گفته می شود، در برخی شرایط ممکن است مطلوب باشد که این عملکرد خاموش شود. بنابراین، ما همچنین توانایی غیرفعال کردن API ویژگی داده را با جدا کردن همه رویدادها در فضای نام بدنه با «data-api» ارائه می‌کنیم. به نظر می رسد این است:

  1. $ ( "بدن" ). خاموش ( '.data-api' )

از طرف دیگر، برای هدف قرار دادن یک پلاگین خاص، فقط نام افزونه را به عنوان فضای نام به همراه فضای نام data-api مانند زیر وارد کنید:

  1. $ ( "بدن" ). خاموش ( '.alert.data-api' )

API برنامه‌ای

ما همچنین معتقدیم که شما باید بتوانید از تمام پلاگین های Bootstrap صرفاً از طریق JavaScript API استفاده کنید. همه APIهای عمومی متدهای تکی و زنجیره‌ای هستند و مجموعه‌ای را که بر اساس آن عمل شده است برمی‌گردانند.

  1. $ ( ".btn.danger" ). دکمه ( "تغییر" ). addClass ( "چربی" )

همه متدها باید یک شی گزینه اختیاری، رشته‌ای که یک متد خاص را هدف قرار می‌دهد یا هیچ چیز (که یک پلاگین را با رفتار پیش‌فرض شروع می‌کند) بپذیرند:

  1. $ ( "#myModal" ). modal () // با پیش‌فرض مقداردهی اولیه شد
  2. $ ( "#myModal" ). معین ({ صفحه کلید : نادرست }) // بدون صفحه کلید مقداردهی اولیه شد
  3. $ ( "#myModal" ). modal ( 'show' ) // مقداردهی اولیه می کند و بلافاصله نمایش را فراخوانی می کند

هر افزونه همچنین سازنده خام خود را در یک ویژگی «Constructor» نشان می دهد: $.fn.popover.Constructor. اگر می‌خواهید نمونه پلاگین خاصی را دریافت کنید، آن را مستقیماً از یک عنصر بازیابی کنید: $('[rel=popover]').data('popover').

بدون درگیری

گاهی اوقات لازم است از افزونه های بوت استرپ با سایر فریم ورک های UI استفاده کنید. در این شرایط، گاهی اوقات ممکن است برخورد فضای نام رخ دهد. اگر این اتفاق افتاد، می‌توانید با .noConflictافزونه‌ای که می‌خواهید ارزش آن را برگردانید تماس بگیرید.

  1. var bootstrapButton = $ . fn . دکمه . noConflict () // $.fn.button را به مقدار قبلاً اختصاص داده شده برگرداند
  2. دلار _ fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn عملکرد بوت استرپ را بدهید

مناسبت ها

بوت استرپ رویدادهای سفارشی را برای اکثر اقدامات منحصر به فرد افزونه فراهم می کند. به طور کلی، این ها به صورت مصدر و ماضی می آیند - که در آن مصدر (مثل show) در شروع یک رویداد تحریک می شود، و شکل ماضی آن (مصدر) shownپس از اتمام یک عمل، ماشه است.

همه رویدادهای نامحدود عملکرد PreventDefault را ارائه می دهند. این امکان را فراهم می کند تا اجرای یک عمل قبل از شروع آن متوقف شود.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. اگر (! داده ) e را برگرداند . preventDefault () // نمایش مدال را متوقف می کند
  3. })

درباره انتقال ها

برای افکت های انتقال ساده، یک بار bootstrap-transition.js را در کنار سایر فایل های JS قرار دهید. اگر از bootstrap.js کامپایل‌شده (یا کوچک‌شده) استفاده می‌کنید ، نیازی به گنجاندن این نیست - قبلاً وجود دارد.

موارد استفاده کنید

چند نمونه از افزونه انتقال:

  • لغزش یا محو شدن در مدال
  • محو شدن برگه ها
  • محو شدن هشدارها
  • شیشه های چرخ فلک کشویی

مثال ها

مدال‌ها ساده، اما انعطاف‌پذیر هستند و پیام‌های محاوره‌ای با حداقل عملکرد مورد نیاز و پیش‌فرض‌های هوشمند دارند.

مثال ثابت

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

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> سرصفحه معین </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> یک بدن خوب… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > بستن </a>
  11. <a href = "#" class = "btn btn-primary" > ذخیره تغییرات </a>
  12. </div>
  13. </div>

نسخه ی نمایشی زنده

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

  1. <!-- دکمه راه اندازی modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > راه‌اندازی حالت نمایشی </a>
  3.  
  4. <!-- معین -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > سرصفحه معین </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> یک بدن خوب… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > بستن </button>
  15. <button class = "btn btn-primary" > ذخیره تغییرات </button>
  16. </div>
  17. </div>

استفاده

از طریق ویژگی های داده

یک مدال را بدون نوشتن جاوا اسکریپت فعال کنید. data-toggle="modal"روی یک عنصر کنترلر، مانند یک دکمه، به همراه یک data-target="#foo"یا href="#foo"برای هدف قرار دادن یک مدال خاص برای جابجایی تنظیم کنید.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > راه اندازی مودال </button>

از طریق جاوا اسکریپت

myModalبا یک خط جاوا اسکریپت یک مدال با شناسه فراخوانی کنید :

  1. $ ( '#myModal' ). معین ( گزینه ها )

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-backdrop="".

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

اگر یک URL راه دور ارائه شود، محتوا از طریق متد jQuery بارگیری می شود loadو به آن تزریق می شود .modal-body. اگر از api داده استفاده می کنید، می توانید از hrefتگ برای تعیین منبع راه دور استفاده کنید. نمونه ای از آن در زیر نشان داده شده است:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

مواد و روش ها

.modal(گزینه ها)

محتوای شما را به صورت مدال فعال می کند. یک گزینه اختیاری را می پذیرد object.

  1. $ ( '#myModal' ). معین ({
  2. صفحه کلید : نادرست
  3. })

.modal ('تغییر')

به صورت دستی یک مودال را تغییر می دهد.

  1. $ ( '#myModal' ). معین ( "تغییر" )

.modal('show')

به صورت دستی یک مودال را باز می کند.

  1. $ ( '#myModal' ). معین ( "نمایش" )

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

به صورت دستی یک مودال را پنهان می کند.

  1. $ ( '#myModal' ). معین ( "پنهان کردن" )

مناسبت ها

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

رویداد شرح
نشان می دهد این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده این رویداد زمانی اجرا می‌شود که مدال برای کاربر قابل مشاهده باشد (منتظر می‌شود تا انتقال‌های css تکمیل شود).
پنهان شدن این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
پنهان شده است این رویداد زمانی فعال می‌شود که مدال از کاربر مخفی شود (منتظر کامل شدن انتقال‌های css می‌ماند).
  1. $ ( '#myModal' ). on ( 'مخفی' , تابع () {
  2. // کاری بکنید…
  3. })

مثال در نوار ناوبری

افزونه ScrollSpy برای به روز رسانی خودکار اهداف ناو بر اساس موقعیت اسکرول است. ناحیه زیر نوار ناوبری را اسکرول کنید و تغییر کلاس فعال را تماشا کنید. موارد فرعی کشویی نیز برجسته خواهند شد.

@چربی

ساق های تبلیغاتی کیتار، برانچ id art party dolor labore. Pitchfork yr enim lo-fi قبل از اینکه qui را به فروش برسانند. حقوق دوچرخه Tumblr مزرعه به میز هر چه باشد. ژاکت کش باف پشمی انیم کفیه کارلوس. غرفه عکس Velit seitan mcsweeney 3 wolf moon irure. ژاکت کازبی شلوارک جین لومو، ویلیامزبورگ هودی مینیم کی که احتمالاً نام آنها را نشنیده اید و صندوق ژاکت کش باف پشمی culpa biodiesel زیبایی وس اندرسون. نیهیل خالکوبی accusamus، cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

اسکیت بورد سبیل ونیام مارفا، ریش چنگال چنگال مخملی. فریگان ریش aliqua cupidatat mcsweeney's vero. Cupidatat چهار لوکو نیسی، ea helvetica nulla carles. کامیون مواد غذایی ژاکت کازبی خالکوبی شده، وینیل quis non freegan Mcsweeney's. Lo-fi وس اندرسون +1 sartorial. کارلز ورزش غیر زیبایی شناختی quis gentrify. بروکلین adipisicing craft beer vice keytar deserunt.

یکی

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. حقوق دوچرخه لومو adipisicing banh mi، velit ea sunt سطح بعدی لوکاور قهوه تک اصل در magna veniam. وینیل با شناسه عمر بالا، پارک اکو نتیجه کوئیس آلیکیپ بان می چنگال. Vero VHS آدیپیسینگ است. کیف پیام رسان DIY Minim Consectetur nisi. Cred ex in، iphone delectus consectetur fanny pack.

دو

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

وبلاگ Keytar twee، culpa messenger bag marfa هر کامیون غذای دلکتوس. Sapiente synth id assumenda. کنایه‌ای کلیشه‌ای Locavore sed helvetica، رعد و برق‌هایی که احتمالاً در مورد آن‌ها نشنیده‌اید، نتیجه هودی بدون گلوتن lo-fi fap aliquip هستند. Labore elit placeat قبل از اینکه به فروش برسند، تری ریچاردسون proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. ژاکت کش باف پشمی کاردیگان بیر سیتن آماده ویت. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


استفاده

از طریق ویژگی های داده

برای اینکه به راحتی رفتار اسکرول‌اسپی را به ناوبری نوار بالای خود اضافه کنید، کافیست data-spy="scroll"عنصری را که می‌خواهید از آن جاسوسی کنید (به طور معمول این بدنه است) اضافه کنید و data-target=".navbar"انتخاب کنید از کدام ناوبری استفاده کنید. شما می خواهید از scrollspy با یک .navجزء استفاده کنید.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

از طریق جاوا اسکریپت

فراخوانی scrollspy از طریق جاوا اسکریپت:

  1. $ ( '#navbar' ). طومار ()
سر بالا! پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. به عنوان مثال، <a href="#home">home</a>باید با چیزی در dom مطابقت داشته باشد مانند <div id="home"></div>.

مواد و روش ها

.scrollspy ('Refresh')

هنگام استفاده از scrollspy همراه با افزودن یا حذف عناصر از DOM، باید متد Refresh را به این صورت فراخوانی کنید:

  1. $ ( '[data-spy="scroll"]' ). هر ( تابع () {
  2. var $spy = $ ( این ). scrollspy ( "بازخوانی" )
  3. })؛

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-offset="".

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

مناسبت ها

رویداد شرح
فعال کردن این رویداد هر زمان که یک مورد جدید توسط scrollspy فعال شود فعال می شود.

برگه های نمونه

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

جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید. 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.


استفاده

برگه های Tabable را از طریق جاوا اسکریپت فعال کنید (هر برگه باید به صورت جداگانه فعال شود):

  1. $ ( '#myTab a' ). کلیک کنید ( تابع ( e ) {
  2. ه . preventDefault ();
  3. $ ( این ). تب ( 'نمایش'
  4. })

شما می توانید برگه های فردی را به چند روش فعال کنید:

  1. $ ( '#myTab a[href="#profile"]' ). تب ( 'نمایش' // برگه را با نام انتخاب کنید
  2. $ ( '#myTab a:first' ). تب ( 'نمایش' // برگه اول را انتخاب کنید
  3. $ ( '#myTab a:last' ). تب ( 'نمایش' // آخرین برگه را انتخاب کنید
  4. $ ( '#myTab li:eq(2) a' ). تب ( 'نمایش' // برگه سوم را انتخاب کنید (صفر شده)

نشانه گذاری

شما می توانید پیمایش یک برگه یا قرص را بدون نوشتن جاوا اسکریپت به سادگی با تعیین data-toggle="tab"یا data-toggle="pill"روی یک عنصر فعال کنید. با افزودن کلاس‌های navو به برگه ، استایل برگه Bootstrap اعمال می‌شود.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > صفحه اصلی </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > نمایه </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > پیام‌ها </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > تنظیمات </a></li>
  6. </ul>

مواد و روش ها

تب $().

یک عنصر برگه و محفظه محتوا را فعال می کند. Tab باید دارای یک data-targetیا یک hrefگره کانتینری در DOM باشد.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  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 = "tab-content" >
  9. <div class = "tab-pane فعال" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <اسکریپت>
  16. $ ( تابع () {
  17. $ ( '#myTab a:last' ). تب ( 'نمایش'
  18. })
  19. </script>

مناسبت ها

رویداد شرح
نشان می دهد این رویداد در نمایش برگه فعال می شود، اما قبل از اینکه برگه جدید نشان داده شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
نشان داده شده این رویداد پس از نمایش یک برگه در نمایش برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. ه . هدف // تب فعال شده
  3. ه . relatedTarget // تب قبلی
  4. })

مثال ها

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

به دلایل عملکرد، راهنمای ابزار و پاپاور داده‌ها انتخاب شده‌اند، به این معنی که باید خودتان آنها را مقداردهی اولیه کنید .

برای دیدن نکات ابزار، نشانگر را روی پیوندهای زیر نگه دارید:

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

چهار جهت

نکات ابزار در گروه های ورودی

هنگام استفاده از راهنمای ابزار و پاپاور با گروه های ورودی Bootstrap، باید گزینه container(مستند شده در زیر) را برای جلوگیری از عوارض جانبی ناخواسته تنظیم کنید.


استفاده

راهنمای ابزار را از طریق جاوا اسکریپت فعال کنید:

  1. $ ( '#example' ). راهنمای ابزار ( گزینه ها )

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation="".

نام نوع پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
html بولی نادرست html را در راهنمای ابزار وارد کنید. اگر غلط باشد، از textروش jquery برای درج محتوا در dom استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.
تعیین سطح رشته | عملکرد 'بالا' نحوه قرار دادن راهنمای ابزار - بالا | پایین | چپ | درست
انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند.
عنوان رشته | عملکرد '' اگر تگ «title» وجود نداشته باشد، مقدار عنوان پیش‌فرض
ماشه رشته "تمرکز شناور" نحوه راه اندازی راهنمای ابزار - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. توجه داشته باشید که ماشه چندگانه عبور، فاصله از هم، انواع ماشه.
تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن راهنمای ابزار (ms) - برای نوع ماشه دستی اعمال نمی شود

اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود

ساختار شیء عبارت است از:delay: { show: 500, hide: 100 }

ظرف رشته | نادرست نادرست

راهنمای ابزار را به یک عنصر خاص اضافه می کندcontainer: 'body'

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

نشانه گذاری

  1. <a href = "#" data-toggle = "tooltip" title = "اولین نکته ابزار" > نشانگر را روی من نگه دارید </a>

مواد و روش ها

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

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

.tooltip('show')

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

  1. $ ( '#element' ). راهنمای ابزار ( "نمایش" )

.tooltip ('پنهان کردن')

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

  1. $ ( '#element' ). راهنمای ابزار ( "پنهان کردن" )

.tooltip('toggle')

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

  1. $ ( '#element' ). راهنمای ابزار ( "تغییر" )

.tooltip ("تخریب")

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

  1. $ ( '#element' ). راهنمای ابزار ( "تخریب" )

مثال ها

برای نگهداری اطلاعات ثانویه، پوشش‌های کوچکی از محتوا، مانند موارد موجود در iPad را به هر عنصر اضافه کنید. ماوس را روی دکمه نگه دارید تا پاپاور فعال شود. نیاز به راهنمای ابزار دارد.

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

چهار گزینه موجود است: تراز بالا، راست، پایین و چپ.

تاپ پاپاور

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپاور راست

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپاور پایین

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپوور چپ شد

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

هیچ نشانه‌گذاری نشان داده نمی‌شود که پاپاورها از جاوا اسکریپت و محتوای درون یک dataویژگی ایجاد می‌شوند.

نسخه ی نمایشی زنده

چهار جهت


استفاده

فعال کردن پاپاورها از طریق جاوا اسکریپت:

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

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation="".

نام نوع پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
html بولی نادرست html را در پاپاور قرار دهید. اگر غلط باشد، از textروش jquery برای درج محتوا در dom استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.
تعیین سطح رشته | عملکرد 'درست' نحوه قرار دادن پاپاور - بالا | پایین | چپ | درست
انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند
ماشه رشته 'کلیک' چگونه پاپاور راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای
عنوان رشته | عملکرد '' اگر ویژگی «title» وجود نداشته باشد، مقدار عنوان پیش‌فرض
محتوا رشته | عملکرد '' مقدار محتوای پیش‌فرض اگر ویژگی «داده محتوای» وجود نداشته باشد
تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن پاپاور (ms) - برای نوع ماشه دستی اعمال نمی شود

اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود

ساختار شیء عبارت است از:delay: { show: 500, hide: 100 }

ظرف رشته | نادرست نادرست

popover را به یک عنصر خاص اضافه می کندcontainer: 'body'

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

نشانه گذاری

به دلایل عملکرد، Tooltip و Popover data-apis انتخاب شده‌اند. اگر می‌خواهید از آنها استفاده کنید، فقط یک گزینه انتخابگر را مشخص کنید.

مواد و روش ها

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

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

.popover('show')

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

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

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

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

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

.popover ('تغییر')

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

  1. $ ( '#element' ). پاپاور ( "تغییر" )

.popover ("ویران کردن")

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

  1. $ ( '#element' ). پاپاور ( "تخریب" )

هشدارهای نمونه

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

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

آه ضربه محکم و ناگهانی! شما یک خطا دریافت کردید!

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

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


استفاده

رد کردن هشدار از طریق جاوا اسکریپت را فعال کنید:

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

نشانه گذاری

فقط data-dismiss="alert"به دکمه بستن خود اضافه کنید تا به طور خودکار عملکرد بسته هشدار ارائه شود.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

مواد و روش ها

$().alert()

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

.alert ('close')

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

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

مناسبت ها

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

رویداد شرح
بستن این رویداد بلافاصله پس از closeفراخوانی متد نمونه فعال می شود.
بسته این رویداد زمانی فعال می شود که هشدار بسته شده باشد (منتظر می شود تا انتقال های css تکمیل شود).
  1. $ ( '#my-alert' ). bind ( 'closed' , function () {
  2. // کاری بکنید…
  3. })

استفاده های مثال

با دکمه ها کارهای بیشتری انجام دهید. کنترل حالت های دکمه یا ایجاد گروه هایی از دکمه ها برای اجزای بیشتر مانند نوار ابزار.

دولتی

data-loading-text="Loading..."برای استفاده از حالت بارگذاری روی دکمه، اضافه کنید.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > حالت بارگیری </button>

ضامن تکی

برای فعال کردن data-toggle="button"تغییر روی یک دکمه، اضافه کنید.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > تعویض تکی </button>

چک باکس

data-toggle="buttons-checkbox"برای تغییر حالت چک باکس در گروه btn اضافه کنید.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > چپ </button>
  3. <button type = "button" class = "btn btn-primary" > وسط </button>
  4. <button type = "button" class = "btn btn-primary" > سمت راست </button>
  5. </div>

رادیو

data-toggle="buttons-radio"برای تغییر سبک رادیویی در گروه btn اضافه کنید.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > چپ </button>
  3. <button type = "button" class = "btn btn-primary" > وسط </button>
  4. <button type = "button" class = "btn btn-primary" > سمت راست </button>
  5. </div>

استفاده

فعال کردن دکمه ها از طریق جاوا اسکریپت:

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

نشانه گذاری

ویژگی های داده جدایی ناپذیر از افزونه دکمه هستند. کد نمونه زیر را برای انواع مختلف نشانه گذاری بررسی کنید.

گزینه ها

هیچ یک

مواد و روش ها

$().button('toggle')

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

سر بالا! data-toggleبا استفاده از ویژگی می توانید تغییر خودکار یک دکمه را فعال کنید .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
سر بالا! فایرفاکس در طول بارگذاری صفحه به حالت غیرفعال باقی می ماند . یک راه حل برای این استفاده از autocomplete="off".

$().button('reset')

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

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

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

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

در باره

سبک های پایه و پشتیبانی انعطاف پذیر برای اجزای جمع شونده مانند آکاردئون و ناوبری را دریافت کنید.

* باید افزونه Transitions گنجانده شود.

نمونه آکاردئون

با استفاده از افزونه collapse، یک ویجت ساده به سبک آکاردئونی ساختیم:

انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.
انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.
انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "گروه آکاردئون" >
  3. <div class = "Accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. مورد گروه تاشو شماره 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "جمع شدن بدن آکاردئون در" >
  9. <div class = "آکاردئون-داخلی" >
  10. کلیشه انیمه پاریاتور...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "گروه آکاردئون" >
  15. <div class = "Accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. مورد گروه تاشو شماره 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "کاهش بدن آکاردئون" >
  21. <div class = "آکاردئون-داخلی" >
  22. کلیشه انیمه پاریاتور...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

همچنین می توانید از این افزونه بدون علامت گذاری آکاردئون استفاده کنید. یک دکمه بسازید که بسط و جمع شدن یک عنصر دیگر را تغییر دهد.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. تاشو ساده
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

استفاده

از طریق ویژگی های داده

data-toggle="collapse"فقط کافیست یک عنصر و یک عنصر را اضافه کنید data-targetتا به طور خودکار کنترل یک عنصر جمع شونده را اختصاص دهید. این data-targetویژگی یک انتخابگر css را برای اعمال collapse می پذیرد. حتماً کلاس collapseرا به عنصر جمع شونده اضافه کنید. اگر می‌خواهید به‌طور پیش‌فرض باز شود، کلاس اضافی را اضافه کنید in.

برای افزودن مدیریت گروه آکاردئونی مانند به یک کنترل جمع شونده، ویژگی داده را اضافه کنید data-parent="#selector". برای مشاهده عملکرد به نسخه ی نمایشی مراجعه کنید.

از طریق جاوا اسکریپت

فعال کردن دستی با:

  1. $ ( ".collapse" ). سقوط ()

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-parent="".

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

مواد و روش ها

.collapse(گزینه ها)

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

  1. $ ( '#myCollapsible' ). فرو ریختن ({
  2. جابجایی : نادرست
  3. })

.collapse ('تغییر')

یک عنصر جمع شونده را به نمایش یا پنهان تغییر می دهد.

.collapse('show')

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

.collapse ('پنهان کردن')

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

مناسبت ها

کلاس فروپاشی بوت استرپ، چند رویداد را برای اتصال به عملکرد جمع شدن در معرض نمایش می گذارد.

رویداد شرح
نشان می دهد این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده این رویداد زمانی فعال می‌شود که یک عنصر جمع‌کردن برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال‌های css می‌ماند).
پنهان شدن این رویداد بلافاصله پس از hideفراخوانی متد اجرا می شود.
پنهان شده است این رویداد زمانی فعال می شود که یک عنصر collapse از کاربر پنهان شده باشد (منتظر تکمیل انتقال css می شود).
  1. $ ( '#myCollapsible' ). on ( 'مخفی' , تابع () {
  2. // کاری بکنید…
  3. })

مثال

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

  1. <input type = "text" data- provide = "typeahead" >

باید تنظیم کنید autocomplete="off"تا از ظاهر شدن منوهای پیش‌فرض مرورگر در منوی کشویی Bootstrap جلوگیری کنید.


استفاده

از طریق ویژگی های داده

همانطور که در مثال بالا نشان داده شده است، ویژگی های داده را برای ثبت یک عنصر با قابلیت تایپ سر اضافه کنید.

از طریق جاوا اسکریپت

تایپ را به صورت دستی با استفاده از:

  1. $ ( '.typeahead' ). سر تایپ ()

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-source="".

نام نوع پیش فرض شرح
منبع آرایه، تابع [ ] منبع داده برای پرس و جو در برابر. ممکن است آرایه ای از رشته ها یا یک تابع باشد. این تابع دو آرگومان ارسال می‌کند، queryمقدار در فیلد ورودی و processبازخوانی. این تابع ممکن است به طور همزمان با بازگرداندن منبع داده به طور مستقیم یا ناهمزمان از طریق processآرگومان واحد پاسخ به تماس استفاده شود.
موارد عدد 8 حداکثر تعداد موارد برای نمایش در منوی کشویی.
طول دقیقه عدد 1 حداقل طول نویسه مورد نیاز قبل از راه اندازی پیشنهادهای تکمیل خودکار
همسان عملکرد مورد غیر حساس روش مورد استفاده برای تعیین اینکه آیا یک پرس و جو با یک آیتم مطابقت دارد یا خیر. یک آرگومان واحد را می‌پذیرد که در itemمقابل آن کوئری را آزمایش کند. با پرس و جو فعلی دسترسی پیدا کنید this.query. trueاگر پرس و جو مطابقت دارد، یک Boolean برگردانید .
مرتب کننده عملکرد تطابق دقیق،
حساس به حروف کوچک، بزرگ و
کوچک
روش مورد استفاده برای مرتب سازی نتایج تکمیل خودکار. یک آرگومان واحد را می پذیرد itemsو محدوده نمونه تایپ را دارد. ارجاع به درخواست فعلی با this.query.
به روز کننده عملکرد مورد انتخاب شده را برمی گرداند روشی که برای برگرداندن آیتم انتخاب شده استفاده می شود. یک آرگومان واحد را می‌پذیرد، itemو دارای دامنه نمونه تایپ‌هد است.
هایلایتر عملکرد تمام موارد منطبق بر پیش فرض را برجسته می کند روش مورد استفاده برای برجسته کردن نتایج تکمیل خودکار. یک آرگومان واحد را می پذیرد itemو محدوده نمونه تایپ را دارد. باید html را برگرداند.

مواد و روش ها

.typeahead(گزینه ها)

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

مثال

پیمایش فرعی سمت چپ یک نسخه نمایشی زنده از افزونه affix است.


استفاده

از طریق ویژگی های داده

برای اینکه به راحتی رفتار الصاق را به هر عنصری اضافه کنید، کافیست data-spy="affix"عنصری را که می‌خواهید جاسوسی کنید، اضافه کنید. سپس از offset ها برای تعیین زمان روشن و خاموش کردن سنجاق عنصر استفاده کنید.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
سر بالا! شما باید موقعیت یک عنصر پین شده و رفتار والد فوری آن را مدیریت کنید. موقعیت توسط affix،، affix-topو کنترل می شود affix-bottom. به یاد داشته باشید که وقتی این الصاق در حال حذف محتوا از جریان عادی صفحه است، یک والد احتمالاً جمع شده را بررسی کنید.

از طریق جاوا اسکریپت

فراخوانی افزونه affix از طریق جاوا اسکریپت:

  1. $ ( '#navbar' ). الصاق ()

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-offset-top="200".

نام نوع پیش فرض شرح
انحراف شماره | تابع | هدف - شی 10 هنگام محاسبه موقعیت پیمایش، پیکسل‌هایی که از صفحه نمایش جدا می‌شوند. اگر یک عدد ارائه شود، افست در هر دو جهت بالا و چپ اعمال می شود. برای گوش دادن به یک جهت واحد، یا چندین افست منحصر به فرد، فقط یک شی ارائه offset: { x: 10 }کنید. زمانی که نیاز به ارائه پویا یک افست دارید، از یک تابع استفاده کنید (مفید برای برخی از طرح‌های واکنش‌گرا).