Modaalide kohta

Sujuv, kuid paindlik, kasutab traditsioonilist javascripti modaalset pistikprogrammi, millel on vaid minimaalsed vajalikud funktsioonid ja nutikad vaikeseaded.

Staatiline näide

Allpool on staatiliselt renderdatud modaal.

Live demo

Lülitage modaal JavaScripti kaudu sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

Bootstrap-modal kasutamine

Helista modaalile javascripti kaudu:

$ ( '#myModal' ). modaalne ( valikud )

Valikud

Märgistus

Saate modaale oma lehel hõlpsalt aktiveerida, ilma et peaksite kirjutama ühtegi JavaScripti rida. Lihtsalt määrake data-toggle="modal"kontrolleri element, millel on data-target="#foo"või href="#foo"mis vastab modaalse elemendi ID-le, ja klõpsamisel käivitatakse teie modaal.

Samuti lisage oma modaalsele eksemplarile valikute lisamiseks need täiendavate andmeatribuutidena kas juhtelemendile või modaalsele märgistusele endale.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Käivita Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "sulge" data-dismiss = "modaalne" > × </button>   
    <h3> Modaalne päis </h3>
  </div>
  <div class = "modal-body" > 
    <p> Üks hea keha… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Sule </a>   
    <a href = "#" class = "btn btn-primary" > Salvesta muudatused </a>  
  </div>
</div>

meetodid

.modal(valikud)

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

$ ( '#myModal' ). modaalne ({
  klaviatuur : vale 
})

.modal('toggle')

Lülitab modaali käsitsi ümber.

$ ( '#myModal' ). modaalne ( 'lülitus' )

.modal('show')

Avab modaali käsitsi.

$ ( '#myModal' ). modaalne ( 'show' )

.modal('hide')

Peidab modaali käsitsi.

$ ( '#myModal' ). modaalne ( 'peida' )

Sündmused

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

$ ( '#myModal' ). on ( 'peidetud' , funktsioon () {   
  // tee midagi…
})

Rippmenüüde kohta

Selle lihtsa pistikprogrammi abil saate lisada rippmenüüd peaaegu kõigele Bootstrapis. Bootstrapil on täielik rippmenüü tugi navigeerimisribal, vahelehtedel ja pillidel.

Näited

Rippmenüüde testimiseks klõpsake navigeerimisribal rippmenüü navigeerimislinke ja allolevaid pille.

• Tavaline link
• Rippmenüü
  • Action
  • Another action
  • Something else here
  • Separated link
• Rippmenüü 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Rippmenüü 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js kasutamine

Helistage rippmenüüdesse javascripti kaudu:

$ ( '.dropdown-toggle' ). rippmenüü ()

Märgistus

Mis tahes elemendile rippmenüü funktsioonide kiireks lisamiseks lihtsalt lisage data-toggle="dropdown"ja mis tahes kehtiv alglaadimisrippmenüü aktiveeritakse automaatselt.

<ul class = "nav nav-pills" > 
  <li class = "aktiivne" ><a href = "#" > Tavaline link </a></li>  
  <li class = "rippmenüü" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "rippmenüü" href = "#menu1" >   
      Rippmenüü
      <b klass = "caret" ></b> 
    </a>
    <ul class = "rippmenüü" > 
      <li><a href = "#" > Toiming </a></li> 
      <li><a href = "#" > Veel üks toiming </a></li> 
      <li><a href = "#" > Midagi muud siin </a></li> 
      <li klass = "jagaja" ></li> 
      <li><a href = "#" > Eraldatud link </a></li> 
    </ul>
  </li>
  ...
</ul>

URL-ide muutmiseks kasutage data-targetatribuuti href="#".

<ul class = "nav nav-pills" > 
  <li class = "rippmenüü" > 
    <a class = "dropdown-toggle" data-toggle = "rippmenüü" data-target = "#" href = "path/to/page.html" >    
      Rippmenüü
      <b klass = "caret" ></b> 
    </a>
    <ul class = "rippmenüü" > 
      ...
    </ul>
  </li>
</ul>

meetodid

$().dropdown()

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

ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel.

Scrollspy navigeerimisriba näide

Kerige allolevat ala ja vaadake navigeerimise värskendust. Samuti tõstetakse esile rippmenüü alamüksused. Proovi seda!

Bootstrap-scrollspy.js kasutamine

Helista scrollspyle JavaScripti kaudu:

$ ( '#navbar' ). scrollspy ()

Märgistus

Scrollspy käitumise hõlpsaks lisamiseks oma ülariba navigeerimisele lisage lihtsalt data-spy="scroll"element, mida soovite luurata (tavaliselt on see keha).

<body data-spy = "kerige" > ... </body>  

meetodid

.scrollspy('refresh')

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

$ ( '[data-spy="scroll"]' ). iga ( funktsioon () {  
  var $spy = $ ( see ). scrollspy ( 'värskenda' )
});

Valikud

Sündmused

See pistikprogramm lisab kohaliku sisu kaudu liikumiseks kiire, dünaamilise vahekaardi ja pillifunktsiooni.

Näidisvahekaardid

Klõpsake allolevatel vahekaartidel, et liikuda peidetud paanide vahel, isegi rippmenüüde kaudu.

• Kodu
• Profiil
• Rippmenüü
  • @fat
  • @mdo

Bootstrap-tab.js kasutamine

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

$ ( '#myTab a' ). kliki ( funktsioon ( e ) {  
  e . preventDefault ();
  $ ( see ). sakk ( 'näita' );
})

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

$ ( '#myTab a[href="#profile"]' ). sakk ( 'näita' ); // Valige vahekaart nime järgi 
$ ( '#myTab a:first' ). sakk ( 'näita' ); // Valige esimene vahekaart 
$ ( '#myTab a:last' ). sakk ( 'näita' ); // Viimase vahekaardi valimine 
$ ( '#myTab li:eq(2) a' ). sakk ( 'näita' ); // Valige kolmas vahekaart (0-indekseeritud) 

Märgistus

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"või peal. Klasside ja data-toggle="pill"lisamisel vahekaardile rakendatakse alglaadimisriba vahekaardi stiil.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Avaleht </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Sõnumid </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Seaded </a></li>  
</ul>

meetodid

$().tab

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema DOM-is kas konteineri sõlm data-targetvõi sihtimispunkt.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <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 = "tab-content" > 
  <div class = "tab-pane active" id = "kodu" > ... </div>  
  <div class = "tab-pane" id = "profiil" > ... </div>  
  <div class = "tab-pane" id = "sõnumid" > ... </div>  
  <div class = "tab-pane" id = "seaded" > ... </div>  
</div>
 
<script>
  $ ( funktsioon () {  
    $ ( '#myTab a:last' ). sakk ( 'näita' );
  })
</script>

Sündmused

$ ( 'a[data-toggle="tab"]' ). on ( 'näidatud' , funktsioon ( e ) {   
  e . sihtmärk // aktiveeritud vahekaart
  e . relatedTarget // eelmine vahekaart
})

Teave tööriistaspikrite kohta

Inspireeritud suurepärasest jQuery.tipsy pistikprogrammist, mille on kirjutanud Jason Frame; Tööriistanäpunäited on värskendatud versioon, mis ei tugine piltidele, kasutavad animatsioonide jaoks css3 ja kohaliku pealkirja salvestamiseks andmeatribuute.

Tööriistavihjete kasutamise näide

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Bootstrap-tooltip.js kasutamine

Käivitage kohtspikker javascripti kaudu:

$ ( '#example' ). tööriistavihje ( valikud )

Valikud

Märgistus

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud. Kui soovite neid kasutada, määrake lihtsalt valija.

<a href = "#" rel = "tooltip" title = "esimene tööriistavihje" > hõljutage kursorit minu kohal </a>   

meetodid

$().tööriista vihje(valikud)

Kinnitab elemendikogule tööriistaspikri töötleja.

.tooltip('show')

Näitab elemendi kohtspikri.

$ ( '#element' ). tööriistavihje ( 'näita' )

.tooltip('hide')

Peidab elemendi kohtspikri.

$ ( '#element' ). tööriistavihje ( 'peida' )

.tooltip('toggle')

Lülitab elemendi kohtspikri.

$ ( '#element' ). tööriistavihje ( 'lülitamine' )

Popoverite kohta

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis.

* Nõuab tööriistavihje lisamist

Hõljutuse hüpikakna näide

Hüpikakna käivitamiseks hõljutage kursorit nupu kohal.

Bootstrap-popover.js kasutamine

Luba hüpikaknad javascripti kaudu:

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

Valikud

Märgistus

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud. Kui soovite neid kasutada, määrake lihtsalt valija.

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' )

.popover('toggle')

Lülitab elementide hüpikakna sisse.

$ ( '#element' ). hüpikakna ( 'lülita' )

Teavituste kohta

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

Näidishoiatused

Hoiatuste pistikprogramm töötab tavaliste hoiatusteadete ja blokeerivate sõnumite puhul.

Bootstrap-alert.js kasutamine

Lubage märguandest loobumine JavaScripti kaudu:

$ ( ".alert" ). hoiatus ()

Märgistus

Lihtsalt lisage data-dismiss="alert"oma sulgemisnupule, et anda automaatselt hoiatuse sulgemise funktsioon.

<a class = "sulge" data-dismiss = "alert" href = "#" > × </a>   

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" ). hoiatus ( 'sulge' )

Sündmused

Bootstrapi hoiatusklass paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

$ ( '#minu märguanne' ). bind ( 'suletud' , funktsioon () {   
  // tee midagi…
})

Umbes

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Kasutusnäited

Kasutage olekute ja lülituste jaoks nuppude pistikprogrammi.

Bootstrap-button.js kasutamine

Luba nupud JavaScripti kaudu:

$ ( '.nav-tabs' ). nupp ()

Märgistus

Andmete atribuudid on nupuplugina lahutamatud. Erinevate märgistustüüpide kohta vaadake allolevat näidiskoodi.

<!-- Lisa data-toggle="button", et aktiveerida ühe nupu sisselülitamine -->
<button class = "btn" data-toggle = "button" > Üks lüliti </button>  
 
<!-- Lisa data-toggle="buttons-checkbox" märkekasti stiili ümberlülitamiseks btn-groupis -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Vasak </button> 
  <button class = "btn" > Keskmine </button> 
  <button class = "btn" > Parem </button> 
</div>
 
<!-- Lisa data-toggle="buttons-radio" raadiostiili ümberlülitamiseks btn-groupis -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Vasak </button> 
  <button class = "btn" > Keskmine </button> 
  <button class = "btn" > Parem </button> 
</div>

meetodid

$().button('toggle')

Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.

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

$().button('laadimine')

Määrab nupu oleku laadimiseks – keelab nupu ja vahetab teksti teksti laadimiseks. Laaditav tekst tuleks nupu elemendil määratleda andmete atribuudi abil data-loading-text.

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

$().button('reset')

Lähtestab nupu oleku – vahetab teksti algteksti vastu.

$().button(string)

Lähtestab nupu oleku – vahetab teksti mis tahes andmetega määratletud teksti olekusse.

<button class = "btn" data-complete-text = "valmis!" > ... </button>   
<script>
  $ ( '.btn' ). nupp ( 'lõpeta' )
</script>

Umbes

Hankige põhistiile ja paindlikku tuge kokkupandavatele komponentidele, nagu akordionid ja navigeerimine.

* Nõuab üleminekute pistikprogrammi kaasamist.

Akordioni näide

Ahendamise pistikprogrammi abil koostasime lihtsa akordioni stiilis vidina:

Bootstrap-collapse.js kasutamine

Luba JavaScripti kaudu:

$ ( ".collapse" ). kokku kukkuma ()

Valikud

Märgistus

Lihtsalt lisage element data-toggle="collapse"ja a data-target, et määrata kokkupandava elemendi juhtimine automaatselt. Atribuut data-targetaktsepteerib ahendamise rakendamiseks css-valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  lihtne kokkupandav
</button>
 
<div id = "demo" class = "ahendama" > … </div>  

meetodid

.collapse(valikud)

Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.

$ ( '#myCollapsible' ). kollaps ({
  lülita : vale 
})

.collapse('toggle')

Lülitab kokkupandava elemendi kuvatud või peidetud olekuks.

.collapse('show')

Näitab kokkupandavat elementi.

.collapse('hide')

Peidab kokkupandava elemendi.

Sündmused

Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.

$ ( '#myCollapsible' ). on ( 'peidetud' , funktsioon () {   
  // tee midagi…
})

Umbes

Üldine pistikprogramm elementide vahel liikumiseks. Karussell.

Näidiskarussell

Vaadake allolevat slaidiseanssi.

Esimene pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Teine pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Kolmas pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Bootstrap-carousel.js kasutamine

Helista javascripti kaudu:

$ ( '.karussell' ). karussell ()

Valikud

Märgistus

Andmete atribuute kasutatakse eelmiste ja järgmiste juhtelementide jaoks. Vaadake allolevat märgistuse näidet.

<div id = "myCarousel" class = "karusselli slaid" >  
  <!-- Karusselli esemed -->
  <div class = "carousell-inner" > 
    <div class = "aktiivne üksus" > … </div> 
    <div class = "üksus" > … </div> 
    <div class = "üksus" > … </div> 
  </div>
  <!-- Karussell nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "eelmine" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "järgmine" > › </a>   
</div>

meetodid

.carousell(valikud)

Lähtestab karusselli valikuliste valikutega objectja hakkab üksuste vahel ringi liikuma.

$ ( '.karussell' ). karussell ({
  intervall : 2000 
})

.carousel('cycle')

Liigub läbi karusselli üksuste vasakult paremale.

.carousel('pause')

Peatab karusselli esemete vahel liikumise.

.carousel(number)

Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga).

.carousel('eelmine')

Liigub eelmise üksuse juurde.

.carousel('next')

Liigub järgmise üksuse juurde.

Sündmused

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks.

Umbes

Lihtne ja hõlpsasti laiendatav pistikprogramm elegantsete trükipeade kiireks loomiseks mis tahes vormis tekstisisestusega.

Näide

Esialgsete tulemuste kuvamiseks alustage allolevale väljale tippimist.

Bootstrap-typeahead.js kasutamine

Helistage esitekstile JavaScripti kaudu:

$ ( '.typeahead' ). kirjuta ette ()

Valikud

Märgistus

Lisage andmeatribuudid, et registreerida element, millel on kirjasõna.

<input type = "text" data-provide = "typeahead" >  

meetodid

.typeahead(options)

Initsialiseerib sisendi esikirjaga.