پلاگین Modal ما برداشتی فوق العاده باریک از افزونه modal js سنتی است و مراقبت ویژه ای را به کار می گیرد تا فقط عملکردهای ساده ای را که در اینجا در توییتر نیاز داریم را شامل شود.
دانلود
- $ ( '#my-modal' ). معین ( گزینه ها )
| نام | نوع | پیش فرض | شرح |
|---|---|---|---|
| پس زمینه | بولی | نادرست | شامل یک عنصر پس زمینه مدال است |
| صفحه کلید | بولی | نادرست | هنگامی که کلید فرار فشار داده می شود، مدال را می بندد |
| نشان می دهد | بولی | نادرست | modal را در مقداردهی اولیه کلاس باز می کند |
شما می توانید به راحتی و بدون نیاز به نوشتن یک خط جاوا اسکریپت، مدال ها را در صفحه خود فعال کنید. فقط به یک عنصر یک data-controls-modalویژگی بدهید که با شناسه عنصر مدال مطابقت دارد و وقتی روی آن کلیک کرد، مدال شما راه اندازی می شود. برای افزودن گزینه‌های مدال، کافی است آنها را به‌عنوان ویژگی‌های داده نیز درج کنید.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > راه اندازی Modal </a>
توجه داشته باشید اگر می‌خواهید مودال شما در داخل و خارج متحرک شود، فقط یک .fadeکلاس به .modalعنصر خود اضافه کنید (برای مشاهده عمل به نسخه نمایشی مراجعه کنید).
محتوای شما را به صورت مدال فعال می کند. یک گزینه اختیاری را می پذیرد object.
- $ ( '#my-modal' ). معین ({
- closeOnEscape : درست است
- })
به صورت دستی یک مودال را تغییر می دهد.
- $ ( '#my-modal' ). معین ( "تغییر" )
به صورت دستی یک مودال را باز می کند.
- $ ( '#my-modal' ). معین ( "نمایش" )
به صورت دستی یک مودال را پنهان می کند.
- $ ( '#my-modal' ). معین ( "پنهان کردن" )
یک نمونه کلاس مودال عناصر را برمی‌گرداند.
- $ ( '#my-modal' ). معین ( درست )
توجه داشته باشید که این مورد را می توان با بازیابی کرد $().data('modal').
کلاس مودال بوت استرپ چند رویداد را برای اتصال به عملکرد مودال نشان می دهد.
| رویداد | شرح |
|---|---|
| نشان می دهد | این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود. |
| نشان داده شده | این رویداد زمانی اجرا می‌شود که مدال برای کاربر قابل مشاهده باشد (منتظر می‌شود تا انتقال‌های css تکمیل شود). |
| پنهان شدن | این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود. |
| پنهان شده است | این رویداد زمانی فعال می‌شود که مدال از کاربر مخفی شود (منتظر کامل شدن انتقال‌های css می‌ماند). |
- $ ( '#my-modal' ). bind ( 'مخفی' , تابع () {
- // کاری بکنید ...
- })
این افزونه برای افزودن تعامل کشویی به نوار بالای بوت استرپ یا ناوبری های تب دار است.
دانلود
- $ ( '#topbar' ). کشویی ()
برای افزودن سریع عملکرد کشویی به هر عنصر nav، از data-dropdownویژگی استفاده کنید. هر فهرست کرکره ای معتبر بوت استرپ به طور خودکار فعال می شود.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#" > صفحه اصلی </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" > کشویی </a>
- <ul class = "Dropdown-menu" >
- <li><a href = "#" > پیوند ثانویه </a></li>
- <li><a href = "#" > چیز دیگری در اینجا </a></li>
- <li class = "تقسیم کننده" </li>
- <li><a href = "#" > پیوند دیگری </a></li>
- </ul>
- </li>
- </ul>
توجه داشته باشید اگر رابط کاربری شما چندین کرکره دارد، این data-dropdownویژگی را به یک عنصر کانتینر مهمتر مانند .tabsیا اضافه .topbarکنید.
یک رابط برنامه‌نویسی برای فعال کردن منوها برای یک نوار بالای صفحه یا ناوبری برگه‌دار.
این پلاگین برای افزودن تعامل scrollspy (به روز رسانی خودکار ناو) به نوار بالای بوت استرپ است.
دانلود
- $ ( '#topbar' ). کشویی ()
برای اینکه به راحتی رفتار اسکرول‌اسپی را به ناوبری خود اضافه کنید، فقط data-scrollspyویژگی را به .topbar.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
به طور خودکار دکمه های ناوبری را توسط موقعیت اسکرول کاربران فعال می کند.
- $ ( 'body > .topbar' ). scrollSpy ()
توجه داشته باشید تگ های لنگر Topbar باید دارای اهداف شناسایی قابل حل باشند. به عنوان مثال، <a href="#home">home</a>باید با چیزی در dom مطابقت داشته باشد مانند <div id="home"></div>.
Scrollspy دکمه های ناوبری و مختصات بخش را برای عملکرد ذخیره می کند. اگر نیاز به به روز رسانی این کش دارید (احتمالاً اگر محتوای پویا دارید) فقط با این روش رفرش تماس بگیرید. اگر از ویژگی داده برای تعریف اسکرول اسپای خود استفاده کرده اید، فقط refresh را روی بدنه فراخوانی کنید.
- $ ( "بدن" ). scrollspy ( "بازخوانی" )
پیمایش نوار بالای این صفحه را بررسی کنید.
این افزونه قابلیت سریع و پویا تب و قرص را اضافه می کند.
دانلود
- $ ( '.tabs' ). برگه ها ()
شما می توانید پیمایش یک تب یا قرص را بدون نوشتن جاوا اسکریپت با دادن یک data-tabsیا data-pillsویژگی به آنها فعال کنید.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
عملکرد تب و قرص را برای یک ظرف مشخص فعال می کند. پیوندهای برگه باید به شناسه های موجود در سند اشاره کنند.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#home" > صفحه اصلی </a></li>
- <li><a href = "#profile" > نمایه </a></li>
- <li><a href = "#messages" > پیام‌ها </a></li>
- <li><a href = "#settings" > تنظیمات </a></li>
- </ul>
- <div class = "pill-content" >
- <div class = "active" id = "home" > ... </div>
- <div id = "profile" > ... </div>
- <div id = "پیام ها" > ... </div>
- <div id = "settings" > ... </div>
- </ul>
- <اسکریپت>
- $ ( تابع () {
- $ ( '.tabs' ). برگه ها ()
- })
- </script>
جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید. 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.
بر اساس پلاگین عالی jQuery.tipsy نوشته شده توسط Jason Frame. twipsy یک نسخه به روز شده است که به تصاویر متکی نیست، از css3 برای انیمیشن ها و از ویژگی های داده برای ذخیره عنوان استفاده می کند!
دانلود
- $ ( '#example' ). twipsy ( گزینه ها )
| نام | نوع | پیش فرض | شرح |
|---|---|---|---|
| جان دادن | بولی | درست است، واقعی | یک انتقال محو شدن css به راهنمای ابزار اعمال کنید |
| تاخیر در | عدد | 0 | تأخیر قبل از نمایش راهنمای ابزار (میلی‌ثانیه) |
| تاخیر | عدد | 0 | تاخیر قبل از پنهان کردن نکته ابزار (ms) |
| بازگشتی | رشته | '' | متنی برای استفاده در مواقعی که عنوان راهنمای ابزار وجود ندارد |
| تعیین سطح | رشته | 'در بالا' | نحوه قرار دادن راهنمای ابزار - بالا | زیر | چپ | درست |
| html | بولی | نادرست | به محتوای html در راهنمای ابزار اجازه می دهد |
| زنده | بولی | نادرست | از نمایندگی رویداد به جای کنترل کننده رویداد فردی استفاده کنید |
| انحراف | عدد | 0 | انحراف پیکسلی راهنمای ابزار از عنصر هدف |
| عنوان | رشته | عملکرد | 'عنوان' | ویژگی یا روش برای بازیابی متن عنوان |
| ماشه | رشته | شناور | راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای |
یک کنترلر twipsy را به مجموعه عناصر متصل می کند.
یک عنصر twipsy را نشان می دهد.
- $ ( '# عنصر' ). توئیپسی ( "نمایش" )
یک عنصر twipsy را پنهان می کند.
- $ ( '# عنصر' ). توئیپسی ( "پنهان کردن" )
نمونه کلاس twipsy عناصر را برمی گرداند.
- $ ( '# عنصر' ). توئیپسی ( درست )
توجه داشته باشید که این مورد را می توان با بازیابی کرد $().data('twipsy').
شلوارهای چسبان سطح بعدی کفیه که احتمالا اسمش را نشنیده اید. غرفه عکس ریش خام جین لترپرس وگان کیسه پیام رسان stumptown. سیتان مزرعه تا میز، پوشاک آمریکایی 8 بیتی کینوا پایدار فیکس مک‌سوئینی دارای یک مجلسی وینیل تری ریچاردسون است. استامپ تاون ریش، ژاکت کش باف پشمی بانه می لومو تندرکت. توفو بیودیزل ویلیامزبورگ مارفا، چهار لوکو مک‌سوئینی پاکسازی وگان شامبری. یک صنعت‌گر واقعا کنایه‌آمیز، با هر کیتار، منظره‌ای از مزرعه تا میز بانکی آستین توییتر ، قهوه جین تک اصل فریگان کرد خام را مدیریت می‌کند.
افزونه popover یک رابط ساده برای افزودن پاپاور به برنامه شما ارائه می دهد. این افزونه boostrap-twipsy.js را گسترش می دهد ، بنابراین هنگام گنجاندن پاپاورها در پروژه خود، حتماً آن فایل را نیز بگیرید!
دانلود
- $ ( '#example' ). پاپاور ( گزینه ها )
| نام | نوع | پیش فرض | شرح |
|---|---|---|---|
| جان دادن | بولی | درست است، واقعی | یک انتقال محو شدن css به راهنمای ابزار اعمال کنید |
| تاخیر در | عدد | 0 | تأخیر قبل از نمایش راهنمای ابزار (میلی‌ثانیه) |
| تاخیر | عدد | 0 | تاخیر قبل از پنهان کردن نکته ابزار (ms) |
| بازگشتی | رشته | '' | متنی برای استفاده در مواقعی که عنوان راهنمای ابزار وجود ندارد |
| تعیین سطح | رشته | 'درست' | نحوه قرار دادن راهنمای ابزار - بالا | زیر | چپ | درست |
| html | بولی | نادرست | به محتوای html در راهنمای ابزار اجازه می دهد |
| زنده | بولی | نادرست | از نمایندگی رویداد به جای کنترل کننده رویداد فردی استفاده کنید |
| انحراف | عدد | 0 | انحراف پیکسلی راهنمای ابزار از عنصر هدف |
| عنوان | رشته | عملکرد | 'عنوان' | ویژگی یا روش برای بازیابی متن عنوان |
| محتوا | رشته | عملکرد | "محتوای داده" | ویژگی یا روش برای بازیابی متن محتوا |
| ماشه | رشته | شناور | راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای |
پاپاورها را برای یک مجموعه عناصر راه اندازی می کند.
پاپاور عناصر را نشان می دهد.
- $ ( '# عنصر' ). پاپاور ( "نمایش" )
پاپاور عناصر را پنهان می کند.
- $ ( '# عنصر' ). پاپاور ( "پنهان کردن" )
افزونه هشدار یک کلاس بسیار کوچک برای افزودن عملکرد نزدیک به هشدارها است.
دانلود
- $ ( ".alert-message" ). هشدار ()
فقط یک data-alertویژگی به پیام های هشدار خود اضافه کنید تا به طور خودکار عملکرد نزدیک به آنها ارائه شود.
همه هشدارها را با عملکرد نزدیک بسته بندی می کند. برای اینکه هشدارها در هنگام بسته شدن متحرک شوند، مطمئن شوید که کلاس .fadeو .inکلاس قبلاً برای آنها اعمال شده است.
یک هشدار را می بندد.
- $ ( ".alert-message" ). هشدار ( "بستن" )