Наш модальний плагін — це надтонка версія традиційного модального плагіна js, у якому особливо ретельно включаються лише ті функції, які нам потрібні тут у twitter.
Завантажити
- $ ( '#my-modal' ). модальний ( параметри )
Ім'я | типу | за замовчуванням | опис |
---|---|---|---|
фон | логічний | помилковий | Включає елемент модального фону |
клавіатура | логічний | помилковий | Закриває модаль, коли натиснуто клавішу виходу |
шоу | логічний | помилковий | Відкриває модаль під час ініціалізації класу |
Ви можете легко активувати моди на своїй сторінці без необхідності писати жодного рядка javascript. Просто дайте елементу 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' ). модальний ( 'сховати' )
Повертає екземпляр модального класу elements.
- $ ( '#my-modal' ). модальний ( правда )
Примітка Крім того, це можна отримати за допомогою $().data('modal')
.
Модальний клас Bootstrap надає кілька подій для підключення до модальної функціональності.
Подія | опис |
---|---|
шоу | Ця подія запускається негайно, коли show викликається метод екземпляра. |
показано | Ця подія запускається, коли модаль стає видимою для користувача (чекатиме завершення переходів css). |
приховати | Ця подія запускається негайно після hide виклику методу екземпляра. |
прихований | Ця подія запускається, коли модаль закінчується приховуванням від користувача (буде чекати завершення переходів css). |
- $ ( '#my-modal' ). bind ( 'прихований' , функція () {
- // робити щось ...
- })
Цей плагін призначений для додавання взаємодії зі спадним списком до верхньої панелі початкового завантаження або навігації з вкладками.
Завантажити
- $ ( '#topbar' ). спадний список ()
Щоб швидко додати функцію розкривного меню до будь-якого елемента навігації, використовуйте 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 = "divider" ></li>
- <li><a href = "#" > Ще одне посилання </a></li>
- </ul>
- </li>
- </ul>
Примітка . Якщо у вашому інтерфейсі є кілька спадних меню, подумайте про додавання data-dropdown
атрибута до більш важливого елемента контейнера, наприклад .tabs
або .topbar
.
Програмний API для активації меню для заданої верхньої панелі або навігації з вкладками.
Цей плагін призначений для додавання взаємодії Scrollspy (автоматичне оновлення навігації) до верхньої панелі початкового завантаження.
Завантажити
- $ ( '#topbar' ). спадний список ()
Щоб легко додати поведінку ScrollSpy до вашої навігації, просто додайте data-scrollspy
атрибут до .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Автоматично активує кнопки навігації за позицією прокручування користувача.
- $ ( 'body > .topbar' ). scrollSpy ()
Зауважте , що теги прив’язки верхньої панелі повинні мати цілі ідентифікатора, які можна розпізнати. Наприклад, <a href="#home">home</a>
повинен відповідати чомусь у домі, як <div id="home"></div>
.
Scrollspy кешує навігаційні кнопки та координати розділів для продуктивності. Якщо вам потрібно оновити цей кеш (імовірно, якщо у вас є динамічний вміст), просто викличте цей метод оновлення. Якщо ви використовували атрибут data для визначення свого scrollspy, просто викличте refresh у тілі.
- $ ( 'тіло' ). scrollspy ( 'оновити' )
Перегляньте навігаційну панель у верхній частині цієї сторінки.
Цей плагін додає швидку динамічну вкладку та функціональність таблеток.
Завантажити
- $ ( '.tabs' ). вкладки ()
Ви можете активувати навігацію вкладками або таблетками без написання JavaScript, просто вказавши їм атрибут 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 = "messages" > ... </div>
- <div id = "settings" > ... </div>
- </ul>
- <сценарій>
- $ ( функція () {
- $ ( '.tabs' ). вкладки ()
- })
- </script>
Необроблений денім, напевно, ви не чули про них джинсові шорти Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Вуса cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Светр Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat шавлія cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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, написаного Джейсоном Фреймом; twipsy — це оновлена версія, яка не покладається на зображення, використовує css3 для анімації та атрибути даних для зберігання заголовків!
Завантажити
- $ ( '#приклад' ). twipsy ( варіанти )
Ім'я | типу | за замовчуванням | опис |
---|---|---|---|
оживити | логічний | правда | застосувати перехід CSS Fade до підказки |
delayIn | номер | 0 | затримка перед показом підказки (мс) |
delayOut | номер | 0 | затримка перед приховуванням підказки (мс) |
відступати | рядок | '' | текст для використання, коли немає заголовка підказки |
розміщення | рядок | "вище" | як розмістити підказку - вище | нижче | ліворуч | правильно |
html | логічний | помилковий | дозволяє вміст html у підказці |
жити | логічний | помилковий | використовувати делегування подій замість окремих обробників подій |
зсув | номер | 0 | піксельне зміщення підказки від цільового елемента |
назва | рядок | функція | 'title' | атрибут або метод для отримання тексту заголовка |
тригер | рядок | "висати" | як запускається підказка - наведіть | фокус | посібник |
Приєднує обробник twipsy до колекції елементів.
Розкриває елементи твіпси.
- $ ( '#element' ). twipsy ( 'показати' )
Приховує елементи твіпси.
- $ ( '#element' ). twipsy ( 'сховати' )
Повертає екземпляр класу twipsy елементів.
- $ ( '#element' ). тупий ( правда )
Примітка Крім того, це можна отримати за допомогою $().data('twipsy')
.
Вузькі штани наступного рівня , ви, напевно , не чули про них. Стенд для фотографій, борода, веганська сумка для високого друку з необробленого деніму. Сейтан від ферми до столу, 8-бітний американський одяг McSweeney's fixie sustainable quinoa має вінілове шамбре Террі Річардсона. Борода stumptown, кардигани banh mi lomo thundercats. Тофу біодизель Вільямсбург Марфа, чотири локо mcsweeney's cleanse vegan chambray. Справді іронічний ремісник будь-який кейтар, сценер від ферми до столу, Бенксі Остін, твіттер , обробка фріган-кредиту, необробленого джинсового матеріалу, кави єдиного походження, вірусного.
Плагін popover надає простий інтерфейс для додавання спливаючих вікон до вашої програми. Він розширює плагін boostrap-twipsy.js , тож обов’язково візьміть цей файл, коли додасте спливаючих зображень у свій проект!
Завантажити
- $ ( '#приклад' ). popover ( параметри )
Ім'я | типу | за замовчуванням | опис |
---|---|---|---|
оживити | логічний | правда | застосувати перехід CSS Fade до підказки |
delayIn | номер | 0 | затримка перед показом підказки (мс) |
delayOut | номер | 0 | затримка перед приховуванням підказки (мс) |
відступати | рядок | '' | текст для використання, коли немає заголовка підказки |
розміщення | рядок | "право" | як розмістити підказку - вище | нижче | ліворуч | правильно |
html | логічний | помилковий | дозволяє вміст html у підказці |
жити | логічний | помилковий | використовувати делегування подій замість окремих обробників подій |
зсув | номер | 0 | піксельне зміщення підказки від цільового елемента |
назва | рядок | функція | 'title' | атрибут або метод для отримання тексту заголовка |
вміст | рядок | функція | 'data-content' | атрибут або метод для отримання тексту вмісту |
тригер | рядок | "висати" | як запускається підказка - наведіть | фокус | посібник |
Ініціалізує спливаючі вікна для колекції елементів.
Розкриває спливаюче вікно елементів.
- $ ( '#element' ). popover ( 'показати' )
Приховує спливаюче вікно елементів.
- $ ( '#element' ). popover ( 'сховати' )
Плагін сповіщень — це надзвичайно маленький клас для додавання функціональних можливостей до сповіщень.
Завантажити
- $ ( ".alert-message" ). сповіщення ()
Просто додайте data-alert
атрибут до своїх сповіщень, щоб автоматично надати їм близьку функціональність.
Обгортає всі сповіщення з наближеною функціональністю. Щоб ваші сповіщення анімувалися після закриття, переконайтеся, що до них уже застосовано клас .fade
і ..in
Закриває сповіщення.
- $ ( ".alert-message" ). сповіщення ( 'закрити' )