Наш мадальны плагін - гэта вельмі тонкі варыянт традыцыйнага мадальнага плагіна js, у якім асаблівая ўвага ўключана толькі ў асноўную функцыянальнасць, якая нам патрэбна тут, у twitter.

Спампаваць

Выкарыстанне bootstrap-modal

$ ( '#my-modal' ). мадальны ( варыянты )

Параметры

Імя	тыпу	па змаўчанні	апісанне
заднік	лагічны, радок	ілжывы	Уключае элемент мадальнага фону. Усталюйце фон, "static"калі вы не хочаце, каб мадальнае зачынялася пры націску на фон.
клавіятура	лагічны	ілжывы	Закрывае мадальнае, калі націснута клавіша выхаду
паказаць	лагічны	ілжывы	Адкрывае мадальнае пры ініцыялізацыі класа

Разметка

Вы можаце лёгка актываваць мадыфікацыі на сваёй старонцы без неабходнасці пісаць ніводны радок JavaScript. Проста дайце элементу data-controls-modalатрыбут, які адпавядае ідэнтыфікатару мадальнага элемента, і калі націснуць, ён запусціць ваш мадальны элемент. Каб дадаць мадальныя параметры, проста ўключыце іх у якасці атрыбутаў даных.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Запусціць Modal </a>    

Заўвага . Калі вы хочаце, каб ваш мадальны рэжым анімаваў і выходзіць, проста дадайце .fadeклас да вашага .modalэлемента (звярніцеся да дэманстрацыі, каб убачыць гэта ў дзеянні).

Метады

.modal (параметры)

Актывуе ваш кантэнт як мадальны. Прымае дадатковыя параметры object.

$ ( '#my-modal' ). мадальны ({
  клавіятура : праўда 
})

.modal('пераключыць')

Уручную пераключае мадальнае.

$ ( '#my-modal' ). мадальны ( 'пераключыць' )

.modal('паказаць')

Уручную адкрывае мадальнае.

$ ( '#my-modal' ). мадальны ( 'паказаць' )

.modal('схаваць')

Уручную хавае мадальнае.

$ ( '#my-modal' ). мадальны ( 'схаваць' )

.modal(праўда)

Вяртае асобнік мадальнага класа elements.

$ ( '#my-modal' ). мадальны ( ісціна )

Заўвага Акрамя таго, гэта можна атрымаць з дапамогай $().data('modal').

Падзеі

Мадальны клас Bootstrap паказвае некалькі падзей для падключэння да мадальнай функцыянальнасці.

Падзея	Апісанне
паказаць	Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказана	Гэта падзея запускаецца, калі мадальны элемент становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
схаваць	Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
схаваны	Гэта падзея запускаецца, калі мадаль скончыў быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).

$ ( '#my-modal' ). bind ( 'схаваны' , функцыя () {   
  // зрабіць нешта ...
})

Дэманстрацыя

Запусціце Modal

Гэты плагін прызначаны для дадання ўзаемадзеяння з выпадальным меню ў верхнюю панэль загрузкі або навігацыю з укладкамі.

Спампаваць

Выкарыстанне bootstrap-dropdown.js

$ ( '#верхняя панэль' ). выпадальны спіс ()

Разметка

Каб хутка дадаць функцыю выпадальнага меню да любога элемента навігацыі, выкарыстоўвайце 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.

Метады

$().dropdown()

Праграмны API для актывацыі меню для дадзенай верхняй панэлі або навігацыі з укладкамі.

Дэманстрацыя

Гэты плагін прызначаны для дадання ўзаемадзеяння ScrollSpy (аўтаматычнае абнаўленне навігацыі) у верхнюю панэль загрузкі.

Спампаваць

Выкарыстанне bootstrap-scrollspy.js

$ ( '#верхняя панэль' ). scrollSpy ()

Разметка

Каб лёгка дадаць паводзіны ScrollSpy да вашай навігацыі, проста дадайце data-scrollspyатрыбут у .topbar.

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

Метады

$().scrollSpy()

Аўтаматычная актывацыя кнопак навігацыі па пазіцыі пракруткі карыстальніка.

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

Заўважце , тэгі прывязкі верхняй панэлі павінны мець дазвольныя ідэнтыфікатары. Напрыклад, <a href="#home">home</a>павінен адпавядаць чаму-то ў доме, як <div id="home"></div>.

.scrollSpy('абнавіць')

Scrollspy кэшуе навігацыйныя кнопкі і каардынаты раздзелаў для прадукцыйнасці. Калі вам трэба абнавіць гэты кэш (верагодна, калі ў вас ёсць дынамічны кантэнт), проста выклічце гэты метад абнаўлення. Калі вы выкарыстоўвалі атрыбут data для вызначэння вашага ScrollSpy, проста выклічце refresh у целе.

$ ( 'цела' ). scrollSpy ( 'абнавіць' )

Дэманстрацыя

Праверце верхнюю панэль навігацыі на гэтай старонцы.

Гэты плагін прапануе дадатковыя функцыі для кіравання станам кнопак.

Спампаваць

Выкарыстанне bootstrap-buttons.js

$ ( '.tabs' ). кнопка ()

Метады

$().button('пераключыць')

Пераключае стан націскання. Выдае btn выгляд, што ён быў актываваны.

Заўвага Вы можаце ўключыць аўтаматычнае пераключэнне кнопкі з дапамогай data-toggleатрыбуту.

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

$().button('загрузка')

Устанаўлівае стан кнопкі для загрузкі - адключае кнопку і мяняе тэкст на тэкст для загрузкі. Тэкст загрузкі павінен быць вызначаны на элеменце кнопкі з дапамогай атрыбуту data data-loading-text.

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

$().button('скід')

Скідае стан кнопкі - мяняе тэкст на зыходны тэкст.

$().кнопка(радок)

Скідае стан кнопкі - мяняе тэкст на любы тэкст, вызначаны дадзенымі.

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<скрыпт>
  $('.btn').button('завершана')
</script>

Дэманстрацыя

Загрузка дэманстрацыі Пераключыць дэма

Гэты плагін дадае хуткія, дынамічныя функцыі ўкладак і таблетак.

Спампаваць

Выкарыстанне bootstrap-tabs.js

$ ( '.tabs' ). укладкі ()

Разметка

Вы можаце актываваць навігацыю па ўкладках або таблетках без напісання JavaScript, проста даўшы ім атрыбут data-tabsабо .data-pills

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

Метады

$().tabs або $().pills

Актывуе функцыі ўкладкі і таблеткі для дадзенага кантэйнера. Спасылкі на ўкладкі павінны спасылацца на ідэнтыфікатары ў дакуменце.

<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> 
</div>
 
<скрыпт>
  $ ( функцыя () {  
    $ ( '.tabs' ). укладкі ()
  })
</script>

Падзеі

Падзея	Апісанне
змяніць	Гэта падзея спрацоўвае пры змене ўкладкі. Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку адпаведна.

$ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  е . мэта // актываваная таб
  е . relatedTarget // папярэдняя ўкладка
})

Дэманстрацыя

• дадому
• Профіль
• Паведамленні
• Налады
• Падаць
  • @тоўсты
  • @mdo

Заснаваны на выдатным плагіне jQuery.tipsy, напісаным Джэйсанам Фрэймам; twipsy - гэта абноўленая версія, якая не абапіраецца на выявы, выкарыстоўвае css3 для анімацыі і атрыбуты дадзеных для захоўвання загалоўкаў!

Спампаваць

Выкарыстанне bootstrap-twipsy.js

$ ( '#прыклад' ). твіпсі ( варыянты )

Параметры

Імя	тыпу	па змаўчанні	апісанне
ажыўляць	лагічны	праўда	прымяніць пераход CSS Fade да падказкі
затрымка	лік	0	затрымка перад паказам падказкі (мс)
delayOut	лік	0	затрымка перад схаваннем падказкі (мс)
запасны варыянт	радок	''	тэкст для выкарыстання, калі няма загалоўка падказкі
размяшчэнне	радок	"вышэй"	як размясціць падказку - вышэй | ніжэй | злева | справа
html	лагічны	ілжывы	дазваляе HTML-кантэнт у падказцы
жыць	лагічны	ілжывы	выкарыстоўваць дэлегаванне падзей замест асобных апрацоўшчыкаў падзей
зрушэнне	лік	0	піксельны зрух падказкі ад мэтавага элемента
назва	радок, функцыя	"назва"	атрыбут або метад для атрымання тэксту загалоўка
трыгер	радок	"парыць"	як спрацоўвае падказка - навядзіце | фокус | кіраўніцтва
шаблон	радок	[разметка па змаўчанні]	Шаблон html, які выкарыстоўваецца для візуалізацыі twipsy.

Заўвага . Асобныя параметры асобніка twipsy можна ў якасці альтэрнатывы задаць праз выкарыстанне атрыбутаў дадзеных.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Некаторы тэкст загалоўка' > тэкст </a>    

Метады

$().twipsy(параметры)

Далучае апрацоўшчык Twipsy да калекцыі элементаў.

.twipsy('паказаць')

Выяўляе элементы твіпсі.

$ ( '#элемент' ). твіпсі ( 'паказаць' )

.twipsy('схаваць')

Хавае элементы twipsy.

$ ( '#элемент' ). twipsy ( 'схаваць' )

.twipsy(праўда)

Вяртае асобнік класа twipsy элементаў.

$ ( '#элемент' ). твіпсі ( праўда )

Заўвага Акрамя таго, гэта можна атрымаць з дапамогай $().data('twipsy').

Дэманстрацыя

Убудова Popover забяспечвае просты інтэрфейс для дадання ўсплывальных праграм у ваша прыкладанне. Ён пашырае плагін bootstrap-twipsy.js , таму не забудзьцеся захапіць і гэты файл, калі ўключаеце ўсплывальныя вобразы ў свой праект!

Заўвага Вы павінны ўключыць файл bootstrap-twipsy.js перад bootstrap-popover.js.

Спампаваць

Выкарыстанне bootstrap-popover.js

$ ( '#прыклад' ). повер ( варыянты )

Параметры

Імя	тыпу	па змаўчанні	апісанне
ажыўляць	лагічны	праўда	прымяніць пераход CSS Fade да падказкі
затрымка	лік	0	затрымка перад паказам падказкі (мс)
delayOut	лік	0	затрымка перад схаваннем падказкі (мс)
запасны варыянт	радок	''	тэкст для выкарыстання, калі няма загалоўка падказкі
размяшчэнне	радок	"права"	як размясціць падказку - вышэй | ніжэй | злева | справа
html	лагічны	ілжывы	дазваляе HTML-кантэнт у падказцы
жыць	лагічны	ілжывы	выкарыстоўваць дэлегаванне падзей замест асобных апрацоўшчыкаў падзей
зрушэнне	лік	0	піксельны зрух падказкі ад мэтавага элемента
назва	радок, функцыя	"назва"	атрыбут або метад для атрымання тэксту загалоўка
змест	радок, функцыя	«дадзеныя-кантэнт»	радок або метад для атрымання тэксту змесціва. калі яны не прадастаўлены, змесціва будзе атрымана з атрыбуту data-content.
трыгер	радок	"парыць"	як спрацоўвае падказка - навядзіце | фокус | кіраўніцтва
шаблон	радок	[разметка па змаўчанні]	Шаблон HTML, які выкарыстоўваецца для візуалізацыі ўсплываючага акна.

Заўвага . Індывідуальныя варыянты ўсплывальных асобнікаў можна ў якасці альтэрнатывы задаць з дапамогай атрыбутаў даных.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > тэкст </a>    

Метады

$().popover(параметры)

Ініцыялізуе ўсплывальныя вокны для калекцыі элементаў.

.popover('паказаць')

Адкрывае ўсплывальнае акно элементаў.

$ ( '#элемент' ). popover ( 'паказаць' )

.popover('схаваць')

Хавае ўсплывальнае акно элементаў.

$ ( '#элемент' ). popover ( 'схаваць' )

Дэманстрацыя

навесці для ўсплывання

Убудова абвестак - гэта вельмі маленькі клас для дадання блізкіх функцый да абвестак.

Спампаваць

Выкарыстанне bootstrap-alerts.js

$ ( ".alert-message" ). абвестка ()

Разметка

Проста дадайце data-alertатрыбут да паведамленняў абвестак, каб аўтаматычна надаць ім функцыю блізкасці.

Параметры

Імя	тыпу	па змаўчанні	апісанне
селектар	радок	'.close'	Які селектар нацэліць для закрыцця абвесткі.

Метады

$().апавяшчэнне()

Абгортвае ўсе абвесткі з блізкай функцыянальнасцю. Каб вашы абвесткі аніміраваліся пры закрыцці, пераканайцеся, што да іх ужо прыменены клас .fadeі ..in

.alert('зачыніць')

Закрывае абвестку.

$ ( ".alert-message" ). абвестка ( 'блізка' )

Дэманстрацыя