Rreth modaleve

Një shtojcë e thjeshtë, por fleksibël, modale tradicionale javascript me vetëm funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Shembull statik

Më poshtë është një modal i dhënë në mënyrë statike.

Demoja e drejtpërdrejtë

Ndryshoni një modal nëpërmjet javascript duke klikuar butonin më poshtë. Do të rrëshqasë poshtë dhe do të zbehet nga pjesa e sipërme e faqes.

Duke përdorur bootstrap-modal

Thirrni modalin përmes javascript:

$ ( '#myModal' ). modale ( opsione )

Opsione

Markup

Ju mund të aktivizoni modalet në faqen tuaj lehtësisht pa pasur nevojë të shkruani një rresht të vetëm Javascript. Thjesht vendosni data-toggle="modal"në një element kontrollues me një data-target="#foo"osehref="#foo" që korrespondon me një id të elementit modal dhe kur të klikohet, ai do të nisë modalin tuaj.

Gjithashtu, për të shtuar opsione në shembullin tuaj modal, thjesht përfshini ato si atribute shtesë të të dhënave ose në elementin e kontrollit ose në vetë shënimin modal.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Nis modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Kreu modal </h3>
  </div>
  <div class = "trup modal" > 
    <p> Një trup i hollë… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Mbylle </a>   
    <a href = "#" class = "btn btn-primary" > Ruaj ndryshimet </a>  
  </div>
</div>

Metodat

.modal(opsione)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

$ ( '#myModal' ). modale ({
  tastierë : false 
})

.modal ('ndërrim')

Ndryshon manualisht një modal.

$ ( '#myModal' ). modale ( 'ndërrim' )

.modal('shfaq')

Hap manualisht një modal.

$ ( '#myModal' ). modale ( 'shfaqje' )

.modal ('fsheh')

Fsheh manualisht një modal.

$ ( '#myModal' ). modale ( 'fsheh' )

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal.

$ ( '#myModal' ). on ( 'fshehur' , funksion () {   
  // bej dicka…
})

Rreth zbritjeve

Shtoni menutë me zbritje në pothuajse çdo gjë në Bootstrap me këtë shtojcë të thjeshtë. Bootstrap përmban mbështetje të plotë të menusë rënëse në shiritin e navigimit, skedat dhe pilulat.

Shembuj

Klikoni në lidhjet e navigimit me zbritje në shiritin e navigimit dhe pilulat më poshtë për të testuar zbritjet.

• Lidhje e rregullt
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Duke përdorur bootstrap-dropdown.js

Thirrni zbritjet përmes Javascript:

$ ( '.dropdown-toggle' ). me zbritje ()

Markup

Për të shtuar shpejt funksionalitetin e lëshimit në çdo element, thjesht shtoni data-toggle="dropdown"dhe çdo listë e vlefshme bootstrap do të aktivizohet automatikisht.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Lidhje e rregullt </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "meny-dropdown" > 
      <li><a href = "#" > Veprimi </a></li> 
      <li><a href = "#" > Një veprim tjetër </a></li> 
      <li><a href = "#" > Diçka tjetër këtu </a></li> 
      <li class = "ndarës" ></li> 
      <li><a href = "#" > Lidhje e ndarë </a></li> 
    </ul>
  </li>
  ...
</ul>

Për të mbajtur URL-të të paprekura, përdorni data-targetatributin në vend të href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "rruga/to/page.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </li>
</ul>

Metodat

$().dropdown()

Një api programatike për aktivizimin e menyve për një navigacion të caktuar navigimi ose me skeda.

Shtojca ScrollSpy është për përditësimin automatik të objektivave të navigimit bazuar në pozicionin e lëvizjes.

Shembull i shiritit navigues me scrollspy

Lëvizni zonën më poshtë dhe shikoni përditësimin e navigimit. Nën-artikujt në rënie do të theksohen gjithashtu. Provoje!

Duke përdorur bootstrap-scrollspy.js

Telefononi scrollspy përmes javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, thjesht shtoni data-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti ky do të ishte trupi).

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

Metodat

.scrollspy ('refresh')

Kur përdorni scrollspy në lidhje me shtimin ose heqjen e elementeve nga DOM, do t'ju duhet të telefononi metodën e rifreskimit si kjo:

$ ( '[data-spy="scroll"]' ). secili ( funksion () {  
  var $spy = $ ( kjo ). scrollspy ( 'refresh' )
});

Opsione

Ngjarjet

Kjo shtojcë shton funksionalitet të shpejtë, dinamik të skedave dhe pilulave për kalimin përmes përmbajtjes lokale.

Shembuj skedash

Klikoni skedat më poshtë për të kaluar midis paneleve të fshehura, madje edhe përmes menuve rënëse.

• Shtëpi
• Profili
• Dropdown
  • @fat
  • @mdo

Duke përdorur bootstrap-tab.js

Aktivizo skedat me skeda përmes javascript (secila skedë duhet të aktivizohet individualisht):

$ ( '#myTab a' ). kliko ( funksioni ( e ) {  
  e . preventDefault ();
  $ ( kjo ). tab ( 'shfaq' );
})

Ju mund të aktivizoni skedat individuale në disa mënyra:

$ ( '#myTab a[href="#profile"]' ). tab ( 'shfaq' ); // Zgjidhni skedën sipas emrit 
$ ( '#myTab a:first' ). tab ( 'shfaq' ); // Zgjidhni skedën e parë 
$ ( '#myTab a:last' ). tab ( 'shfaq' ); // Zgjidhni skedën e fundit 
$ ( '#myTab li:eq(2) a' ). tab ( 'shfaq' ); // Zgjidhni skedën e tretë (të indeksuar me 0) 

Markup

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë javascript thjesht duke specifikuar data-toggle="tab"ose data-toggle="pill"mbi një element. Shtimi i navdhe nav-tabsklasave në skedë uldo të zbatojë stilin e skedës së bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Faqja kryesore </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profili </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesazhet </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Cilësimet </a></li>  
</ul>

Metodat

$().tab

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-targetose një hrefnyje kontejneri në DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Faqja kryesore </a></li>  
  <li><a href = "#profile" > Profili </a></li> 
  <li><a href = "#messages" > Mesazhet </a></li> 
  <li><a href = "#settings" > Cilësimet </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane aktiv" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skript>
  $ ( funksioni () {  
    $ ( '#myTab a:last' ). tab ( 'shfaq' );
  })
</script>

Ngjarjet

$ ( 'a[data-toggle="tab"]' ). on ( 'treguar' , funksioni ( e ) {   
  e . objektivi // skeda e aktivizuar
  e . relatedTarget // skeda e mëparshme
})

Rreth Këshillave të Veglave

Frymëzuar nga shtojca e shkëlqyer jQuery.tipsy e shkruar nga Jason Frame; Këshillat e veglave janë një version i përditësuar, i cili nuk mbështetet në imazhe, përdor css3 për animacione dhe atribute të dhënash për ruajtjen lokale të titujve.

Shembull i përdorimit të Këshillave të Veglave

Zhvendosni mbi lidhjet e mëposhtme për të parë këshillat e veglave:

Duke përdorur bootstrap-tooltip.js

Aktivizoni këshillën e veglave përmes javascript:

$ ( '#shembull' ). këshillë veglash ( opsione )

Opsione

Markup

Për arsye të performancës, Tooltip dhe Popover data-apis janë zgjedhur. Nëse dëshironi t'i përdorni ato, thjesht specifikoni një opsion përzgjedhës.

<a href = "#" rel = "tooltip" title = "fast tooltip" > rri pezull mbi mua </a>   

Metodat

$().tooltip(opsionet)

Bashkangjit një mbajtës udhëzues në një koleksion elementesh.

.tooltip ('shfaq')

Zbulon udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'shfaq' )

.tooltip ('fsheh')

Fsheh udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'fsheh' )

.tooltip ('ndërroj')

Ndryshon udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'ndërrim' )

Rreth popovers

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor.

* Kërkon që këshilla e veglave të përfshihet

Shembull hover popover

Zhvendosni pezull mbi butonin për të aktivizuar popover-in.

Duke përdorur bootstrap-popover.js

Aktivizo popover-et përmes javascript:

$ ( '#shembull' ). popover ( opsione )

Opsione

Markup

Për arsye të performancës, Tooltip dhe Popover data-apis janë zgjedhur. Nëse dëshironi t'i përdorni ato, thjesht specifikoni një opsion përzgjedhës.

Metodat

$().popover(opsione)

Inicializon popover-et për një koleksion elementesh.

.popover ('shfaqje')

Zbulon një popover elementesh.

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

.popover ('fsheh')

Fsheh një popover elementesh.

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

.popover ('ndërrim')

Aktivizon një popover të elementeve.

$ ( '#element' ). popover ( 'ndërrim' )

Rreth alarmeve

Shtojca e alarmit është një klasë e vogël për shtimin e funksionalitetit të afërt të sinjalizimeve.

Shembuj sinjalizimesh

Shtojca e alarmeve funksionon në mesazhe të rregullta alarmi dhe bllokon mesazhet.

Duke përdorur bootstrap-alert.js

Aktivizo heqjen e një sinjalizimi nëpërmjet javascript:

$ ( ".alert" ). alarm ()

Markup

Thjesht shtoni data-dismiss="alert"në butonin tuaj të mbylljes për të dhënë automatikisht një funksion të mbylljes së alarmit.

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

Metodat

$().alert()

Mbështjell të gjitha sinjalizimet me funksionalitet të ngushtë. Për t'i animuar sinjalizimet tuaja kur mbyllen, sigurohuni që të kenë aplikuar tashmë klasën .fadedhe .inpër to.

.alert ('mbyll')

Mbyll një alarm.

$ ( ".alert" ). alarmi ( 'mbyll' )

Ngjarjet

Klasa e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

$ ( '#my-alert' ). bind ( 'mbyllur' , funksioni () {   
  // bej dicka…
})

Rreth

Bëni më shumë me butona. Kontrolloni gjendjet e butonit ose krijoni grupe butonash për më shumë komponentë si shiritat e veglave.

Shembuj të përdorimeve

Përdorni shtojcën e butonave për gjendjet dhe ndërrimet.

Duke përdorur bootstrap-button.js

Aktivizo butonat përmes javascript:

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

Markup

Atributet e të dhënave janë integrale në shtojcën e butonit. Shikoni shembullin e kodit më poshtë për llojet e ndryshme të shënjimit.

<!-- Shto data-toggle="button" për të aktivizuar ndërrimin në një buton të vetëm -->
<button class = "btn" data-toggle = "button" > Ndërrimi i vetëm </button>  
 
<!-- Shto data-toggle="buttons-checkbox" për ndryshimin e stilit të kutisë së kontrollit në btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Majtas </button> 
  <button class = "btn" > Mesme </button> 
  <button class = "btn" > Djathtas </button> 
</div>
 
<!-- Shto data-toggle="buttons-radio" për ndryshimin e stilit të radios në btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Majtas </button> 
  <button class = "btn" > Mesme </button> 
  <button class = "btn" > Djathtas </button> 
</div>

Metodat

$().button('toggle')

Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.

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

$().button('po ngarkohet')

Vendos gjendjen e butonit në ngarkim - çaktivizon butonin dhe ndërron tekstin me tekstin e ngarkimit. Teksti i ngarkimit duhet të përcaktohet në elementin e butonit duke përdorur atributin e të dhënave data-loading-text.

<button class = "btn" data-loading-text = "duke ngarkuar gjëra..." > ... </button>   

$().button('rivendosje')

Rivendos gjendjen e butonit - ndërron tekstin në tekstin origjinal.

$().button(string)

Rivendos gjendjen e butonit - ndërron tekstin në çdo gjendje teksti të përcaktuar nga të dhënat.

<button class = "btn" data-complete-text = "mbaruar!" > ... </button>   
<skript>
  $ ( '.btn' ). butoni ( "i plotë" )
</script>

Rreth

Merrni stile bazë dhe mbështetje fleksibël për komponentët e palosshëm si fizarmonikët dhe navigimi.

* Kërkon që të përfshihet shtojca Transitions.

Shembull fizarmonikë

Duke përdorur shtojcën e kolapsit, ne ndërtuam një miniaplikacion të thjeshtë të stilit fizarmonikë:

Duke përdorur bootstrap-collapse.js

Aktivizo përmes javascript:

$ ( ".collapse" ). kolaps ()

Opsione

Markup

Thjesht shtoni data-toggle="collapse"dhe një data-targetelement për të caktuar automatikisht kontrollin e një elementi të palosshëm. Atributi data-targetpranon një përzgjedhës css për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  e thjeshtë e palosshme
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Metodat

.collapse(opsione)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

$ ( '#myCollapsible' ). kolaps ({
  ndërroj : i rremë 
})

.collapse ('ndërrim')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur.

.collapse ('shfaq')

Tregon një element të palosshëm.

.collapse ('fsheh')

Fsheh një element të palosshëm.

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

$ ( '#myCollapsible' ). on ( 'fshehur' , funksion () {   
  // bej dicka…
})

Rreth

Një shtojcë e përgjithshme për kalimin me biçikletë nëpër elementë. Një gazetë.

Shembull karuseli

Shikoni shfaqjen e rrëshqitjes më poshtë.

Etiketa e parë e miniaturës

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

Etiketa e dytë e miniaturës

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

Third Thumbnail label

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

‹ ›

Duke përdorur bootstrap-carousel.js

Telefononi përmes javascript:

$ ( '.carousel' ). karusel ()

Opsione

Markup

Atributet e të dhënave përdoren për kontrollet e mëparshme dhe të ardhshme. Shikoni shënjimin e shembullit më poshtë.

<div id = "myCarousel" class = "rrëshqitje karuseli" >  
  <!-- Artikuj carousel -->
  <div class = "carousel-inner" > 
    <div class = "artikull aktiv" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigacion karuseli -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Metodat

.carousel (opsione)

Inicializon karuselin me një opsion opsional objectdhe fillon të lëvizë me biçikletë nëpër artikuj.

$ ( '.carousel' ). karusel ({
  intervali : 2000 
})

.carousel ('cikli')

Ciklet nëpër artikujt e karuselit nga e majta në të djathtë.

.carousel ('pauzë')

Ndalon karuselin të lëvizë me biçikletë nëpër artikuj.

.carousel(numri)

Ciklizon karuselin në një kornizë të caktuar (bazuar në 0, e ngjashme me një grup).

.carousel ('para')

Ciklet në artikullin e mëparshëm.

.carousel ('tjetër')

Ciklet te artikulli tjetër.

Ngjarjet

Klasa e karuselit të Bootstrap ekspozon dy ngjarje për t'u lidhur me funksionalitetin e karuselit.

Rreth

Një shtojcë bazë, e zgjeruar lehtësisht për krijimin e shpejtë të kokave elegante të shkrimit me çdo futje teksti në formë.

Shembull

Filloni të shkruani në fushën më poshtë për të shfaqur rezultatet e shtypjes.

Duke përdorur bootstrap-typeahead.js

Thirrni kokën e shkrimit përmes javascript:

$ ( '.typeahead' ). shtypshkronjë ()

Opsione

Markup

Shto atribute të dhënash për të regjistruar një element me funksionalitetin e shtypjes.

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

Metodat

.typeahead(opsionet)

Inicializon një hyrje me një shtypje.