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

Преземи

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

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

Опции

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

Означување

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

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

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

Методи

.modal(опции)

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

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

.modal('toggle')

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

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

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

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

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

.modal ('скриј')

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

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

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

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

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

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

Настани

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

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

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

Демо

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

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

Преземи

Користење на boostrap-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 (автоматско ажурирање на навигација) на горната лента за подигање.

Преземи

Користење на boostrap-scrollspy.js

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

Означување

За лесно додавање на однесувањето на скролспитување во вашата навигација, само додајте го 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 ( 'освежи' )

Демо

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

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

Преземи

Користење на boostrap-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> 
</ul>
 
<скрипта>
  $ ( функција () {  
    $ ( '.tabs' ). јазичиња ()
  })
</script>

Демо

• Дома
• Профил
• Пораки
• Поставки

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

Преземи

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

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

Опции

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

Методи

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

Прикачува твипси управувач на колекција на елементи.

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

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

$ ( „#елемент“ ). twipsy ( „прикажи“ )

.twipsy ('скриј')

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

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

.twipsy (точно)

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

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

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

Демо

Приклучокот popover обезбедува едноставен интерфејс за додавање поповер на вашата апликација. Го проширува додатокот boostrap-twipsy.js , затоа погрижете се да ја зграпчите и таа датотека кога вклучувате поповери во вашиот проект!

Преземи

Користење на boostrap-popover.js

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

Опции

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

Методи

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

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

.popover ('шоу')

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

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

.popover ('скриј')

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

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

Демо

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

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

Преземи

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

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

Означување

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

Методи

$().alert()

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

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

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

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

Демо