Meie Modal-plugin on üliõhuke traditsioonilise modaalse js-i pistikprogrammi jaoks, pöörates erilist tähelepanu sellele, et see hõlmaks ainult neid palja funktsioone, mida siin Twitteris vajame.

Lae alla

Bootstrap-modal kasutamine

$ ( '#minu-modal' ). modaalne ( valikud )

Valikud

Nimi	tüüp	vaikimisi	kirjeldus
taustaks	tõeväärtus	vale	Sisaldab modaalset taustaelementi
klaviatuur	tõeväärtus	vale	Sulgeb modaali, kui vajutada paoklahvi
näidata	tõeväärtus	vale	Avab klassi initsialiseerimisel modaali

Märgistus

Saate modaale oma lehel hõlpsalt aktiveerida, ilma et peaksite kirjutama ühtegi JavaScripti rida. Lihtsalt andke elemendile data-controls-modalatribuut, mis vastab modaalsele elemendi ID-le ja klõpsamisel käivitatakse teie modaal. Modaalsete valikute lisamiseks lisage need ka andmeatribuutidena.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Käivita Modal </a>    

Märkus . Kui soovite, et teie modaal animeeriks sisse ja välja, lisage lihtsalt .fadeoma .modalelemendile klass (selle toimimise nägemiseks vaadake demo).

meetodid

.modal(valikud)

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

$ ( '#minu-modal' ). modaalne ({
  closeOnEscape : tõsi 
})

.modal('toggle')

Lülitab modaali käsitsi ümber.

$ ( '#minu-modal' ). modaalne ( 'lülitus' )

.modal('show')

Avab modaali käsitsi.

$ ( '#minu-modal' ). modaalne ( 'show' )

.modal('hide')

Peidab modaali käsitsi.

$ ( '#minu-modal' ). modaalne ( 'peida' )

.modal(true)

Tagastab elementide modaalklassi eksemplari.

$ ( '#minu-modal' ). modaalne ( tõene )

Märkus . Teise võimalusena saab selle alla laadida $().data('modal').

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.

Sündmus	Kirjeldus
näidata	See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud	See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab css-i üleminekut).
peita	See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud	See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni css-i üleminekud lõppevad).

$ ( '#minu-modal' ). bind ( 'peidetud' , funktsioon () {   
  // tee midagi ...
})

Demo

Käivitage Modal

See pistikprogramm on mõeldud ripploendi interaktsiooni lisamiseks alglaadimisribale või vahekaartidega navigeerimisvõimalustele.

Lae alla

Boostrap-dropdown.js kasutamine

$ ( '#topbar' ). rippmenüü ()

Märgistus

Mis tahes navigeerimiselemendile rippmenüü funktsioonide kiireks lisamiseks kasutage data-dropdownatribuuti. Kõik kehtivad alglaadimismenüüd aktiveeritakse automaatselt.

<ul class = "tabs" > 
  <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
  <li class = "dropdown" data-dropdown = "rippmenüü" >   
    <a href = "#" class = "dropdown-toggle" > Rippmenüü </a>  
    <ul class = "rippmenüü" > 
      <li><a href = "#" > Teisene link </a></li> 
      <li><a href = "#" > Midagi muud siin </a></li> 
      <li klass = "jagaja" ></li> 
      <li><a href = "#" > Veel üks link </a></li> 
    </ul>
  </li>
</ul>

Märkus . Kui teie kasutajaliideses on mitu rippmenüüd, kaaluge data-dropdownatribuudi lisamist mõnele olulisemale konteinerielemendile, näiteks .tabsvõi .topbar.

meetodid

$().dropdown()

Programmiline api antud ülariba või vahekaartidega navigeerimise menüüde aktiveerimiseks.

Demo

See pistikprogramm on mõeldud scrollspy (automaatse värskendamise navi) interaktsiooni lisamiseks alglaadimisribale.

Lae alla

Boostrap-scrollspy.js kasutamine

$ ( '#topbar' ). rippmenüü ()

Märgistus

Scrollspy käitumise hõlpsaks lisamiseks navigeerimisseadmele lisage lihtsalt data-scrollspyatribuut .topbar.

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

meetodid

$().scrollspy()

Automaatne aktiveerib navigeerimisnupud kasutajate kerimisasendi järgi.

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

Märkus . Topbari ankrumärgenditel peavad olema lahendatavad ID-sihtmärgid. Näiteks <a href="#home">home</a>peab vastama millelegi domeenis nagu <div id="home"></div>.

.scrollspy('refresh')

Scrollspy vahemällu navigeerimisnupud ja sektsioonide koordinaadid jõudluse tagamiseks. Kui teil on vaja seda vahemälu värskendada (tõenäoliselt, kui teil on dünaamiline sisu), helistage lihtsalt sellele värskendusmeetodile. Kui kasutasite scrollspy määratlemiseks andmeatribuuti, helistage lihtsalt kehale refresh.

$ ( 'keha' ). scrollspy ( 'värskenda' )

Demo

Vaadake selle lehe ülemise riba navigeerimist.

See pistikprogramm lisab kiire, dünaamilise vahekaardi ja pillifunktsiooni.

Lae alla

Boostrap-tabs.js kasutamine

$ ( '.tabs' ). vahelehed ()

Märgistus

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, andes neile lihtsalt atribuudi data-tabsvõi data-pillsatribuudi.

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

meetodid

$().tabs või $().pills

Aktiveerib vahekaardi ja pilli funktsiooni antud konteineri jaoks. Vahelehtede lingid peaksid viitama dokumendis olevatele ID-dele.

<ul class = "tabs" > 
  <li class = "aktiivne" ><a href = "#home" > Avaleht </a></li>  
  <li><a href = "#profile" > Profiil </a></li> 
  <li><a href = "#messages" > Sõnumid </a></li> 
  <li><a href = "#settings" > Seaded </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "kodu" > ... </div>  
  <div id = "profiil" > ... </div> 
  <div id = "sõnumid" > ... </div> 
  <div id = "seaded" > ... </div> 
</ul>
 
<script>
  $ ( funktsioon () {  
    $ ( '.tabs' ). vahelehed ()
  })
</script>

Demo

• Kodu
• Profiil
• Sõnumid
• Seaded

Põhineb suurepärasel jQuery.tipsy pistikprogrammil, mille on kirjutanud Jason Frame; twipsy on uuendatud versioon, mis ei tugine piltidele, kasutab animatsioonide jaoks css3 ja pealkirjade salvestamiseks andmeatribuute!

Lae alla

Bootstrap-twipsy.js kasutamine

$ ( '#example' ). twipsy ( valikud )

Valikud

Nimi	tüüp	vaikimisi	kirjeldus
animeerima	tõeväärtus	tõsi	rakendage tööriistaspikrile css-i tuhmumise üleminek
viivitus	number	0	viivitus enne kohtspikri näitamist (ms)
delayOut	number	0	viivitus enne kohtspikri peitmist (ms)
tagavara	string	''	tekst, mida kasutada, kui kohtspikri pealkirja pole
paigutus	string	'üleval'	kuidas asetada kohtspikker - ülal | allpool | vasakule | õige
html	tõeväärtus	vale	lubab HTML-sisu kohtspikris
elada	tõeväärtus	vale	kasutage sündmuste delegeerimist üksikute sündmuste töötlejate asemel
nihe	number	0	kohtspikri nihe sihtelemendist pikslitega
pealkiri	string | funktsiooni	"tiitel"	atribuut või meetod pealkirja teksti toomiseks
päästik	string	'hõljuma'	kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal

meetodid

$().twipsy(valikud)

Kinnitab elemendikogu külge twipsy-käitleja.

.twipsy('show')

Näitab elementide twipsy.

$ ( '#element' ). twipsy ( 'show' )

.twipsy('hide')

Peidab elemente twipsy.

$ ( '#element' ). twipsy ( 'peida' )

.twipsy(true)

Tagastab elementide twipsy klassi eksemplari.

$ ( '#element' ). twipsy ( tõsi )

Märkus . Teise võimalusena saab selle alla laadida $().data('twipsy').

Demo

Popover-plugin pakub lihtsat liidest hüpikaknate lisamiseks teie rakendusele. See laiendab boostrap-twipsy.js pistikprogrammi, seega haarake kindlasti ka see fail, kui kaasate oma projekti hüpikaknaid!

Lae alla

Boostrap-popover.js kasutamine

$ ( '#example' ). popover ( valikud )

Valikud

Nimi	tüüp	vaikimisi	kirjeldus
animeerima	tõeväärtus	tõsi	rakendage tööriistaspikrile css-i tuhmumise üleminek
viivitus	number	0	viivitus enne kohtspikri näitamist (ms)
delayOut	number	0	viivitus enne kohtspikri peitmist (ms)
tagavara	string	''	tekst, mida kasutada, kui kohtspikri pealkirja pole
paigutus	string	'õige'	kuidas asetada kohtspikker - ülal | allpool | vasakule | õige
html	tõeväärtus	vale	lubab HTML-sisu kohtspikris
elada	tõeväärtus	vale	kasutage sündmuste delegeerimist üksikute sündmuste töötlejate asemel
nihe	number	0	kohtspikri nihe sihtelemendist pikslitega
pealkiri	string | funktsiooni	"tiitel"	atribuut või meetod pealkirja teksti toomiseks
sisu	string | funktsiooni	'andmesisu'	atribuut või meetod sisuteksti toomiseks
päästik	string	'hõljuma'	kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal

meetodid

$().popover(valikud)

Initsialiseerib hüpikaknad elemendikogu jaoks.

.popover('show')

Ilmutab elementide hüpikakna.

$ ( '#element' ). popover ( 'show' )

.popover('hide')

Peidab elementide hüpikakna.

$ ( '#element' ). popover ( 'peida' )

Demo

hõljutage kursorit hüpikakna jaoks

Hoiatuste pistikprogramm on väga väike klass hoiatustele tiheda funktsionaalsuse lisamiseks.

Lae alla

Bootstrap-alerts.js kasutamine

$ ( ".alert-message" ). hoiatus ()

Märgistus

Lihtsalt lisage data-alertoma hoiatussõnumitele atribuut, et anda neile automaatselt sulgemisfunktsioonid.

meetodid

$().alert()

Pakub kõik hoiatused tiheda funktsionaalsusega. Kui soovite, et teie hoiatused suletuks muutuksid, veenduge, et neile oleks juba rakendatud klass .fadeja ..in

.alert('close')

Sulgeb hoiatuse.

$ ( ".alert-message" ). hoiatus ( 'sulge' )

Demo