Нашиот приклучок Modal е супер тенок приклучок за традиционалниот приклучок за модален js, особено внимавајќи да ја вклучи само голата функционалност што ни е потребна овде на Твитер.

Преземи

Користење на bootstrap-modal

$ ( „#мој-модал“ ). модален ( опции )

Опции

Име	тип	стандардно	опис
позадина	бул, стринг	лажни	Вклучува елемент на модална заднина. Поставете ја заднината на "static"ако не сакате модалот да се затвори кога ќе се кликне заднината.
тастатура	булови	лажни	Го затвора модалот кога ќе се притисне копчето за бегство
покажуваат	булови	лажни	Отвора модален при иницијализација на класата

Означување

Можете лесно да активирате модали на вашата страница без да треба да напишете ниту една линија Javascript. Само дајте му на елементот data-controls-modalатрибут што одговара на ID на модален елемент и кога ќе се кликне, тој ќе го стартува вашиот модал. За да додадете модални опции, само вклучете ги и како атрибути на податоци.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Стартувај модал </a>    

Забелешка Ако сакате вашиот модал да анимира внатре и надвор, само додајте .fadeкласа во вашиот .modalелемент (погледнете во демото за да го видите ова во акција).

Методи

.modal(опции)

Ја активира вашата содржина како модална. Прифаќа изборни опции object.

$ ( „#мој-модал“ ). модален ({
  тастатура : точно 
})

.modal('toggle')

Рачно менува модал.

$ ( „#мој-модал“ ). модален ( „префрли“ )

.modal('покажи')

Рачно отвора модал.

$ ( „#мој-модал“ ). модален ( „прикажи“ )

.modal ('скриј')

Рачно крие модал.

$ ( „#мој-модал“ ). модален ( „скриј“ )

.модален (точно)

Враќа примерок на модална класа на елементи.

$ ( „#мој-модал“ ). модален ( вистинит )

Забелешка Алтернативно, ова може да се врати со $().data('modal').

Настани

Модалната класа на Bootstrap изложува неколку настани за приклучување во модалната функционалност.

Настан	Опис
покажуваат	Овој настан се вклучува веднаш кога showќе се повика методот на пример.
прикажани	Овој настан се активира кога модалот е видлив за корисникот (ќе чека да се завршат транзициите на css).
крие	Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени	Овој настан се активира кога модалот ќе заврши со криење од корисникот (ќе чека да се завршат транзициите на css).

$ ( „#мој-модал“ ). bind ( 'скриено' , функција () {   
  // направи нешто ...
})

Демо

Стартувајте Modal

Овој приклучок е за додавање паѓачка интеракција на горната лента за подигање или навигации со јазичиња.

Преземи

Користење на bootstrap-dropdown.js

$ ( „#горна лента“ ). паѓачко ()

Означување

За брзо додавање на паѓачката функционалност на кој било навигатор елемент, користете го data-dropdownатрибутот. Секое важечко паѓачко мени за подигање автоматски ќе се активира.

<ul class = „јазичиња“ > 
  <li class = "active" ><a href = "#" > Дома </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > паѓање </a>  
    <ul class = „паѓачко мени“ > 
      <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 ()

Означување

За лесно додавање на однесувањето на скролспитување во вашата навигација, само додајте го data-scrollspyатрибутот во .topbar.

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

Методи

$().scrollSpy()

Автоматски ги активира копчињата за навигација по позицијата на лизгање на корисниците.

$ ( 'тело > .topbar' ). scrollSpy ()

Забележете , ознаките за прицврстување на Топбарот мора да имаат цели за идентификација што може да се решат. На пример, <a href="#home">home</a>мора да одговара на нешто во домот како <div id="home"></div>.

.scrollSpy('освежи')

Scrollspy ги меморира копчињата за навигација и координатите на делот за изведба. Ако треба да го ажурирате овој кеш (најверојатно ако имате динамична содржина) само повикајте го овој метод на освежување. Ако сте го користеле атрибутот податоци за да го дефинирате вашиот scrollspy, само повикајте refresh на телото.

$ ( „тело“ ). scrollSpy ( 'освежи' )

Демо

Проверете ја навигацијата на горната лента на оваа страница.

Овој приклучок нуди дополнителна функционалност за управување со состојбата на копчињата.

Преземи

Користење на bootstrap-buttons.js

$ ( '.tabs' ). копче ()

Методи

$().button('toggle')

Ја вклучува состојбата на туркање. Дава изглед на btn дека е активиран.

Забелешка Можете да овозможите автоматско префрлање на копче со користење на data-toggleатрибутот.

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

$().button('се вчитува')

Ја поставува состојбата на копчето на вчитување - го оневозможува копчето и го заменува текстот со текстот што се вчитува. Вчитувањето на текстот треба да се дефинира на елементот на копчето користејќи го атрибутот податоци data-loading-text.

<button class = "btn" data-loading-text = "вчитувам работи..." > ... </button>   

$().button('ресетирање')

Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст.

$().копче(низа)

Ресетира состојбата на копчето - го заменува текстот во која било состојба на текст дефинирана со податоци.

<button class = "btn" data-complete-text = "заврши!" > ... </button>   
<скрипта>
  $('.btn').button('комплетно')
</scrip>

Демо

Се вчитува демо Вклучи Демо

Овој приклучок додава брза, динамична функционалност на јазичиња и таблети.

Преземи

Користење на bootstrap-tabs.js

$ ( '.tabs' ). јазичиња ()

Означување

Можете да активирате навигација со јазичиња или таблети без да пишувате Javascript со едноставно давање data-tabsили data-pillsатрибут.

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

Методи

$().tabs или $().апчиња

Ја активира функционалноста на јазичињата и таблетите за даден контејнер. Врските на јазичињата треба да упатуваат на идентификација во документот.

<ul class = „јазичиња“ > 
  <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 = "пилула-содржина" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "профил" > ... </div> 
  <div id = "пораки" > ... </div> 
  <div id = "поставки" > ... </div> 
</div>
 
<скрипта>
  $ ( функција () {  
    $ ( '.tabs' ). јазичиња ()
  })
</script>

Настани

Настан	Опис
промена	Овој настан се вклучува при промена на картичката. Користете event.targetи event.relatedTargetза да го насочите активното јазиче и претходното активно јазиче соодветно.

$ ( '#.tabs' ). врзува ( 'промена' , функција ( д ) {   
  д . цел // активиран таб
  д . relatedTarget // претходен таб
})

Демо

• Дома
• Профил
• Пораки
• Поставки
• Спуштање
  • @масти
  • @mdo

Врз основа на одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; twipsy е ажурирана верзија, која не се потпира на слики, користи css3 за анимации и атрибути на податоци за складирање наслови!

Преземи

Користење на bootstrap-twipsy.js

$ ( „#пример“ ). twipsy ( опции )

Опции

Име	тип	стандардно	опис
анимира	булови	вистина	примени транзиција на css fade на советот за алатки
доцнењеВо	број	0	одложување пред да се прикаже совет за алатка (ms)
одложување	број	0	одложување пред да се скрие советот за алатка (ms)
резервна копија	низа	''	текст за употреба кога не е присутен наслов на советот за алатка
поставување	низа	'горе'	како да го поставите советот за алатка - горе | подолу | лево | право
html	булови	лажни	дозволува html содржина во советот за алатки
во живо	булови	лажни	користете делегирање на настани наместо индивидуални управувачи на настани
офсет	број	0	поместување на пиксели на совет за алатка од целниот елемент
Наслов	низа, функција	'Наслов'	атрибут или метод за преземање на насловниот текст
чкрапало	низа	„лебдиш“	како се активира советот за алатки - лебди | фокус | прирачник
шаблон	низа	[стандардно обележување]	Шаблонот html што се користи за рендерирање на twipsy.

Забелешка Индивидуалните опции за примери на twipsy алтернативно може да се наведат преку употреба на атрибути на податоци.

<a href = "#" data-placement = "подолу" 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	одложување пред да се прикаже совет за алатка (ms)
одложување	број	0	одложување пред да се скрие советот за алатка (ms)
резервна копија	низа	''	текст за употреба кога не е присутен наслов на советот за алатка
поставување	низа	'право'	како да го поставите советот за алатка - горе | подолу | лево | право
html	булови	лажни	дозволува html содржина во советот за алатки
во живо	булови	лажни	користете делегирање на настани наместо индивидуални управувачи на настани
офсет	број	0	поместување на пиксели на совет за алатка од целниот елемент
Наслов	низа, функција	'Наслов'	атрибут или метод за преземање на насловниот текст
содржина	низа, функција	„содржина на податоци“	низа или метод за преземање текст на содржина. ако не е обезбеден, содржината ќе биде изведена од атрибут за содржина на податоци.
чкрапало	низа	„лебдиш“	како се активира советот за алатки - лебди | фокус | прирачник
шаблон	низа	[стандардно обележување]	Шаблонот html што се користи за рендерирање на поповер.

Забелешка Индивидуалните опции за примерок на поповер алтернативно може да се специфицираат преку употреба на атрибути на податоци.

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

Методи

$().popover(опции)

Иницијализира поповери за колекција на елементи.

.popover ('шоу')

Открива елементи поповер.

$ ( „#елемент“ ). поповер ( „шоу“ )

.popover ('скриј')

Сокрива поповер на елементи.

$ ( „#елемент“ ). поповер ( „скриј“ )

Демо

лебди за поповер

Приклучокот за предупредување е супер мала класа за додавање блиска функционалност на предупредувањата.

Преземи

Користење на bootstrap-alerts.js

$ ( ".alert-message" ). алармирање ()

Означување

Само додадете data-alertатрибут на вашите пораки за предупредување за автоматски да им дадете блиска функционалност.

Опции

Име	тип	стандардно	опис
селектор	низа	'.затвори'	Кој селектор да се насочи за затворање предупредување.

Методи

$().alert()

Ги обвива сите предупредувања со затворена функционалност. За да може вашите предупредувања да се анимираат кога се затворени, проверете дали ја имаат веќе применето класата и на нив .fade..in

.alert ('затвори')

Затвора предупредување.

$ ( ".alert-message" ). предупредување ( „затвори“ )

Демо