Ħarsa ġenerali

Individwali jew miġbura

Il-plugins jistgħu jiġu inklużi individwalment (bl-użu tal- *.jsfajls individwali ta 'Bootstrap), jew kollha f'daqqa (bl-użu bootstrap.jsjew il-minifikat bootstrap.min.js).

Bl-użu tal-JavaScript miġbur

It- tnejn bootstrap.jsu bootstrap.min.jsfihom il-plugins kollha f'fajl wieħed. Inkludi wieħed biss.

Dipendenzi tal-plugin

Xi plugins u komponenti CSS jiddependu fuq plugins oħra. Jekk tinkludi plugins individwalment, kun żgur li tiċċekkja għal dawn id-dipendenzi fid-doks. Innota wkoll li l-plugins kollha jiddependu fuq jQuery (dan ifisser li jQuery għandu jiġi inkluż qabel il-fajls tal-plugin). Ikkonsulta tagħnabower.json biex tara liema verżjonijiet ta 'jQuery huma appoġġjati.

Attributi tad-dejta

Tista 'tuża l-plugins Bootstrap kollha purament permezz tal-API tal-markup mingħajr ma tikteb linja waħda ta' JavaScript. Din hija l-API tal-ewwel klassi ta' Bootstrap u għandha tkun l-ewwel konsiderazzjoni tiegħek meta tuża plugin.

Cela dit, f'xi sitwazzjonijiet jista 'jkun mixtieq li titfi din il-funzjonalità. Għalhekk, aħna nipprovdu wkoll il-ħila li tiddiżattiva l-API tal-attribut tad-dejta billi torbot l-avvenimenti kollha fuq id-dokument namespaced bi data-api. Dan jidher bħal dan:

$(document).off('.data-api')

Inkella, biex timmira plugin speċifiku, inkludi biss l-isem tal-plugin bħala spazju tal-isem flimkien mal-ispazju tal-isem tad-data-api bħal dan:

$(document).off('.alert.data-api')

Plugin wieħed biss għal kull element permezz ta' attributi tad-dejta

Tużax attributi tad-dejta minn plugins multipli fuq l-istess element. Pereżempju, buttuna ma tistax kemm ikollha tooltip kif ukoll toggle modal. Biex twettaq dan, uża element tat-tgeżwir.

API programmatiku

Aħna nemmnu wkoll li għandek tkun tista' tuża l-plugins Bootstrap kollha purament permezz tal-API JavaScript. L-APIs pubbliċi kollha huma metodi singoli, li jistgħu jiġu kkatinati, u jirritornaw il-ġbir li ttieħed azzjoni fuqhom.

$('.btn.danger').button('toggle').addClass('fat')

Il-metodi kollha għandhom jaċċettaw oġġett ta' għażliet fakultattivi, string li jimmira metodu partikolari, jew xejn (li jibda plugin b'imġieba default):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Kull plugin jesponi wkoll il-kostruttur mhux maħdum tiegħu fuq Constructorproprjetà: $.fn.popover.Constructor. Jekk tixtieq tikseb każ partikolari ta' plugin, irkupraha direttament minn element: $('[rel="popover"]').data('popover').

Settings default

Tista' tibdel is-settings default għal plugin billi timmodifika l- Constructor.DEFAULTSoġġett tal-plugin:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

L-ebda kunflitt

Xi drabi huwa meħtieġ li tuża plugins Bootstrap ma 'oqfsa UI oħra. F'dawn iċ-ċirkostanzi, ħabtiet tal-ispazji tal-isem jistgħu jseħħu okkażjonalment. Jekk jiġri dan, tista' ċċempel .noConflictfuq il-plugin li tixtieq ireġġa' lura l-valur tiegħu.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Avvenimenti

Bootstrap jipprovdi avvenimenti personalizzati għall-biċċa l-kbira tal-azzjonijiet uniċi tal-plugins. Ġeneralment, dawn jiġu f'forma ta 'partiċipju infinitiv u passat - fejn l-infinittiv (eż. show) jiġi attivat fil-bidu ta' avveniment, u l-forma ta 'partiċipju passat tiegħu (eż. shown) tiġi attivata mat-tlestija ta' azzjoni.

Minn 3.0.0, l-avvenimenti kollha Bootstrap huma namespaced.

L-avvenimenti infiniti kollha jipprovdu preventDefaultfunzjonalità. Dan jipprovdi l-abbiltà li twaqqaf l-eżekuzzjoni ta 'azzjoni qabel ma tibda.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Numri tal-verżjoni

Il-verżjoni ta' kull plugin jQuery ta' Bootstrap tista' tiġi aċċessata permezz tal- VERSIONproprjetà tal-kostruttur tal-plugin. Per eżempju, għall-plugin tooltip:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Ebda fallbacks speċjali meta JavaScript huwa diżattivat

Il-plugins tal-Bootstrap ma jaqgħux lura partikolarment b'mod grazzjuż meta JavaScript huwa diżattivat. Jekk jimpurtak mill-esperjenza tal-utent f'dan il-każ, uża <noscript>biex tispjega s-sitwazzjoni (u kif terġa 'tippermetti l-JavaScript) lill-utenti tiegħek, u/jew żid il-fallbacks tad-dwana tiegħek.

Libreriji ta' partijiet terzi

Bootstrap ma jappoġġjax uffiċjalment libreriji JavaScript ta' partijiet terzi bħal Prototype jew jQuery UI. Minkejja .noConflictl-avvenimenti u namespaced, jista 'jkun hemm problemi ta' kompatibilità li għandek bżonn tirranġa waħdek.

Transizzjonijiet transition.js

Dwar transizzjonijiet

Għal effetti ta 'tranżizzjoni sempliċi, inkludi transition.jsdarba flimkien mal-fajls JS l-oħra. Jekk qed tuża l-ikkumpilat (jew imminifikat) bootstrap.js, m'hemmx għalfejn tinkludi dan—diġà qiegħed hemm.

X'hemm ġewwa

Transition.js huwa helper bażiku għall- transitionEndavvenimenti kif ukoll emulatur ta 'transizzjoni CSS. Jintuża mill-plugins l-oħra biex jiċċekkja l-appoġġ tat-tranżizzjoni CSS u biex jaqbad transizzjonijiet imdendlin.

It-tranżizzjonijiet ta' diżabilitazzjoni

It-tranżizzjonijiet jistgħu jiġu diżattivati ​​globalment billi tuża s-snippet JavaScript li ġej, li għandu jiġi wara li transition.js(jew bootstrap.js, bootstrap.min.jsskont il-każ) ikun tagħbija:

$.support.transition = false

Modali modal.js

Il-modali huma ssimplifikati, iżda flessibbli, iqajjem djalogu bil-funzjonalità minima meħtieġa u nuqqasijiet intelliġenti.

Modali multipli miftuħa mhux appoġġjati

Kun żgur li ma tiftaħx modali waqt li ieħor ikun għadu viżibbli. Li tintwera aktar minn modal wieħed kull darba teħtieġ kodiċi tad-dwana.

Tqegħid tal-markup modali

Dejjem ipprova poġġi l-kodiċi HTML tal-modal f'pożizzjoni tal-ogħla livell fid-dokument tiegħek biex tevita komponenti oħra li jaffettwaw id-dehra u/jew il-funzjonalità tal-modal.

Caveats tal-apparat mobbli

Hemm xi twissijiet dwar l-użu tal-modali fuq apparat mobbli. Ara d-dokumenti tal-appoġġ tal-browser tagħna għad-dettalji.

Minħabba kif HTML5 jiddefinixxi s-semantika tiegħu, l- autofocusattribut HTML m'għandu l-ebda effett fil-modali Bootstrap. Biex tikseb l-istess effett, uża xi JavaScript personalizzat:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Eżempji

Eżempju statiku

Modali mogħtija b'header, korp, u sett ta' azzjonijiet fil-footer.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

Aqleb modal permezz ta' JavaScript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Agħmel modali aċċessibbli

Kun żgur li żżid role="dialog"u aria-labelledby="...", b'referenza għat-titlu modali, għal .modal, u role="document"għall- .modal-dialoginnfisha.

Barra minn hekk, tista' tagħti deskrizzjoni tad-djalogu modali tiegħek aria-describedbyb'on .modal.

Inkorporazzjoni ta' vidjows ta' YouTube

L-inkorporazzjoni ta' vidjows ta' YouTube f'modals teħtieġ JavaScript addizzjonali mhux f'Bootstrap biex twaqqaf awtomatikament id-daqq u aktar. Ara din il-post utli ta' Stack Overflow għal aktar informazzjoni.

Daqsijiet fakultattivi

Il-modali għandhom żewġ daqsijiet fakultattivi, disponibbli permezz ta' klassijiet ta' modifikatur biex jitqiegħdu fuq .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Neħħi l-animazzjoni

Għal modals li sempliċiment jidhru aktar milli fade biex tarahom, neħħi l- .fadeklassi mill-markup modali tiegħek.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Bl-użu tas-sistema tal-grilja

Biex tieħu vantaġġ mis-sistema tal-grilja Bootstrap fi ħdan modali, bejta .rows fi ħdan il- .modal-bodyu mbagħad uża l-klassijiet tas-sistema tal-grilja normali.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Għandek mazz ta 'buttuni li kollha jqanqlu l-istess modal, biss b'kontenut kemmxejn differenti? Uża event.relatedTargetu attributi HTMLdata-* (possibilment permezz ta' jQuery ) biex tvarja l-kontenut tal-modal skont liema buttuna ġiet ikklikkjata. Ara d-dokumenti tal-Avvenimenti Modali għad-dettalji dwar relatedTarget,

...aktar buttuni...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Użu

Il-plugin modali jibdel il-kontenut moħbi tiegħek fuq talba, permezz ta' attributi tad-dejta jew JavaScript. Iżid ukoll .modal-openmal- <body>imġieba ta' scrolling predefinita biex tissostitwixxi u tiġġenera .modal-backdropbiex tipprovdi żona tal-ikklikkja biex tiċħad il-modali murija meta tikklikkja barra l-modal.

Via attributi tad-data

Attiva modali mingħajr ma tikteb JavaScript. Issettja data-toggle="modal"fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-target="#foo"jew href="#foo"biex timmira modal speċifiku biex toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Sejħa modal b'id myModalb'linja waħda ta' JavaScript:

$('#myModal').modal(options)

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-backdrop="".

Isem tip default deskrizzjoni
sfond boolean jew is-sekwenza'static' veru Jinkludi element ta' sfond modali. Inkella, speċifika staticgħal sfond li ma jagħlaqx il-modal mal-ikklikkja.
tastiera boolean veru Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba
juru boolean veru Juri l-modal meta inizjalizzat.
remot mogħdija falza

Din l-għażla hija deprecata mill-v3.3.0 u tneħħiet fil-v4. Nirrakkomandaw minflok tuża templating min-naħa tal-klijent jew qafas ta' rabta tad-dejta, jew issejjaħ jQuery.load lilek innifsek.

Jekk jiġi pprovdut URL remot, il- kontenut jitgħabba darba permezz tal-metodu jQuery loadu jiġi injettat fid- .modal-contentdiv. Jekk qed tuża d-data-api, tista' alternattivament tuża l- hrefattribut biex tispeċifika s-sors remot. Eżempju ta’ dan jidher hawn taħt:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Metodi

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

$('#myModal').modal({
  keyboard: false
})

Manwalment toggles modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.modaljew ).hidden.bs.modal

$('#myModal').modal('toggle')

Manwalment tiftaħ modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera (jiġifieri qabel ma shown.bs.modaljseħħ l-avveniment).

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

Manwalment jaħbi modali. Jirritorna lil min iċempel qabel ma l-modal fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.modaljseħħ l-avveniment).

$('#myModal').modal('hide')

Jaġġusta mill-ġdid il-pożizzjonament tal-modal biex jikkumbatti scrollbar f'każ li wieħed għandu jidher, li jagħmel il-modal jaqbeż lejn ix-xellug.

Huwa meħtieġ biss meta l-għoli tal-modal jinbidel waqt li jkun miftuħ.

$('#myModal').modal('handleUpdate')

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

L-avvenimenti modali kollha jiġu sparati lejn il-modal innifsu (jiġifieri fil- <div class="modal">).

Tip ta' Avveniment Deskrizzjoni
juru.bs.modal Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza. Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTargetproprjetà tal-avveniment.
muri.bs.modal Dan l-avveniment jiġi sparat meta l-modal ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTargetproprjetà tal-avveniment.
hide.bs.modal Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu tal-istanza jkun ġie msejjaħ.
moħbija.bs.modali Dan l-avveniment jiġi sparat meta l-modal ikun spiċċa moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
loaded.bs.modal Dan l-avveniment jiġi sparat meta l-modal tagħbija kontenut bl-użu tal- remotegħażla.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Żid menus dropdown għal kważi kull ħaġa b'dan il-plugin sempliċi, inklużi n-navbar, tabs, u pilloli.

Fi ħdan navbar

Fi ħdan pilloli

Permezz ta 'attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .openklassi fuq l-oġġett tal-lista prinċipali.

Fuq apparat mobbli, il-ftuħ ta 'dropdown iżid .dropdown-backdropbħala żona tal-vit għall-għeluq tal-menus dropdown meta ttektek barra l-menu, rekwiżit għal appoġġ xieraq tal-iOS. Dan ifisser li l-bidla minn menu dropdown miftuħ għal menu dropdown differenti teħtieġ vit żejda fuq il-mowbajl.

Nota: L- data-toggle="dropdown"attribut huwa bbażat fuqu għall-għeluq tal-menus dropdown f'livell ta 'applikazzjoni, għalhekk hija idea tajba li dejjem tużah.

Via attributi tad-data

Żid data-toggle="dropdown"ma' link jew buttuna biex taqleb dropdown.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Biex iżżomm l-URLs intatti mal-buttuni tal-link, uża l- data-targetattribut minflok href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Ċempel il-dropdowns permezz ta' JavaScript:

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

data-toggle="dropdown"għadu meħtieġ

Irrispettivament minn jekk inti sejħa dropdown tiegħek permezz JavaScript jew minflok tuża d-data-api, data-toggle="dropdown"huwa dejjem meħtieġ li tkun preżenti fuq l-element grillu dropdown.

Xejn

Jaqbel mal-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.

L-avvenimenti kollha dropdown jiġu sparati fuq l .dropdown-menu-element ġenitur ta '.

L-avvenimenti kollha dropdown għandhom relatedTargetproprjetà, li l-valur tagħha huwa l-element tal-ankra li toggling.

Tip ta' Avveniment Deskrizzjoni
show.bs.dropdown Dan l-avveniment jispara immedjatament meta jissejjaħ il-metodu tal-ispettaklu.
murija.bs.dropdown Dan l-avveniment jiġi sparat meta l-dropdown tkun saret viżibbli għall-utent (se tistenna għal transizzjonijiet CSS, biex jitlestew).
hide.bs.dropdown Dan l-avveniment jiġi sparat immedjatament meta l-metodu tal-istanza taħbi jkun ġie msejjaħ.
hidden.bs.dropdown Dan l-avveniment jiġi sparat meta l-dropdown ikun lest jiġi moħbi mill-utent (se jistenna għal transizzjonijiet CSS, biex jitlestew).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Eżempju fin-navbar

Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll. Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll.

@xaħam

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qabel ma jinbiegħu qui. Tumblr drittijiet tar-roti minn farm-to-mejda tkun xi tkun. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 lupu qamar irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui inti probabilment ma smajtx minnhom et cardigan trust fund culpa bijodiżil wes anderson estetika. Nihil tattooed accusamus, cred ironija bijodiżil keffiyeh artiġjanali ullamco consequat.

@mdo

Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Trakk ta 'l-ikel tas-sweeter cosby tatujat, vinil tal-mcsweeney's quis non freegan. Lo-fi wes anderson +1 sartorial. Carles mhux eżerċizzju estetiku quis gentrify. Brooklyn adipisicing craft birra viċi keytar deserunt.

waħda

Occaecat commodo aliqua delectus. Fap craft birra deserunt skateboard ea. Lomo drittijiet tar-roti adipisicing banh mi, velit ea sunt livell li jmiss locavore kafè ta 'oriġini waħda fil-magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS huwa adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

tnejn

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa kwalunkwe delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironija, thundercats inti probabilment ma smajtx minnhom consequat hoodie gluten free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Użu

Jeħtieġ Bootstrap nav

Scrollspy bħalissa jeħtieġ l-użu ta ' komponent Bootstrap nav għall-enfasi xierqa ta' links attivi.

Miri ta' ID riżolvibbli meħtieġa

Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fid-DOM bħal <div id="home"></div>.

Elementi mhux :visiblefil-mira injorati

Elementi fil-mira li mhumiex :visibleskont jQuery se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom qatt ma jiġu enfasizzati.

Jeħtieġ pożizzjonament relattiv

Ma jimpurtax mill-metodu ta 'implimentazzjoni, scrollspy teħtieġ l-użu ta' position: relative;fuq l-element li qed spying fuq. F'ħafna każijiet dan huwa l- <body>. Meta scrollspying fuq elementi minbarra l- <body>, kun żgur li jkollok heightsett u overflow-y: scroll;applikati.

Via attributi tad-data

Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>). Imbagħad żid l- data-targetattribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .navkomponent Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

Wara li żżid position: relative;fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Metodi

.scrollspy('refresh')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset="".

Isem tip default deskrizzjoni
offset numru 10 Pixels biex jikkumpensaw minn fuq meta tikkalkula l-pożizzjoni tal-iscroll.

Avvenimenti

Tip ta' Avveniment Deskrizzjoni
attivate.bs.scrollspy Dan l-avveniment jispara kull meta oġġett ġdid jiġi attivat mill-iscrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabs li jistgħu jinqalbu tab.js

Eżempju tabs

Żid il-funzjonalità ta' tab rapida u dinamika biex tgħaddi minn panewijiet ta' kontenut lokali, anke permezz ta' menus dropdown. Tabs imnaqqxa mhumiex appoġġjati.

Denim mhux maħdum x'aktarx ma smajtx bihom jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master jitnaddaf. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex klamari. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Jestendi n-navigazzjoni b'tabbed

Dan il-plugin jestendi l -komponent tan-navigazzjoni tabbed biex iżżid żoni tabbable.

Użu

Ippermetti tabs tabbable permezz ta' JavaScript (kull tab trid tiġi attivata individwalment):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Tista' tattiva tabs individwali b'diversi modi:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="tab"jew data-toggle="pill"fuq element. Iż-żieda tal- klassijiet navu mat-tab se tapplika l- grafika tat-tab Bootstrap , filwaqt li żżid il- klassijiet u se tapplika l -grafika tal-pilloli .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Effett fade

Biex tagħmel it-tabs fade, żid .fadema 'kull .tab-pane. L-ewwel pannell tat-tab irid ikollu wkoll .injagħmel il-kontenut inizjali viżibbli.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Metodi

$().tab

Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollu jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM. Fl-eżempji ta 'hawn fuq, it-tabs huma l- <a>i data-toggle="tab"b'attributi.

.tab('show')

Jagħżel it-tab mogħtija u juri l-kontenut assoċjat tagħha. Kwalunkwe tab oħra li kienet magħżula qabel ma ssirx magħżula u l-kontenut assoċjat tagħha huwa moħbi. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (jiġifieri qabel ma shown.bs.tabjseħħ l-avveniment).

$('#someTab').tab('show')

Avvenimenti

Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:

  1. hide.bs.tab(fuq it-tab attiva kurrenti)
  2. show.bs.tab(fuq it-tab li trid tintwera)
  3. hidden.bs.tab(fuq it-tab attiva preċedenti, l-istess bħal għall- hide.bs.tabavveniment)
  4. shown.bs.tab(fuq it-tab li għadha kif intwera, l-istess bħal dik tal- show.bs.tabavveniment)

Jekk l-ebda tab ma kienet diġà attiva, allura l- hide.bs.tabu hidden.bs.tabavvenimenti mhux se jiġu sparati.

Tip ta' Avveniment Deskrizzjoni
juru.bs.tab Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
muri.bs.tab Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
hide.bs.tab Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament.
moħbija.bs.tab Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw CSS3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.

Tooltips b'titli ta' tul żero qatt ma jintwerew.

Eżempji

Passa fuq il-links hawn taħt biex tara l-għodda:

Qliezet stretti livell li jmiss keffiyeh inti probabilment ma smajthom. Photo booth beard raw denim letterpress vegan messaġġier borża stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american ilbies għandhom terri richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A verament ironiku artiġjan kwalunkwe keytar , scenester farm-to-table banksy Austin twitter manku freegan cred raw denim kafè ta 'oriġini waħda virali.

Tooltip statiku

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.

Erba' direzzjonijiet

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Opt-in funzjonalità

Għal raġunijiet ta' prestazzjoni, il-Tooltip u Popover data-apis huma opt-in, li jfisser li trid tinizjalizzahom lilek innifsek .

Mod wieħed biex jiġu inizjalizzati l-għodda kollha fuq paġna jkun li tagħżelhom skont l- data-toggleattribut tagħhom:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Użu

Il-plugin tooltip jiġġenera kontenut u markup fuq talba, u awtomatikament iqiegħed tooltips wara l-element grillu tagħhom.

Agħmel it-tooltip permezz ta' JavaScript:

$('#example').tooltip(options)

Markup

Il-markup meħtieġ għal tooltip huwa biss dataattribut u titlefuq l-element HTML tixtieq li jkollok tooltip. Il-markup iġġenerat ta' tooltip huwa pjuttost sempliċi, għalkemm jeħtieġ pożizzjoni (b'mod awtomatiku, issettjat topmill-plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Links b'ħafna linji

Xi drabi trid iżżid tooltip ma' hyperlink li jgħaqqad linji multipli. L-imġiba awtomatika tal-plugin tooltip hija li tiċċentrah orizzontalment u vertikalment. Żid white-space: nowrap;mal-ankri tiegħek biex tevita dan.

Tooltips fi gruppi ta' buttuna, gruppi ta' input, u tabelli jeħtieġu setting speċjali

Meta tuża tooltips fuq elementi fi ħdan a .btn-groupjew an .input-group, jew fuq elementi relatati mat-tabella ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ikollok tispeċifika l-għażla container: 'body'(dokumentata hawn taħt) biex tevita effetti sekondarji mhux mixtieqa (bħall-element li jikber usa u// jew jitlef il-kantunieri fit-tond tiegħu meta jinxtegħel it-tooltip).

Tippruvax turi tooltips dwar elementi moħbija

L- invokazzjoni $(...).tooltip('show')meta l-element fil-mira jkun display: none;jikkawża li l-tooltip tkun pożizzjonata ħażin.

Tooltips aċċessibbli għal utenti tat-tastiera u tat-teknoloġija assistiva

Għall-utenti li qed jinnavigaw b'tastiera, u b'mod partikolari l-utenti ta' teknoloġiji ta' assistenza, għandek iżżid biss tooltips ma' elementi li jiffokaw fuq it-tastiera bħal links, kontrolli tal-formoli, jew kwalunkwe element arbitrarju tabindex="0"b'attribut.

Tooltips dwar elementi b'diżabbiltà jeħtieġu elementi tat-tgeżwir

Biex iżżid tooltip għal a disabledjew .disabledelement, poġġi l-element ġewwa a <div>u applika l-tooltip għal dak <div>minflok.

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Isem Tip Default Deskrizzjoni
animazzjoni boolean veru Applika transizzjoni ta' fade CSS għall-tooltip
kontenitur spag | falza falza

Jwaħħal it-tooltip ma' element speċifiku. Eżempju: container: 'body'. Din l-għażla hija partikolarment utli peress li tippermettilek li tpoġġi l-tooltip fil-fluss tad-dokument ħdejn l-element triggering - li jipprevjeni l-tooltip milli jżomm f'wiċċ l-ilma 'l bogħod mill-element triggering waqt tibdil tad-daqs tat-tieqa.

dewmien numru | oġġett 0

Dewmien biex juri u jaħbi l-tooltip (ms) - ma japplikax għat-tip ta' grillu manwali

Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm biex jaħbu/juri

L-istruttura tal-oġġett hija:delay: { "show": 500, "hide": 100 }

html boolean falza Daħħal HTML fil-tooltip. Jekk falz, il-metodu ta 'jQuery textse jintuża biex jiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS.
tqegħid spag | funzjoni 'fuq'

Kif tpoġġi l-tooltip - top | qiegħ | xellug | dritt | auto.
Meta "auto" hija speċifikata, se dinamikament jorjentaw mill-ġdid it-tooltip. Per eżempju, jekk it-tqegħid huwa "awto xellug", il-tooltip se juri lejn ix-xellug meta jkun possibbli, inkella se juri dritt.

Meta tintuża funzjoni biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM tal-għodda bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- thiskuntest huwa ssettjat għall-istanza tooltip.

selettur spag falza Jekk jiġi pprovdut selettur, l-oġġetti tat-tooltip jiġu ddelegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti li l-kontenut HTML dinamiku jiżdied it-tooltips. Ara dan u eżempju informattiv .
mudell spag '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Bażi HTML biex tuża meta toħloq it-tooltip.

It-tooltip's titlese jiġu injettati fil- .tooltip-inner.

.tooltip-arrowse ssir il-vleġġa tal-għodda.

L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- .tooltipklassi.

titolu spag | funzjoni ''

Valur tat-titlu default jekk titlel-attribut ma jkunx preżenti.

Jekk tingħata funzjoni, tissejjaħ bir- thisreferenza tagħha ssettjata għall-element li l-għodda hija mwaħħla miegħu.

grillu spag 'fokus' Kif tiġi attivata tooltip - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manualma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor.
viewport spag | oġġett | funzjoni { selettur: 'korp', padding: 0 }

Iżomm it-tooltip fil-limiti ta' dan l-element. Eżempju: viewport: '#viewport'jew{ "selector": "#viewport", "padding": 0 }

Jekk tingħata funzjoni, tissejjaħ bin-node DOM tal-element triggering bħala l-uniku argument tagħha. Il- thiskuntest huwa ssettjat għall-istanza tooltip.

Attributi tad-dejta għal tooltips individwali

Għażliet għal tooltips individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.

Metodi

$().tooltip(options)

Jwaħħal tooltip handler ma' kollezzjoni ta' elementi.

.tooltip('show')

Tiżvela tooltip ta' element. Jirritorna lil min iċempel qabel ma jkun intwera l-għodda (jiġifieri qabel ma shown.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip. Tooltips b'titli ta' tul żero qatt ma jintwerew.

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

.tooltip('hide')

Jaħbi tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda fil-fatt ġiet moħbija (jiġifieri qabel ma hidden.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Jiddawwar il-tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun intweriet jew moħbija (jiġifieri qabel ma jseħħ l-avveniment shown.bs.tooltipjew ). hidden.bs.tooltipDan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Jaħbi u jeqred it-tooltip ta' element. Tooltips li jużaw id-delega (li huma maħluqa bl -użu tal - selectorgħażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.

$('#element').tooltip('destroy')

Avvenimenti

Tip ta' Avveniment Deskrizzjoni
show.bs.tooltip Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
muri.bs.tooltip Dan l-avveniment jiġi sparat meta l-tooltip tkun saret viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
hide.bs.tooltip Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu tal-istanza jkun ġie msejjaħ.
hidden.bs.tooltip Dan l-avveniment jiġi sparat meta l-tooltip spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS).
inserit.bs.tooltip Dan l-avveniment jiġi sparat wara l- show.bs.tooltipavveniment meta l-mudell tat-tooltip ikun ġie miżjud mad-DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.

Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.

Dipendenza tal-plugin

Popovers jeħtieġu li l- plugin tat-tooltip jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.

Opt-in funzjonalità

Għal raġunijiet ta' prestazzjoni, il-Tooltip u Popover data-apis huma opt-in, li jfisser li trid tinizjalizzahom lilek innifsek .

Mod wieħed biex jiġu inizjalizzati l-popovers kollha fuq paġna jkun li tagħżelhom skont l- data-toggleattribut tagħhom:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Popovers fi gruppi ta 'buttuni, gruppi ta' input, u tabelli jeħtieġu setting speċjali

Meta tuża popovers fuq elementi fi ħdan a .btn-groupjew an .input-group, jew fuq elementi relatati mal-mejda ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ikollok tispeċifika l-għażla container: 'body'(dokumentata hawn taħt) biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u// jew jitlef il-kantunieri fit-tond tiegħu meta jinxtegħel il-popover).

Tippruvax turi popovers fuq elementi moħbija

Invoka$(...).popover('show') meta l-element fil-mira jkun display: none;jikkawża li l-popover jitqiegħed ħażin.

Popovers fuq elementi b'diżabilità jeħtieġu elementi tat-tgeżwir

Biex iżżid popover għal a disabledjew .disabledelement, poġġi l-element ġewwa a <div>u applika l-popover għal dak<div> minflok.

Links b'ħafna linji

Xi drabi trid iżżid popover ma 'hyperlink li jdawwal linji multipli. L-imġiba awtomatika tal-plugin popover hija li tiċċentrah orizzontalment u vertikalment. Żidwhite-space: nowrap; mal-ankri tiegħek biex tevita dan.

Eżempji

Popover statiku

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dritt

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover qiegħ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover telaq

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Erba' direzzjonijiet

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Tkeċċi fuq ikklikkja li jmiss

Uża l- focusgrillu biex tkeċċi popovers fuq il-klikk li jmiss li jagħmel l-utent.

Markup speċifiku meħtieġ għal dismiss-on-next-click

Għal imġieba xierqa bejn il-browser u l-pjattaforma, trid tuża t- <a>tikketta, mhux it- <button>tikketta, u trid tinkludi wkoll l- attributi role="button"u .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Użu

Ippermetti popovers permezz ta' JavaScript:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Isem Tip Default Deskrizzjoni
animazzjoni boolean veru Applika transizzjoni ta' fade CSS għall-popover
kontenitur spag | falza falza

Jwaħħal il-popover ma' element speċifiku. Eżempju: container: 'body'. Din l-għażla hija partikolarment utli peress li tippermettilek li tpoġġi l-popover fil-fluss tad-dokument ħdejn l-element li jqanqal - li jipprevjeni li l-popover ma jvarjax 'il bogħod mill-element li jqanqal waqt it-tieqa tad-daqs mill-ġdid.

kontenut spag | funzjoni ''

Valur tal-kontenut default jekk data-contentl-attribut ma jkunx preżenti.

Jekk tingħata funzjoni, tissejjaħ bir- thisreferenza tagħha ssettjata għall-element li l-popover huwa mwaħħal miegħu.

dewmien numru | oġġett 0

Dewmien li juri u jaħbi l-popover (ms) - ma japplikax għat-tip ta' grillu manwali

Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm biex jaħbu/juri

L-istruttura tal-oġġett hija:delay: { "show": 500, "hide": 100 }

html boolean falza Daħħal HTML fil-popover. Jekk falz, il-metodu ta 'jQuery textse jintuża biex jiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS.
tqegħid spag | funzjoni 'dritt'

Kif tpoġġi l-popover - top | qiegħ | xellug | dritt | auto.
Meta "auto" hija speċifikata, se dinamikament jorjentaw mill-ġdid il-popover. Per eżempju, jekk it-tqegħid huwa "awto xellug", il-popover se juri lejn ix-xellug meta jkun possibbli, inkella se juri dritt.

Meta funzjoni tintuża biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM popover bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- thiskuntest huwa ssettjat għall-istanza popover.

selettur spag falza Jekk jiġi pprovdut selettur, oġġetti popover jiġu delegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti li l-kontenut HTML dinamiku jkollu popovers miżjuda. Ara dan u eżempju informattiv .
mudell spag '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Bażi HTML biex tuża meta toħloq il-popover.

Il-popover's titlese jiġu injettati fil- .popover-title.

Il-popover's contentse jiġu injettati fil- .popover-content.

.arrowse ssir il-vleġġa tal-popover.

L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- .popoverklassi.

titolu spag | funzjoni ''

Valur tat-titlu default jekk titlel-attribut ma jkunx preżenti.

Jekk tingħata funzjoni, tissejjaħ bir- thisreferenza tagħha ssettjata għall-element li l-popover huwa mwaħħal miegħu.

grillu spag 'ikklikkja' Kif jinqabad popover - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manualma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor.
viewport spag | oġġett | funzjoni { selettur: 'korp', padding: 0 }

Iżomm il-popover fil-limiti ta 'dan l-element. Eżempju: viewport: '#viewport'jew{ "selector": "#viewport", "padding": 0 }

Jekk tingħata funzjoni, tissejjaħ bin-node DOM tal-element triggering bħala l-uniku argument tagħha. Il- thiskuntest huwa ssettjat għall-istanza popover.

Attributi tad-dejta għal popovers individwali

Għażliet għal popovers individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.

Metodi

$().popover(options)

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera (jiġifieri qabel ma shown.bs.popoverjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover. Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.

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

.popover('hide')

Jaħbi popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.popoverjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.

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

.popover('toggle')

Jiddawwar il-popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.popoverjew ). hidden.bs.popoverDan huwa meqjus bħala attivazzjoni "manwali" tal-popover.

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

.popover('destroy')

Jaħbi u jeqred il-popover ta' element. Popovers li jużaw id-delega (li huma maħluqa bl -użu tal - selectorgħażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.

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

Avvenimenti

Tip ta' Avveniment Deskrizzjoni
juru.bs.popover Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
muri.bs.popover Dan l-avveniment jiġi sparat meta l-popover ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
hide.bs.popover Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu tal-istanza jkun ġie msejjaħ.
moħbija.bs.popover Dan l-avveniment jiġi sparat meta l-popover ikun spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS).
inserit.bs.popover Dan l-avveniment jiġi sparat wara l- show.bs.popoveravveniment meta l-mudell popover ikun ġie miżjud mad-DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Messaġġi ta' twissija alert.js

Eżempji ta' twissijiet

Żid il-funzjonalità tat-tkeċċija mal-messaġġi kollha ta' twissija b'dan il-plugin.

Meta tuża .closebuttuna, trid tkun l-ewwel tifel .alert-dismissibleu l-ebda kontenut tat-test ma jista' jiġi quddiemha fil-markup.

Użu

Żid biss data-dismiss="alert"mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib. L-għeluq ta' allert ineħħiha mid-DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Biex it-twissijiet tiegħek jużaw l-animazzjoni meta tagħlaq, kun żgur li għandhom l- .fadeu.in diġà applikati għalihom.

Metodi

$().alert()

Jagħmel twissija tisma 'għal avvenimenti ikklikkja fuq elementi dixxendenti li għandhom l- data-dismiss="alert"attribut. (Mhux meħtieġ meta tuża l-awto-inizjalizzazzjoni tad-data-api.)

$().alert('close')

Jagħlaq twissija billi tneħħiha mid-DOM. Jekk il- klassijiet .fadeu .inhuma preżenti fuq l-element, it-twissija tisparixxi qabel ma titneħħa.

Avvenimenti

Il-plugin ta' twissija ta' Bootstrap jesponi ftit avvenimenti biex wieħed iqabbad mal-funzjonalità ta' twissija.

Tip ta' Avveniment Deskrizzjoni
qrib.bs.twissija Dan l-avveniment jispara immedjatament meta closejissejjaħ il-metodu tal-istanza.
magħluqa.bs.alert Dan l-avveniment jiġi sparat meta t-twissija tkun ingħalaq (se jistenna li t-tranżizzjonijiet CSS jitlestew).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttuni button.js

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Kompatibilità bejn il-browser

Firefox jippersisti mill-istati tal-kontroll tal-forma (diżabbiltà u kontroll) tul it-tagħbijiet tal-paġni . Soluzzjoni għal dan huwa l-użu autocomplete="off". Ara l- bug Mozilla #654072 .

Stateful

Żid data-loading-text="Loading..."biex tuża stat tat-tagħbija fuq buttuna.

Din il-karatteristika hija deprecata mill-v3.3.5 u tneħħiet fil-v4.

Uża kwalunkwe stat li tixtieq!

Għall-fini ta 'din id-dimostrazzjoni, qed nużaw data-loading-textu $().button('loading'), iżda dak mhux l-uniku stat li tista' tuża. Ara aktar dwar dan hawn taħt fid- $().button(string)dokumentazzjoni .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Toggle wieħed

Żid data-toggle="button"biex tattiva t-toggling fuq buttuna waħda.

Buttuni pre-toggled bżonn.active uaria-pressed="true"

Għal buttuni pre-toggled, trid iżżid il- .activeklassi u l- aria-pressed="true"attribut mal- buttonyourself.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Checkbox / Radju

Żid data-toggle="buttons"ma' .btn-groupkaxxa ta' kontroll jew inputs tar-radju li jkun fih biex tippermetti t-toggling fl-istili rispettivi tagħhom.

Għażliet magħżula minn qabel jeħtieġu.active

Għal għażliet magħżula minn qabel, trid iżżid il- .activeklassi mal-input's labelyourself.

Stat ivverifikat viżwali aġġornat biss mal-ikklikkja

Jekk l-istat iċċekkjat ta' buttuna ta' checkbox jiġi aġġornat mingħajr ma jispara clickavveniment fuq il-buttuna (eż. permezz <input type="reset">jew permezz ta' l-issettjar tal- checkedproprjetà tal-input), ser ikollok bżonn taqleb il- .activeklassi fuq l-input's labelyourself.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Metodi

$().button('toggle')

Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.

$().button('reset')

Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali. Dan il-metodu huwa asinkronu u jirritorna qabel ma r-resetting fil-fatt tlesta.

$().button(string)

Tibdel it-test għal kwalunkwe stat tat-test definit tad-dejta.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Kollass collapse.js

Plugin flessibbli li juża numru żgħir ta 'klassijiet għal imġieba ta' toggle faċli.

Dipendenza tal-plugin

Il-kollass jeħtieġ li l -plugin tat-tranżizzjonijiet jiġi inkluż fil-verżjoni tiegħek ta' Bootstrap.

Eżempju

Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:

  • .collapsejaħbi l-kontenut
  • .collapsinghija applikata waqt transizzjonijiet
  • .collapse.injuri kontenut

Tista' tuża link bl- hrefattribut, jew buttuna bl- data-targetattribut. Fiż-żewġ każijiet, data-toggle="collapse"huwa meħtieġ.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Eżempju ta' akkordju

Estendi l-imġieba tal-kollass default biex toħloq accordion mal-komponent tal-pannell.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Huwa wkoll possibbli li tpartit .panel-bodys ma .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Agħmel aċċessibbli l-kontrolli tal-espansjoni/kollass

Kun żgur li żżid aria-expandedmal-element ta 'kontroll. Dan l-attribut jiddefinixxi b'mod espliċitu l-istat attwali tal-element kollassabbli għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza simili. Jekk l-element kollassabbli jingħalaq awtomatikament, għandu jkollu valur ta' aria-expanded="false". Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- inklassi, issettja aria-expanded="true"fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut ibbażat fuq jekk l-element kollassabbli infetaħ jew ingħalaqx jew le.

Barra minn hekk, jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-targetattribut qed jipponta lejn idselettur – tista' żżid aria-controlsattribut addizzjonali mal-element ta' kontroll, li jkun fih l id-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.

Użu

Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:

  • .collapsejaħbi l-kontenut
  • .collapse.injuri l-kontenut
  • .collapsingtiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa

Dawn il-klassijiet jistgħu jinstabu fi component-animations.less.

Via attributi tad-data

Żid biss data-toggle="collapse"u a data-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-targetattribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in.

Biex iżżid ġestjoni tal-gruppi bħal accordion ma 'kontroll kollassabbli, żid l-attribut tad-data data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

$('.collapse').collapse()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-parent="".

Isem tip default deskrizzjoni
ġenitur selettur falza Jekk jiġi pprovdut selettur, allura l-elementi kollha kollassabbli taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- panelklassi)
toggle boolean veru Jiddawwar l-element kollassabbli fuq l-invokazzjoni

Metodi

.collapse(options)

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapsejew ).hidden.bs.collapse

.collapse('show')

Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapsejseħħ l-avveniment).

.collapse('hide')

Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapsejseħħ l-avveniment).

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

Tip ta' Avveniment Deskrizzjoni
juru.bs.kollass Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
muri.bs.kollass Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
jaħbi.bs.kollass Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu jkun ġie msejjaħ.
moħbija.bs.kollass Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Komponent ta 'slideshow għaċ-ċikliżmu minn elementi, bħal karużell. Il-karużelli mgħaqqda mhumiex appoġġjati.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Captions fakultattivi

Żid captions mal-pjastri tiegħek faċilment bl- .carousel-captionelement fi kwalunkwe .item. Poġġi kważi kwalunkwe HTML fakultattiv hemmhekk u se jkun allinjat u fformattjat awtomatikament.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Karużelli multipli

Il-karużelli jeħtieġu l-użu ta' idkontenitur fuq l-aktar 'il barra (il- .carousel) biex il-kontrolli tal-karużell jiffunzjonaw kif suppost. Meta żżid karużelli multipli, jew meta tbiddel karużell id, kun żgur li taġġorna l-kontrolli rilevanti.

Via attributi tad-data

Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-slidejaċċetta l-kliem kjavi prevjew next, li jibdel il-pożizzjoni slide relattiva għall-pożizzjoni attwali tagħha. Inkella, uża data-slide-tobiex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-slide-to="2", li jbiddel il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0.

L- data-ride="carousel"attribut jintuża biex jimmarka karużell bħala animazzjoni li jibda mat-tagħbija tal-paġna. Ma jistax jintuża flimkien ma 'inizjalizzazzjoni JavaScript espliċita (superjuri u mhux meħtieġa) tal-istess carousel.

Via JavaScript

Ċempel il-karużell manwalment bi:

$('.carousel').carousel()

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-interval="".

Isem tip default deskrizzjoni
intervall numru 5000 L-ammont ta 'ħin biex tittardja bejn iċ-ċikliżmu ta' oġġett awtomatikament. Jekk falza, il-karużell mhux awtomatikament iċ-ċiklu.
waqfa spag | null "idwar" Jekk issettjat għal "hover", iwaqqaf iċ-ċikliżmu tal-karużell mixgħul mouseenteru jerġa' jibda ċ-ċikliżmu tal-karużell mixgħul mouseleave. Jekk issettjat għal null, iddur fuq il-karużell ma jieqafx.
wrap boolean veru Jekk il-karużell għandux iċ-ċiklu kontinwu jew ikollux waqfiet iebsin.
tastiera boolean veru Jekk il-karużell għandux jirreaġixxi għall-avvenimenti tat-tastiera.

Inizjalizza l-karużell b'għażliet fakultattivi objectu jibda jiċċirkola permezz ta 'oġġetti.

$('.carousel').carousel({
  interval: 2000
})

Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.

Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.

Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa).

Ċikli għall-oġġett preċedenti.

Ċikli għall-oġġett li jmiss.

Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell.

Iż-żewġ avvenimenti għandhom il-proprjetajiet addizzjonali li ġejjin:

  • direction: Id-direzzjoni li fiha l-karużell qed jiżżerżaq ( "left"jew "right").
  • relatedTarget: L-element DOM li qed jiżżerżaq fil-post bħala l-oġġett attiv.

L-avvenimenti kollha tal-karużell jiġu sparati lejn il-karużell innifsu (jiġifieri fil- <div class="carousel">).

Tip ta' Avveniment Deskrizzjoni
slide.bs.carousel Dan l-avveniment jispara immedjatament meta slidejiġi invokat il-metodu tal-istanza.
jiżżerżaq.bs.karużell Dan l-avveniment jiġi sparat meta l-karużell ikun lesta t-transizzjoni tal-islajds tiegħu.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Waħħal affix.js

Eżempju

Il-plugin tat-twaħħil jinxtegħel position: fixed;u jitfi, u jimita l-effett misjub b' position: sticky;. Is-subnavigazzjoni fuq il-lemin hija demo ħaj tal-plugin affix.


Użu

Uża l-plugin tat-twaħħil permezz tal-attributi tad-dejta jew manwalment bil-JavaScript tiegħek stess. Fiż-żewġ sitwazzjonijiet, trid tipprovdi CSS għall-pożizzjonament u l-wisa 'tal-kontenut imwaħħal tiegħek.

Nota: Tużax il-plugin tat-twaħħil fuq element li jinsab f'element relattivament pożizzjonat, bħal kolonna miġbuda jew imbuttata, minħabba bug ta' rendering ta' Safari .

Pożizzjonament permezz CSS

Il-plugin tat-twaħħil jaqleb bejn tliet klassijiet, kull waħda tirrappreżenta stat partikolari: .affix, .affix-top, u .affix-bottom. Int trid tipprovdi l-istili, bl-eċċezzjoni ta ' position: fixed;on .affix, għal dawn il-klassijiet lilek innifsek (indipendenti minn dan il-plugin) biex timmaniġġja l-pożizzjonijiet attwali.

Hawn kif jaħdem il-plugin tal-affiss:

  1. Biex tibda, il-plugin iżid .affix-topbiex jindika li l-element jinsab fl-ogħla pożizzjoni tiegħu. F'dan il-punt l-ebda pożizzjonament CSS mhu meħtieġ.
  2. L-iskrolljar mill-element li trid jitwaħħal għandu jwassal għat-twaħħil attwali. Dan huwa fejn .affixjissostitwixxi .affix-topu jissettja position: fixed;(provdut mis-CSS ta 'Bootstrap).
  3. Jekk jiġi definit offset tal-qiegħ, l-iskrolljar tal-passat għandu jissostitwixxi .affixb' .affix-bottom. Peress li l-kumpensi huma fakultattivi, l-issettjar wieħed jeħtieġ li tissettja s-CSS xierqa. F'dan il-każ, żid position: absolute;meta meħtieġ. Il-plugin juża l-attribut tad-dejta jew l-għażla JavaScript biex jiddetermina fejn għandu jpoġġi l-element minn hemm.

Segwi l-passi ta 'hawn fuq biex issettja s-CSS tiegħek għal waħda mill-għażliet ta' użu hawn taħt.

Via attributi tad-data

Biex iżżid faċilment l-imġieba tat-twaħħil ma 'kwalunkwe element, żid biss data-spy="affix"mal-element li trid tispija fuqu. Uża offsets biex tiddefinixxi meta toggle l-pinning ta 'element.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Via JavaScript

Ċempel il-plugin tal-affiss permezz ta' JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset-top="200".

Isem tip default deskrizzjoni
offset numru | funzjoni | oġġett 10 Pixels li jpattu mill-iskrin meta tikkalkula l-pożizzjoni tal-iscroll. Jekk jiġi pprovdut numru wieħed, l-offset jiġi applikat kemm fid-direzzjonijiet ta 'fuq kif ukoll ta' isfel. Biex tipprovdi offset uniku, ta' isfel u ta' fuq ipprovdi biss oġġett offset: { top: 10 }jew offset: { top: 10, bottom: 5 }. Uża funzjoni meta jkollok bżonn tikkalkula b'mod dinamiku offset.
mira selettur | nodu | jQuery element l- windowoġġett Jispeċifika l-element fil-mira tal-affiss.

Metodi

.affix(options)

Jattiva l-kontenut tiegħek bħala kontenut imwaħħal. Jaċċetta għażliet fakultattivi object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Jikkalkula mill-ġdid l-istat tat-twaħħil ibbażat fuq id-dimensjonijiet, il-pożizzjoni, u l-pożizzjoni tal-iscroll tal-elementi rilevanti. Il -klassijiet .affix, .affix-top, u .affix-bottomhuma miżjuda jew imneħħija mill-kontenut imwaħħal skont l-istat il-ġdid. Dan il-metodu jeħtieġ li jissejjaħ kull meta jinbidlu d-dimensjonijiet tal-kontenut imwaħħal jew l-element fil-mira, biex jiġi żgurat pożizzjoni korretta tal-kontenut imwaħħal.

$('#myAffix').affix('checkPosition')

Avvenimenti

Il-plugin tat-twaħħil ta 'Bootstrap jesponi ftit avvenimenti għall-ganċ fil-funzjonalità tat-twaħħil.

Tip ta' Avveniment Deskrizzjoni
twaħħal.bs.affissa Dan l-avveniment jispara immedjatament qabel ma l-element ikun ġie mwaħħal.
imwaħħal.bs.jwaħħal Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal.
iwaħħal-top.bs.affix Dan l-avveniment jispara immedjatament qabel ma l-element ikun ġie mwaħħal fuq nett.
imwaħħal-top.bs.affiss Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal fuq nett.
twaħħal-qiegħ.bs.affissa Dan l-avveniment jispara immedjatament qabel ma l-element ikun twaħħal fil-qiegħ.
imwaħħal-qiegħ.bs.jwaħħal Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal fil-qiegħ.