Наш мадальны плагін - гэта вельмі тонкі варыянт традыцыйнага мадальнага плагіна 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 ( 'схаваны' , функцыя () {
- // зрабіць нешта ...
- })
Гэты плагін прызначаны для дадання ўзаемадзеяння з выпадальным меню ў верхнюю панэль загрузкі або навігацыю з укладкамі.
Спампаваць
- $ ( '#верхняя панэль' ). выпадальны спіс ()
Каб хутка дадаць функцыю выпадальнага меню да любога элемента навігацыі, выкарыстоўвайце 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
.
Праграмны API для актывацыі меню для дадзенай верхняй панэлі або навігацыі з укладкамі.
Гэты плагін прызначаны для дадання ўзаемадзеяння ScrollSpy (аўтаматычнае абнаўленне навігацыі) у верхнюю панэль загрузкі.
Спампаваць
- $ ( '#верхняя панэль' ). выпадальны спіс ()
Каб лёгка дадаць паводзіны 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>
Неапрацаваны дэнім, вы напэўна не чулі пра іх джынсавыя шорты Осцін. Nesciunt tofu stumptown aliqua, рэтра-сінтэзатар майстар ачысткі. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Швэдар Cosby 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, напісаным Джэйсанам Фрэймам; twipsy - гэта абноўленая версія, якая не абапіраецца на выявы, выкарыстоўвае css3 для анімацыі і атрыбуты дадзеных для захоўвання загалоўкаў!
Спампаваць
- $ ( '#прыклад' ). твіпсі ( варыянты )
Імя | тыпу | па змаўчанні | апісанне |
---|---|---|---|
ажыўляць | лагічны | праўда | прымяніць пераход CSS Fade да падказкі |
затрымка | лік | 0 | затрымка перад паказам падказкі (мс) |
delayOut | лік | 0 | затрымка перад схаваннем падказкі (мс) |
запасны варыянт | радок | '' | тэкст для выкарыстання, калі няма загалоўка падказкі |
размяшчэнне | радок | "вышэй" | як размясціць падказку - вышэй | ніжэй | злева | справа |
html | лагічны | ілжывы | дазваляе HTML-кантэнт у падказцы |
жыць | лагічны | ілжывы | выкарыстоўваць дэлегаванне падзей замест асобных апрацоўшчыкаў падзей |
зрушэнне | лік | 0 | піксельны зрух падказкі ад мэтавага элемента |
назва | радок | функцыя | "назва" | атрыбут або метад для атрымання тэксту загалоўка |
трыгер | радок | "парыць" | як спрацоўвае падказка - навядзіце | фокус | кіраўніцтва |
Далучае апрацоўшчык Twipsy да калекцыі элементаў.
Выяўляе элементы твіпсі.
- $ ( '#элемент' ). твіпсі ( 'паказаць' )
Хавае элементы twipsy.
- $ ( '#элемент' ). twipsy ( 'схаваць' )
Вяртае асобнік класа twipsy элементаў.
- $ ( '#элемент' ). твіпсі ( праўда )
Заўвага Акрамя таго, гэта можна атрымаць з дапамогай $().data('twipsy')
.
Вузкія штаны новага ўзроўню кефія , вы напэўна не чулі пра іх. Photobooth beard raw denim highprint веганская сумка-мессенджер stumptown. Сейтан ад фермы да стала, 8-бітнае амерыканскае адзенне McSweeney's Sustainable quinoa мае вінілавае шамбрэ Тэры Рычардсана . Барада стамптаун, кардіганы banh mi lomo thundercats. Біядызельнае паліва тофу, уільямсбургская марфа, веганскі шамбре з чатырох лока Максвіні. Сапраўды іранічны рамеснік, незалежна ад таго, кейтар , сцэніст, ад фермы да стала, Бэнксі, Осцін, твітэр , фрыган, крэда, джынсавая сырая кава, вірус аднаго паходжання.
Убудова Popover забяспечвае просты інтэрфейс для дадання ўсплывальных праграм у ваша прыкладанне. Ён пашырае плагін boostrap-twipsy.js , таму не забудзьцеся захапіць і гэты файл, калі ўключаеце ўсплывальныя вобразы ў свой праект!
Спампаваць
- $ ( '#прыклад' ). повер ( варыянты )
Імя | тыпу | па змаўчанні | апісанне |
---|---|---|---|
ажыўляць | лагічны | праўда | прымяніць пераход CSS Fade да падказкі |
затрымка | лік | 0 | затрымка перад паказам падказкі (мс) |
delayOut | лік | 0 | затрымка перад схаваннем падказкі (мс) |
запасны варыянт | радок | '' | тэкст для выкарыстання, калі няма загалоўка падказкі |
размяшчэнне | радок | "права" | як размясціць падказку - вышэй | ніжэй | злева | справа |
html | лагічны | ілжывы | дазваляе HTML-кантэнт у падказцы |
жыць | лагічны | ілжывы | выкарыстоўваць дэлегаванне падзей замест асобных апрацоўшчыкаў падзей |
зрушэнне | лік | 0 | піксельны зрух падказкі ад мэтавага элемента |
назва | радок | функцыя | "назва" | атрыбут або метад для атрымання тэксту загалоўка |
змест | радок | функцыя | «дадзеныя-кантэнт» | атрыбут або метад для атрымання тэксту кантэнту |
трыгер | радок | "парыць" | як спрацоўвае падказка - навядзіце | фокус | кіраўніцтва |
Ініцыялізуе ўсплывальныя вокны для калекцыі элементаў.
Адкрывае ўсплывальнае акно элементаў.
- $ ( '#элемент' ). popover ( 'паказаць' )
Хавае ўсплывальнае акно элементаў.
- $ ( '#элемент' ). popover ( 'схаваць' )
Убудова абвестак - гэта вельмі маленькі клас для дадання блізкіх функцый да абвестак.
Спампаваць
- $ ( ".alert-message" ). абвестка ()
Проста дадайце data-alert
атрыбут да паведамленняў абвестак, каб аўтаматычна надаць ім функцыю блізкасці.
Абгортвае ўсе абвесткі з блізкай функцыянальнасцю. Каб вашы абвесткі аніміраваліся пры закрыцці, пераканайцеся, што да іх ужо прыменены клас .fade
і ..in
Закрывае абвестку.
- $ ( ".alert-message" ). абвестка ( 'блізка' )