Áttekintés

Egyéni vagy összeállított

A beépülő modulok beépíthetők egyenként (a Bootstrap egyes *.jsfájljaival), vagy egyszerre (a bootstrap.jsvagy a kicsinyített fájl használatával bootstrap.min.js).

A lefordított JavaScript használata

Mindkettő bootstrap.jsés bootstrap.min.jsaz összes beépülő modult egyetlen fájlban tartalmazza. Csak egyet tartalmazzon.

Plugin függőségek

Egyes bővítmények és CSS-összetevők más beépülő moduloktól függenek. Ha a beépülő modulokat külön-külön is felveszi, feltétlenül ellenőrizze ezeket a függőségeket a dokumentumokban. Vegye figyelembe azt is, hogy minden beépülő modul a jQuery-től függ (ez azt jelenti, hogy a jQuery-t a beépülő modulok fájlok előtt kell tartalmaznia ). Forduljon hozzánkbower.json , hogy megtudja, mely jQuery verziók támogatottak.

Adatattribútumok

Az összes Bootstrap beépülő modult kizárólag a jelölő API-n keresztül használhatja anélkül, hogy egyetlen sornyi JavaScriptet is írna. Ez a Bootstrap első osztályú API-ja, és a beépülő modul használatakor ez az első szempont.

Ennek ellenére bizonyos helyzetekben kívánatos lehet ezt a funkciót kikapcsolni. Ezért lehetőséget biztosítunk az adatattribútum API letiltására is úgy, hogy megszüntetjük a névterű dokumentum összes eseményét data-api. Ez így néz ki:

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

Alternatív megoldásként egy adott beépülő modul megcélzásához egyszerűen adja meg a beépülő modul nevét névtérként a data-api névtér mellett, így:

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

Csak egy plugin elemenként adatattribútumokon keresztül

Ne használjon több beépülő modul adatattribútumait ugyanazon az elemen. Például egy gombnak nem lehet egyszerre eszköztippje és nem válthat módot. Ennek eléréséhez használjon csomagolóelemet.

Programozott API

Úgy gondoljuk, hogy az összes Bootstrap beépülő modult tisztán a JavaScript API-n keresztül használhatja. Minden nyilvános API egyetlen, láncolható metódus, és visszaadja a gyűjteményt.

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

Minden metódusnak el kell fogadnia egy opcionális opciós objektumot, egy karakterláncot, amely egy adott metódust céloz, vagy semmit (amely alapértelmezett viselkedésű beépülő modult indít):

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

Minden beépülő modul a nyers konstruktorát is megjeleníti egy Constructortulajdonságon: $.fn.popover.Constructor. Ha egy adott bővítménypéldányt szeretne lekérni, kérje le közvetlenül egy elemből: $('[rel="popover"]').data('popover').

Alapbeállítások

A beépülő modul alapértelmezett beállításait módosíthatja a bővítmény Constructor.DEFAULTSobjektumának módosításával:

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

Nincs konfliktus

Néha szükséges a Bootstrap beépülő modulok használata más UI keretrendszerekkel. Ilyen körülmények között időnként előfordulhatnak névtér-ütközések. Ha ez megtörténik, hívhatja azt .noConflicta beépülő modult, amelynek az értékét vissza szeretné állítani.

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

Események

A Bootstrap egyéni eseményeket biztosít a legtöbb plugin egyedi műveletéhez. Általában ezek főnévi igenév és múlttag alakban fordulnak elő – ahol az infinitivus (pl. show) egy esemény elején, múltbeli igenév alakja (pl. shown) pedig egy cselekvés befejezésekor aktiválódik.

A 3.0.0-s verziótól kezdve minden Bootstrap esemény névtérben van.

Minden infinitiv esemény preventDefaultfunkcionalitást biztosít. Ez lehetővé teszi egy művelet végrehajtásának leállítását, mielőtt az elindulna.

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

Verziószámok

VERSIONA Bootstrap jQuery beépülő moduljainak verziója a beépülő modul konstruktorának tulajdonságán keresztül érhető el . Például az eszköztipp beépülő modulhoz:

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

Nincsenek különleges tartalékok, ha a JavaScript le van tiltva

A Bootstrap beépülő moduljai nem esnek vissza különösen kecsesen, ha a JavaScript le van tiltva. Ha ebben az esetben érdekli a felhasználói élmény, használja <noscript>a helyzet elmagyarázásához (és a JavaScript újraengedélyezéséhez) a felhasználóknak, és/vagy adja hozzá saját egyéni tartalékait.

Harmadik féltől származó könyvtárak

A Bootstrap hivatalosan nem támogatja a harmadik fél JavaScript-könyvtárait , mint például a Prototype vagy a jQuery UI. A .noConflictnévteres események ellenére előfordulhatnak kompatibilitási problémák, amelyeket egyedül kell megoldania.

Átmenetek átmeneti.js

Az átmenetekről

Az egyszerű átmeneti effektusok érdekében transition.jsegyszer szerepeljen a többi JS-fájl mellett. Ha a lefordított (vagy kicsinyített) fájlt használod bootstrap.js, akkor ezt nem kell belefoglalnod – már ott van.

Mi van benne

A Transition.js egy alapvető segédeszköz az transitionEndeseményekhez, valamint egy CSS átmeneti emulátor. A többi beépülő modul a CSS átmenet támogatásának ellenőrzésére és a függő átmenetek elkapására használja.

Átmenetek letiltása

Az átmenetek globálisan letilthatók a következő JavaScript-kódrészlet használatával, amelynek a betöltés után kell megjelennie transition.js(vagy bootstrap.js, bootstrap.min.jsaz esettől függően):

$.support.transition = false

Modals modal.js

A modálok egyszerűsített, de rugalmas párbeszédpanelek a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

Több nyitott modális nem támogatott

Ügyeljen arra, hogy ne nyisson ki egy modált, amíg egy másik látható. Egynél több modális megjelenítéséhez egyéni kód szükséges.

Modális jelölés elhelyezése

Mindig próbálja a modál HTML-kódját a dokumentum legfelső pozíciójában elhelyezni, hogy elkerülje, hogy más összetevők befolyásolják a modál megjelenését és/vagy működését.

A mobileszközökre vonatkozó figyelmeztetések

Vannak bizonyos figyelmeztetések a modálisok mobileszközökön történő használatával kapcsolatban. A részletekért tekintse meg a böngésző támogatási dokumentumait .

A HTML5 szemantikája meghatározása miatt a autofocusHTML attribútumnak nincs hatása a Bootstrap modálisra. Ugyanezen hatás eléréséhez használjon néhány egyéni JavaScriptet:

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

Példák

Statikus példa

Renderelt modális fejléccel, törzstel és a láblécben található műveletek halmazával.

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

Élő demo

Az alábbi gombra kattintva válthat át egy modált JavaScript segítségével. Lecsúszik, és elhalványul az oldal tetejétől.

<!-- 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>

Tegye elérhetővé a modálisokat

Ügyeljen arra, hogy a modális címre hivatkozva adja hozzá a role="dialog"és -t a , és önmagához.aria-labelledby="...".modalrole="document".modal-dialog

Ezenkívül megadhatja a modális párbeszédpanel leírását a aria-describedbyon .modal.

YouTube-videók beágyazása

A YouTube-videók modálisba ágyazásához további JavaScriptre van szükség, nem a Bootstrapban a lejátszás automatikus leállításához és még sok máshoz. További információért tekintse meg ezt a hasznos Stack Overflow bejegyzést .

Választható méretek

A modáloknak két választható mérete van, amelyek módosító osztályokon keresztül érhetők el, amelyeket egy .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>

Animáció eltávolítása

Az olyan modálisok esetében, amelyek egyszerűen megjelennek, nem pedig elhalványulnak, távolítsa el az .fadeosztályt a modális jelölésből.

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

A rácsrendszer használata

A Bootstrap rácsrendszer előnyeinek kihasználásához egy modálison belül csak helyezze .rowbe az s -t a .modal-bodyrendszerbe, majd használja a normál grid rendszerosztályokat.

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

Van egy csomó gombja, amelyek mindegyike ugyanazt a módot indítja el, csak kissé eltérő tartalommal? Használja a event.relatedTargetés HTML - data-*attribútumokat (esetleg a jQuery segítségével ) a modál tartalmának megváltoztatásához attól függően, hogy melyik gombra kattintott. Tekintse meg a Modal Events dokumentumait a részletekért relatedTarget,

...további gombok...
<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)
})

Használat

A modális beépülő modul igény szerint átkapcsolja a rejtett tartalmat adatattribútumok vagy JavaScript segítségével. Ezenkívül hozzáadja .modal-openaz <body>alapértelmezett görgetési viselkedés felülbírálásához, és létrehoz .modal-backdropegy kattintási területet a megjelenített modálok elvetéséhez, ha a modálison kívül kattintanak.

Adatattribútumokon keresztül

Aktiválja a modált JavaScript írása nélkül. Állítsa data-toggle="modal"be a vezérlőelemet, például egy gombot, a data-target="#foo"vagy a gombbal együtt, href="#foo"hogy egy adott módot célozzon a váltáshoz.

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

JavaScripten keresztül

Hívjon egy modált azonosítóval myModalegyetlen soros JavaScripttel:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-backdrop="".

Név típus alapértelmezett leírás
háttér logikai érték vagy a karakterlánc'static' igaz Modális háttérelemet tartalmaz. Alternatív megoldásként staticolyan hátteret adjon meg, amely nem zárja be a modált kattintásra.
billentyűzet logikai érték igaz Bezárja a modált az Escape billentyű megnyomásakor
előadás logikai érték igaz Megjeleníti a modált inicializáláskor.
távoli pálya hamis

Ez a lehetőség a v3.3.0 óta elavult, és a 4-es verzióban eltávolították. Javasoljuk, hogy ehelyett használjon ügyféloldali sablont vagy adat-összerendelési keretrendszert, vagy maga hívja meg a jQuery.load fájlt .

Ha távoli URL-címet ad meg, a tartalom egyszer betöltődik a jQuery loadmetódusával, és beilleszti a .modal-contentdiv-be. Ha a data-api-t használja, alternatív megoldásként használhatja az hrefattribútumot a távoli forrás megadásához. Az alábbiakban látható egy példa erre:

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

Mód

Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object.

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

Manuálisan vált egy módot. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne vagy elrejtve (azaz a shown.bs.modalvagy hidden.bs.modalesemény bekövetkezte előtt).

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

Manuálisan megnyit egy modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne (azaz az shown.bs.modalesemény bekövetkezte előtt).

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

Manuálisan elrejti a modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen el lett volna rejtve (azaz az hidden.bs.modalesemény bekövetkezte előtt).

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

Újra beállítja a modális helyzetét, hogy ellensúlyozza a görgetősávot, ha megjelenne, amitől a modális balra ugrik.

Csak akkor szükséges, ha a modális magassága nyitva van.

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

Események

A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz.

Minden modális esemény magára a modálisra (azaz a <div class="modal">)-ra kerül.

Esemény típus Leírás
show.bs.modal Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor. Ha kattintás okozza, a kattintott elem relatedTargetaz esemény tulajdonságaként elérhető.
látható.bs.modal Ez az esemény akkor indul el, amikor a modális láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek). Ha kattintás okozza, a kattintott elem relatedTargetaz esemény tulajdonságaként elérhető.
elrejteni.bs.modal Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.modal Ez az esemény akkor indul el, amikor a modális elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését).
loaded.bs.modal remoteEz az esemény akkor aktiválódik, amikor a modális az opció használatával tartalmat töltött be .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Legördülő menük dropdown.js

Ezzel az egyszerű bővítménnyel szinte bármihez hozzáadhat legördülő menüket, beleértve a navigációs sávot, a lapokat és a tablettákat.

Egy navigációs sávon belül

Tablettákon belül

Adatattribútumokon vagy JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menük) az .openosztály átváltásával a szülőlistaelemen.

Mobileszközökön a legördülő menü megnyitása egy .dropdown-backdropkoppintási területet ad hozzá a legördülő menük bezárásához, amikor a menün kívül koppint, ami a megfelelő iOS-támogatás feltétele. Ez azt jelenti, hogy a nyitott legördülő menüről egy másik legördülő menüre váltáshoz extra koppintás szükséges a mobilon.

Megjegyzés: Az data-toggle="dropdown"attribútumra támaszkodik a legördülő menük alkalmazásszintű bezárásához, ezért célszerű mindig használni.

Adatattribútumokon keresztül

Hozzáadás data-toggle="dropdown"hivatkozáshoz vagy gombhoz a legördülő menü váltásához.

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

Ha az URL-eket érintetlenül szeretné megőrizni a linkgombokkal, használja az data-targetattribútumot a helyett 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>

JavaScripten keresztül

A legördülő menük meghívása JavaScripten keresztül:

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

data-toggle="dropdown"továbbra is szükséges

Függetlenül attól, hogy JavaScript-en keresztül hívja-e meg a legördülő menüt, vagy inkább a data-api-t használja, data-toggle="dropdown"mindig jelen kell lennie a legördülő menü trigger elemén.

Egyik sem

Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét.

Minden legördülő esemény a .dropdown-menuszülőelemnél aktiválódik.

Minden legördülő eseménynek van egy relatedTargettulajdonsága, amelynek értéke a kapcsoló horgonyelem.

Esemény típus Leírás
show.bs.legördülő menü Ez az esemény azonnal aktiválódik, amikor a show példány metódus meghívódik.
megjelenített.bs.legördülő menü Ez az esemény akkor aktiválódik, amikor a legördülő menü láthatóvá vált a felhasználó számára (megvárja a CSS-átmenetek befejezését).
hide.bs.legördülő menü Ez az esemény azonnal aktiválódik, amikor a példány elrejtése metódus meghívásra került.
rejtett.bs.legördülő menü Ez az esemény akkor aktiválódik, amikor a legördülő menü elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Példa a navigációs sávban

A ScrollSpy beépülő modul a navigációs célok automatikus frissítésére szolgál a görgetés pozíciója alapján. Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő alelemek is kiemelve lesznek.

@zsír

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, mielőtt elfogytak volna. Tumblr farmtól asztalig kerékpárjogok bármi. Anim keffiyeh carles kardigán. Velit seitan mcsweeney fotófülkéje 3 wolf moon irure. Cosby pulóver lomo jean rövidnadrág, williamsburg kapucnis pulóver, minim qui valószínűleg még nem hallottál róluk és kardigán vagyonkezelői alap culpa biodízel wes anderson aesthetic. Nihil tetovált accusamus, cred irony biodízel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa bajuszos gördeszka, zsíros fugiat velit vasvillás szakáll. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovált cosby pulóver food truck, mcsweeney quis nem freegan bakelit. Lo-fi wes anderson +1 sartorial. Carles nem esztétikai gyakorlat quis gentrify. Brooklyn adipisicing kézműves sör vice keytar deserunt.

egy

Occaecat commodo aliqua delectus. Fap kézműves sör deserunt gördeszka ea. Lomo kerékpárjogok adipisicing banh mi, velit ea sunt next level locavore egyetlen eredetű kávé magna veniamban. High life id bakelit, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimális futártáska. Cred ex in, fenntartható delectus consectetur fanny pack iphone.

két

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 whatever delectus food truck. Sapiente szintetizátor id guessnda. Locavore sed helvetica klisé irónia, mennydörgő macskák, amiket valószínűleg még nem hallottál róluk consequat kapucnis gluténmentes lo-fi fap aliquip. Labore elit placeat, mielőtt elfogytak volna, Terry richardson proident villásreggeli nesciunt quis cosby pulóver pariatur keffiyeh ut helvetica artisan. Kardigán kézműves sör seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Használat

Bootstrap nav szükséges

A Scrollspy jelenleg egy Bootstrap navigációs komponens használatát igényli az aktív hivatkozások megfelelő kiemeléséhez.

Feloldható azonosító célok szükségesek

A navigációs sáv hivatkozásainak feloldható azonosítócélokkal kell rendelkezniük. Például egy <a href="#home">home</a>meg kell felelnie valaminek a DOM-ban, például <div id="home"></div>.

A nem :visiblecél elemek figyelmen kívül hagyva

A nem :visiblejQuery szerinti célelemek figyelmen kívül maradnak, és a hozzájuk tartozó navigációs elemek soha nem lesznek kiemelve.

Relatív pozicionálást igényel

A megvalósítási módtól függetlenül a scrollspy használatához szükséges a position: relative;kémkedni kívánt elem használata. A legtöbb esetben ez a <body>. Amikor a -tól eltérő elemeket görget <body>, ügyeljen arra, hogy legyen heightbeállítva és overflow-y: scroll;alkalmazva.

Adatattribútumokon keresztül

A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához adja hozzá data-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a <body>). Ezután adja hozzá az attribútumot bármely Bootstrap összetevő data-targetszülőelemének azonosítójával vagy osztályával ..nav

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>

JavaScripten keresztül

Miután hozzáadta position: relative;a CSS-t, hívja meg a scrollspy-t JavaScripten keresztül:

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

Mód

.scrollspy('refresh')

Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset="".

Név típus alapértelmezett leírás
beszámítás szám 10 Felülről eltolandó képpontok a görgetés helyzetének kiszámításakor.

Események

Esemény típus Leírás
activate.bs.scrollspy Ez az esemény akkor indul el, amikor egy új elemet aktivál a scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Váltható lapok tab.js

Példalapok

Adjon hozzá gyors, dinamikus lapfunkciókat a helyi tartalom paneljei közötti váltáshoz, akár legördülő menük segítségével is. A beágyazott lapok nem támogatottak.

Nyers farmer, valószínűleg még nem hallott róluk farmer rövidnadrág, Austin. Nesciunt tofu stumptown aliqua, retro szinti mestertisztítás. Bajusz klisé tempor, williamsburg carles vegán helvetica. Reprehenderit hentes retro keffiyeh Dreamcatcher szinti. Cosby pulóver eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigán amerikai ruházat, hentes 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.

Kibővíti a füles navigációt

Ez a beépülő modul kiterjeszti a füles navigációs összetevőt lapozható területek hozzáadásához.

Használat

Lapozható lapok engedélyezése JavaScript segítségével (minden lapot külön kell aktiválni):

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

Az egyes lapokat többféleképpen is aktiválhatja:

$('#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)

Jelölés

Aktiválhat egy fület vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva data-toggle="tab"vagy data-toggle="pill"egy elemen. Ha hozzáadja a navés nav-tabsosztályokat a laphoz ul, akkor a Bootstrap lapstílus érvényesül , míg a navés nav-pillsosztályok hozzáadásával a tabletta stílust alkalmazza .

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

Fade hatás

A lapok elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .inláthatóvá kell tennie a kezdeti tartalmat.

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

Mód

$().tab

Aktivál egy tabulátor elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban. A fenti példákban a tabulátorok az attribútumokkal <a>rendelkező s-ek .data-toggle="tab"

.tab('show')

Kiválasztja az adott lapot, és megjeleníti a hozzá tartozó tartalmat. Minden más korábban kiválasztott lap kijelölése megszűnik, és a hozzá tartozó tartalom elrejtésre kerül. Visszatér a hívóhoz, mielőtt a lappanel ténylegesen megjelenne (azaz az shown.bs.tabesemény bekövetkezte előtt).

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

Események

Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:

  1. hide.bs.tab(az aktuális aktív lapon)
  2. show.bs.tab(a megjelenítendő lapon)
  3. hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
  4. shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)

Ha még nem volt aktív lap, akkor a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.

Esemény típus Leírás
show.bs.tab Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
show.bs.tab Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
hide.bs.tab Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a event.targetés event.relatedTargetaz aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot.
rejtett.bs.tab Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a event.targetés event.relatedTargetaz előző aktív lapot, illetve az új aktív lapot.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Eszköztippek tooltip.js

A Jason Frame által írt kiváló jQuery.tipsy plugin ihlette; Az eszköztippek egy frissített verzió, amely nem támaszkodik képekre, CSS3-at használ az animációkhoz, és adatattribútumokat a helyi címtároláshoz.

A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.

Példák

Az eszköztippek megtekintéséhez vigye az egérmutatót az alábbi linkekre:

Szűk nadrág következő szintű keffiyeh valószínűleg még nem hallott róluk. Photo Booth szakáll nyers farmer magasnyomású vegán futártáska stumptown. A gazdaságtól az asztalig terjedő seitán, az mcsweeney fixie, fenntartható quinoa 8 bites amerikai ruházata frottír richardson vinyl chambray -vel rendelkezik . Beard stumptown, kardigánok banh mi lomo thundercats. Tofu biodízel williamsburg marfa, négy loko mcsweeney's cleanse vegán chambray. Egy igazán ironikus kézműves , akármilyen keytar , scenester farm-to-table banksy Austin twitter fogantyú freegan cred nyers farmer egyetlen eredetű kávévírus.

Statikus elemleírás

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

Négy irány

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

Feliratkozási funkció

Teljesítmény okokból a Tooltip és a Popover data-apis engedélyezett, vagyis Önnek kell inicializálnia őket .

data-toggleAz oldalon lévő összes eszköztipp inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :

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

Használat

Az eszköztipp beépülő modul igény szerint hoz létre tartalmat és jelöléseket, és alapértelmezés szerint az eszköztippeket a triggerelem után helyezi el.

Az elemleírás aktiválása JavaScripten keresztül:

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

Jelölés

Az eszköztipphez szükséges jelölés csak egy dataattribútum, és titleazon a HTML-elemen, amelyen elemleírást szeretne kapni. Az eszköztippek generált jelölése meglehetősen egyszerű, bár megköveteli a pozíciót (alapértelmezés topszerint a bővítmény állítja be).

<!-- 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>

Többsoros linkek

Néha olyan elemleírást szeretne hozzáadni egy hiperhivatkozáshoz, amely több sort burkol. Az eszköztipp beépülő modul alapértelmezett viselkedése az, hogy vízszintesen és függőlegesen középre állítja. Ennek elkerülése érdekében adjon hozzá white-space: nowrap;a horgonyokhoz.

A gombcsoportokban, beviteli csoportokban és táblázatokban lévő eszköztippek speciális beállítást igényelnek

Ha eszköztippeket használ a vagy a -n belüli elemeken .btn-group, .input-groupvagy a táblázathoz kapcsolódó elemeken ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), meg kell adnia a lehetőséget container: 'body'(lásd alább), hogy elkerülje a nem kívánt mellékhatásokat (például az elem szélesedését és/ vagy elveszíti lekerekített sarkait az eszköztipp aktiválásakor).

Ne próbáljon eszköztippeket megjeleníteni a rejtett elemeken

$(...).tooltip('show')Ha a célelemet hívja meg, akkor display: none;az eszköztipp helytelenül lesz elhelyezve.

Hozzáférhető eszköztippek a billentyűzet és a kisegítő technológiák felhasználóinak

A billentyűzettel navigáló felhasználók és különösen a kisegítő technológiák felhasználói csak a billentyűzetre fókuszálható elemekhez, például hivatkozásokhoz, űrlapvezérlőkhöz vagy tetszőleges tabindex="0"attribútumokkal rendelkező elemekhez adhatnak eszköztippeket.

A letiltott elemekhez tartozó elemleírásokhoz burkolóelemekre van szükség

Ha elemleírást szeretne hozzáadni egy disabledvagy .disabledelemhez, helyezze az elemet a elembe, <div>és alkalmazza az elemleírást arra <div>.

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Név típus Alapértelmezett Leírás
élénkség logikai érték igaz Alkalmazzon CSS áttűnést az eszköztippre
tartály húr | hamis hamis

Hozzáfűzi az elemleírást egy adott elemhez. Példa: container: 'body'. Ez az opció különösen hasznos, mivel lehetővé teszi az eszköztipp elhelyezését a dokumentum folyamában az indítóelem közelében – ami megakadályozza, hogy az eszköztipp elszálljon az indítóelemtől az ablak átméretezése során.

késleltetés szám | tárgy 0

Az eszköztipp megjelenítésének és elrejtésének késleltetése (ms) – nem vonatkozik kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { "show": 500, "hide": 100 }

html logikai érték hamis Illessze be a HTML-kódot az eszköztippbe. Ha hamis, akkor a jQuery textmetódusát fogja használni a tartalom beszúrására a DOM-ba. Használjon szöveget, ha aggódik az XSS-támadások miatt.
elhelyezés húr | funkció 'felül'

Az eszköztipp elhelyezése - felső | alsó | balra | jobbra | auto.
Ha az "auto" van megadva, akkor dinamikusan átirányítja az eszköztippet. Például, ha az elhelyezés „automatikus balra”, az eszköztipp lehetőség szerint balra, ellenkező esetben jobbra jelenik meg.

Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként az eszköztipp DOM-csomópontja, a második argumentuma pedig a kiváltó elem DOM-csomópontja kerül meghívásra. A thiskontextus az eszköztipp példányra van beállítva.

választó húr hamis Ha rendelkezésre áll választó, az eszköztipp objektumok delegálásra kerülnek a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz eszköztippeket adjon hozzá. Lásd ezt és egy tájékoztató példát .
sablon húr '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Az elemleírás létrehozásakor használandó alap HTML.

Az eszköztippeket a titlerendszer befecskendezi a .tooltip-inner.

.tooltip-arrowaz eszköztipp nyila lesz.

A legkülső burkolóelemnek az .tooltiposztálynak kell lennie.

cím húr | funkció ''

Alapértelmezett címérték, ha titleaz attribútum nincs jelen.

Ha adott egy függvény, akkor a program úgy hívja meg, hogy a thishivatkozása arra az elemre van beállítva, amelyhez az eszköztipp kapcsolódik.

ravaszt húr "lebegő fókusz" Az eszköztipp aktiválása – kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. manualnem kombinálható semmilyen más triggerrel.
nézetablak húr | tárgy | funkció { választó: 'test', padding: 0 }

Az elemleírást az elem határain belül tartja. Példa: viewport: '#viewport'vagy{ "selector": "#viewport", "padding": 0 }

Ha egy függvény adott, akkor az egyetlen argumentumként a DOM node kiváltó elemmel kerül meghívásra. A thiskontextus az eszköztipp példányra van beállítva.

Adatattribútumok az egyes elemleírásokhoz

Az egyes eszköztippek beállításai adatattribútumok használatával is megadhatók, a fentebb leírtak szerint.

Mód

$().tooltip(options)

Eszköztipp-kezelőt csatol egy elemgyűjteményhez.

.tooltip('show')

Megjeleníti egy elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelenne (azaz az shown.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető. A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.

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

.tooltip('hide')

Elrejti az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen el lett volna rejtve (azaz az hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.

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

.tooltip('toggle')

Bekapcsolja az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelent vagy elrejtett volna (azaz a shown.bs.tooltipvagy hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.

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

.tooltip('destroy')

Elrejti és megsemmisíti egy elem elemleírását. A delegálást használó eszköztippek (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

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

Események

Esemény típus Leírás
show.bs.tooltip Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
látható.bs.eszközleírás Ez az esemény akkor aktiválódik, amikor az eszköztipp láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek).
elrejteni.bs.eszköztipp Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.eszközleírás Ez az esemény akkor aktiválódik, amikor az eszköztipp el lett rejtve a felhasználó elől (megvárja a CSS-átmenetek befejezését).
beszúrva.bs.eszközleírás Ez az esemény az show.bs.tooltipesemény után indul el, amikor az eszköztipp-sablont hozzáadták a DOM-hoz.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Adjon hozzá kis tartalomfedvényeket, például az iPaden lévőket, bármely másodlagos információ tárolására szolgáló elemhez.

A nulla hosszúságú felugró ablakok soha nem jelennek meg.

Plugin-függőség

A felbukkanáshoz az eszköztipp bővítménynek szerepelnie kell a Bootstrap verziójában.

Feliratkozási funkció

Teljesítmény okokból a Tooltip és a Popover data-apis engedélyezett, vagyis Önnek kell inicializálnia őket .

data-toggleAz oldal összes felugró ablakának inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :

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

A gombcsoportok, beviteli csoportok és táblázatok előugró ablakai speciális beállítást igényelnek

.btn-groupHa felugró ablakokat használ az a vagy an belüli elemeken .input-group, vagy a táblázathoz kapcsolódó elemeken ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), meg kell adnia a lehetőséget container: 'body'(lásd alább), hogy elkerülje a nem kívánt mellékhatásokat (például az elem szélesedését és/ vagy elveszíti lekerekített sarkait, amikor a popover aktiválódik).

Ne próbáljon felugró ablakokat megjeleníteni a rejtett elemeken

Ha $(...).popover('show')a cél elemet display: none;hívja meg, akkor az előugró ablak helytelenül lesz elhelyezve.

A letiltott elemek felbukkanásához burkolóelemekre van szükség

Ha felugró ablakot szeretne hozzáadni egy disabledvagy .disabledelemhez, helyezze az elemet a elembe, <div>és alkalmazza a popovert arra <div>.

Többsoros linkek

Néha szeretne felugró ablakot hozzáadni egy több sort burkoló hivatkozáshoz. A popover beépülő modul alapértelmezett viselkedése az, hogy vízszintesen és függőlegesen középre helyezi. Ennek elkerülése érdekében adjon hozzá white-space: nowrap;a horgonyokhoz.

Példák

Statikus popover

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

Popover felső

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

Popover jobbra

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

Popover alsó

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

Popover elment

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

Élő 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>

Négy irány

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

Elvetés a következő kattintással

Az focuseseményindító segítségével elvetheti a felugró ablakokat a felhasználó következő kattintásakor.

Speciális jelölés szükséges a következő kattintáskor történő elvetéshez

A megfelelő, több böngésző és platform közötti viselkedés érdekében a címkét kell használnia <a>, nem a <button>címkét, és meg kell adnia a role="button"és tabindexattribútumokat is.

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

Használat

Előugró ablakok engedélyezése JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Név típus Alapértelmezett Leírás
élénkség logikai érték igaz Alkalmazzon CSS-eltolási átmenetet az előugró ablakra
tartály húr | hamis hamis

Egy adott elemhez fűzi az előugró ablakot. Példa: container: 'body'. Ez az opció különösen hasznos, mivel lehetővé teszi, hogy a felugró ablakot a dokumentum folyamában az indítóelem közelében helyezze el – ami megakadályozza, hogy az ablak átméretezése során az előugró elemtől távolodjon.

tartalom húr | funkció ''

Alapértelmezett tartalomérték, ha data-contentaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.

késleltetés szám | tárgy 0

A felugró ablak megjelenítésének és elrejtésének késleltetése (ms) – nem vonatkozik a kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { "show": 500, "hide": 100 }

html logikai érték hamis Szúrjon be HTML-t a felugró ablakba. Ha hamis, akkor a jQuery textmetódusát fogja használni a tartalom beszúrására a DOM-ba. Használjon szöveget, ha aggódik az XSS-támadások miatt.
elhelyezés húr | funkció 'jobb'

Hogyan helyezzük el a felugró ablakot - top | alsó | balra | jobbra | auto.
Ha az "auto" van megadva, akkor dinamikusan átirányítja a felugró ablakot. Például, ha az elhelyezés "automatikus balra", a felugró ablak lehetőség szerint balra, ellenkező esetben jobbra jelenik meg.

Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként a popover DOM-csomópontot, másodikként pedig a DOM-csomópont kiváltó elemet hívja meg. A thiskontextus a popover példányra van állítva.

választó húr hamis Ha rendelkezésre áll választó, a felugró objektumok delegálódnak a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz felugró ablakokat adjanak hozzá. Lásd ezt és egy tájékoztató példát .
sablon húr '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

A popover létrehozásakor használandó alap HTML.

A popovert titlea .popover-title.

A popovert contenta .popover-content.

.arrowlesz a popover nyila.

A legkülső burkolóelemnek az .popoverosztálynak kell lennie.

cím húr | funkció ''

Alapértelmezett címérték, ha titleaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.

ravaszt húr 'kattint' Hogyan történik a popover aktiválása - kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. manualnem kombinálható semmilyen más triggerrel.
nézetablak húr | tárgy | funkció { választó: 'test', padding: 0 }

Az előugró ablakot az elem határain belül tartja. Példa: viewport: '#viewport'vagy{ "selector": "#viewport", "padding": 0 }

Ha egy függvény adott, akkor az egyetlen argumentumként a DOM node kiváltó elemmel kerül meghívásra. A thiskontextus a popover példányra van állítva.

Adatattribútumok az egyes felugró ablakokhoz

Az egyes felugró ablakok beállításai az adatattribútumok használatával is megadhatók, a fentiek szerint.

Mód

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne (azaz az shown.bs.popoveresemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető. A nulla hosszúságú felugró ablakok soha nem jelennek meg.

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

.popover('hide')

Elrejti egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen el lett volna rejtve (azaz az hidden.bs.popoveresemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető.

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

.popover('toggle')

Bekapcsolja az elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne vagy elrejtésre kerülne (azaz a shown.bs.popovervagy hidden.bs.popoveresemény bekövetkezése előtt). Ez a popover "kézi" kiváltásának tekinthető.

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

.popover('destroy')

Elrejti és megsemmisíti egy elem felbukkanását. A delegálást használó felugró ablakok (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

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

Események

Esemény típus Leírás
show.bs.popover Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
mutatott.bs.popover Ez az esemény akkor indul el, amikor a popover láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek).
elrejteni.bs.popover Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.popover Ez az esemény akkor indul el, amikor a popover elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését).
beszúrva.bs.popover Ez az esemény az show.bs.popoveresemény után indul el, amikor a popover sablont hozzáadták a DOM-hoz.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Figyelmeztető üzenetek alert.js

Példa figyelmeztetések

Adja hozzá az elvetés funkciót az összes figyelmeztető üzenethez ezzel a bővítménnyel.

A .closegomb használatakor annak az első gyermeknek kell lennie, .alert-dismissibleés nem kerülhet szöveges tartalom elé a jelölésben.

Használat

Csak adja hozzá data-dismiss="alert"a bezárás gombot, hogy automatikusan riasztási bezárási funkciót adjon. A riasztás bezárása eltávolítja a DOM-ból.

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

Ha azt szeretné, hogy a riasztások bezáráskor animációt használjanak, győződjön meg arról, hogy a .fadeés .inosztályok már vonatkoznak rájuk.

Mód

$().alert()

data-dismiss="alert"Figyelmeztetést tesz az attribútummal rendelkező leszármazott elemek kattintási eseményeire . (Nem szükséges a data-api automatikus inicializálása esetén.)

$().alert('close')

Bezár egy riasztást a DOM-ból való eltávolításával. Ha a .fadeés .inosztályok jelen vannak az elemen, a riasztás elhalványul, mielőtt eltávolítaná.

Események

A Bootstrap riasztási beépülő modulja felfed néhány eseményt a riasztási funkciókhoz való csatlakozáshoz.

Esemény típus Leírás
close.bs.alert Ez az esemény azonnal aktiválódik a closepéldánymetódus meghívásakor.
zárt.bs.figyelmeztetés Ez az esemény akkor indul el, amikor a riasztást lezárták (megvárja a CSS-átmenetek befejezését).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Gombok button.js

Többet tehet a gombokkal. Vezérlő gombállapotokat vagy gombcsoportokat hozhat létre több összetevőhöz, például eszköztárhoz.

Állítólagos

Hozzáadás data-loading-text="Loading..."a gomb betöltési állapotának használatához.

Ez a funkció a v3.3.5 óta elavult, és a 4-es verzióban eltávolították.

Használja a kívánt állapotot!

A bemutató kedvéért a és -t használjuk data-loading-text, $().button('loading')de nem ez az egyetlen állapot, amelyet használhat. Erről bővebben lentebb a $().button(string)dokumentációban olvashat .

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

Egyetlen kapcsoló

Hozzáadás data-toggle="button"az egyetlen gombon történő váltás aktiválásához.

Az előre kapcsolt gombokhoz .activeésaria-pressed="true"

Az előre váltott gombok esetén hozzá kell adnia az .activeosztályt és az aria-pressed="true"attribútumot a buttonsaját magadhoz.

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

Jelölőnégyzet / Rádió

Adjon data-toggle="buttons"hozzá egy .btn-groupjelölőnégyzetet vagy rádióbemeneteket a megfelelő stílusok közötti váltáshoz.

Előre kiválasztott opciókra van szükség.active

Az előre kiválasztott opciók esetén az .activeosztályt saját magának kell hozzáadnia a bemenethez label.

A vizuálisan ellenőrzött állapot csak kattintásra frissül

Ha egy jelölőnégyzet gomb bejelölt állapota frissítésre kerül anélkül, hogy clickeseményt aktiválna a gombon (pl . a bemenet tulajdonságának <input type="reset">beállításán keresztül vagy via checked), akkor saját magának kell átkapcsolnia az .activeosztályt a bemeneten label.

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

Mód

$().button('toggle')

Bekapcsolja a push állapotot. Azt a látszatot kölcsönzi a gombnak, mintha aktiválva lett volna.

$().button('reset')

Visszaállítja a gomb állapotát – a szöveget eredeti szövegre cseréli. Ez a módszer aszinkron, és a visszaállítás tényleges befejezése előtt tér vissza.

$().button(string)

Lecseréli a szöveget bármely adatban meghatározott szövegállapotra.

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

Collapse collapse.js

Rugalmas bővítmény, amely maroknyi osztályt használ az egyszerű váltási viselkedés érdekében.

Plugin-függőség

Az összecsukáshoz az átmenetek beépülő modulnak szerepelnie kell a Bootstrap verziójában.

Példa

Kattintson az alábbi gombokra egy másik elem megjelenítéséhez és elrejtéséhez osztálymódosításokon keresztül:

  • .collapsetartalmat rejt
  • .collapsingátmenetek során alkalmazzák
  • .collapse.intartalmat mutat

Használhat hivatkozást az hrefattribútumhoz, vagy gombot az data-targetattribútumhoz. Mindkét esetben data-toggle="collapse"kötelező.

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>

Példa harmonika

Az alapértelmezett összecsukási viselkedés kiterjesztése harmonika létrehozásához a panel összetevővel.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson és tintahal. 3 wolf moon officia aute, non cupidatat gördeszka dolor villásreggeli. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintahal egyeredetű kávé nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegán kivételes hentes vice lomo. Leggings occaecat kézműves sör farmtól asztalig, nyers farmer esztétikus szintetizátor, valószínűleg még nem hallott róluk accusamus labore fenntartható 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>

Lehetőség van az .panel-bodys-t .list-groups-re cserélni.

  • Bootply
  • One itmus ac facilin
  • Second eros

Tegye elérhetővé a kibontási/összecsukási vezérlőket

Feltétlenül adja hozzá aria-expandeda vezérlőelemet. Ez az attribútum kifejezetten meghatározza az összecsukható elem aktuális állapotát a képernyőolvasók és hasonló kisegítő technológiák számára. Ha az összecsukható elem alapértelmezés szerint be van zárva, akkor értékének aria-expanded="false". Ha az összecsukható elemet alapértelmezés szerint nyitottnak állította be az inosztály használatával, aria-expanded="true"akkor inkább a vezérlőn állítsa be. A beépülő modul automatikusan átkapcsolja ezt az attribútumot attól függően, hogy az összecsukható elemet megnyitották-e vagy sem.

Ezenkívül, ha a vezérlőelem egyetlen összecsukható elemet céloz meg – azaz az data-targetattribútum egy idszelektorra mutat –, hozzáadhat egy további aria-controlsattribútumot a vezérlőelemhez, amely tartalmazza idaz összecsukható elemet. A modern képernyőolvasók és a hasonló kisegítő technológiák ezt az attribútumot használják fel, hogy további parancsikonokat biztosítsanak a felhasználóknak, amelyekkel közvetlenül az összecsukható elemhez navigálhatnak.

Használat

A collapse plugin néhány osztályt használ a nehéz emelés kezelésére:

  • .collapseelrejti a tartalmat
  • .collapse.inmutatja a tartalmat
  • .collapsinghozzáadódik az átmenet megkezdésekor, és eltávolítja, amikor befejeződik

Ezek az osztályok itt találhatók component-animations.less.

Adatattribútumokon keresztül

Csak adja hozzá az elemhez data-toggle="collapse"és az data-targeta-t, hogy automatikusan hozzárendelje az összecsukható elem vezérlését. Az data-targetattribútum elfogad egy CSS-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt in.

Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható vezérlőhöz, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

$('.collapse').collapse()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-parent="".

Név típus alapértelmezett leírás
szülő választó hamis Ha van választó, akkor a megadott szülő alatti összes összecsukható elem bezárul, amikor ez az összecsukható elem megjelenik. (hasonlóan a hagyományos harmonika viselkedéshez - ez panelosztályfüggő)
kapcsolót logikai érték igaz Bekapcsolja az összecsukható elemet híváskor

Mód

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

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

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne vagy elrejtődne (azaz mielőtt a shown.bs.collapsevagy hidden.bs.collapseesemény bekövetkezne).

.collapse('show')

Összecsukható elemet jelenít meg. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne (azaz az shown.bs.collapseesemény bekövetkezte előtt).

.collapse('hide')

Elrejti az összecsukható elemet. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen el lett volna rejtve (azaz az hidden.bs.collapseesemény bekövetkezte előtt).

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

Esemény típus Leírás
show.bs.collapse Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
látható.bs.összeomlás Ez az esemény akkor aktiválódik, amikor egy összecsukott elem láthatóvá lett a felhasználó számára (megvárja a CSS-átmenetek befejezését).
hide.bs.collapse Ez az esemény azonnal aktiválódik, amikor a hidemetódus meghívásra került.
rejtett.bs.összeomlás Ez az esemény akkor aktiválódik, amikor egy összecsukott elemet elrejtettek a felhasználó elől (megvárja a CSS-átmenetek befejezését).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Diavetítés-összetevő az elemek közötti kerékpározáshoz, például egy körhinta. A beágyazott körhinta nem támogatott.

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

Választható feliratok

Egyszerűen adhat feliratokat diákjaihoz a .carousel-captiontetszőleges elemen belül .item. Helyezzen el szinte bármilyen opcionális HTML-t, és a rendszer automatikusan igazítja és formázza.

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

Több körhinta

A körhinta vezérlőinek megfelelő működéséhez ida legkülső tartályon (a ) kell használni . .carouselHa több körhintat ad hozzá, vagy ha módosít egy körhintat id, ne felejtse el frissíteni a megfelelő vezérlőket.

Adatattribútumokon keresztül

Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. data-slideelfogadja a prevvagy kulcsszavakat next, amely megváltoztatja a dia helyzetét az aktuális pozícióhoz képest. Alternatív megoldásként használja data-slide-toa nyers diaindexet a körhintahoz data-slide-to="2", amely eltolja a dia pozícióját egy adott indexre, kezdve a -val 0.

Az data-ride="carousel"attribútum a körhinta animációsként való megjelölésére szolgál az oldal betöltésével kezdődően. Nem használható ugyanazon körhinta (redundáns és szükségtelen) explicit JavaScript inicializálásával együtt.

JavaScripten keresztül

Körhinta kézi hívása a következőkkel:

$('.carousel').carousel()

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-interval="".

Név típus alapértelmezett leírás
intervallum szám 5000 Az a késleltetési idő, amely eltelik egy tétel automatikus ciklusba állítása között. Ha hamis, a körhinta nem forog automatikusan.
szünet húr | nulla "lebeg" Ha ez a beállítás "hover", szünetelteti a körhinta forgását, mouseenterés bekapcsolva folytatja a körhinta forgását mouseleave. Ha értékre van állítva null, az egérrel a körhinta fölé mozgatva nem szünetelteti azt.
betakar logikai érték igaz Függetlenül attól, hogy a körhinta folyamatosan forog-e, vagy keményen kell-e megállnia.
billentyűzet logikai érték igaz A körhinta reagáljon-e a billentyűzet eseményeire.

Inicializálja a körhinta egy opcionális opcióval object, és elkezdi az elemek közötti kerékpározást.

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

Balról jobbra körbejárja a körhinta elemeit.

Megakadályozza, hogy a körhinta az elemek között mozogjon.

A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz).

Az előző elemre vált.

Ugrás a következő elemre.

A Bootstrap körhinta osztálya két eseményt tesz közzé a körhinta funkcióihoz való kapcsolódáshoz.

Mindkét esemény a következő további tulajdonságokkal rendelkezik:

  • direction: A körhinta csúszási iránya ( "left"vagy "right").
  • relatedTarget: Az aktív elemként a helyére csúsztatott DOM-elem.

Minden körhinta esemény magára a körhintara (azaz a <div class="carousel">) indul.

Esemény típus Leírás
slide.bs.carousel Ez az esemény azonnal aktiválódik, amikor a slidepéldánymetódus meghívásra kerül.
csúsztatott.bs.körhinta Ez az esemény akkor aktiválódik, amikor a körhinta befejezte a diaátmenetet.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Példa

Az affix beépülő modul position: fixed;be- és kikapcsol, emulálja a -val talált effektust position: sticky;. A jobb oldali alnavigáció az affix plugin élő bemutatója.


Használat

Használja az affix beépülő modult adatattribútumokon keresztül vagy manuálisan a saját JavaScript használatával. Mindkét esetben meg kell adnia a CSS-t a csatolt tartalom elhelyezéséhez és szélességéhez.

Megjegyzés: A Safari renderelési hibája miatt ne használja az affix beépülő modult olyan elemen, amely viszonylag elhelyezett elemben található, például egy húzott vagy tolt oszlopban .

Helymeghatározás CSS-en keresztül

Az affix plugin három osztály között vált, amelyek mindegyike egy adott állapotot képvisel: .affix, .affix-top, és .affix-bottom. A stílusokat – az position: fixed;on kivételével – .affixsaját magának kell megadnia ezekhez az osztályokhoz (a beépülő modultól függetlenül), hogy kezelje a tényleges pozíciókat.

Az affix beépülő modul a következőképpen működik:

  1. Kezdésként a beépülő modul hozzáadja .affix-top, jelezve, hogy az elem a legfelső pozícióban van. Ezen a ponton nincs szükség CSS pozicionálásra.
  2. A rögzíteni kívánt elem melletti görgetésnek ki kell váltania a tényleges rögzítést. Ez az a hely, ahol .affixlecseréli .affix-topés beállítja position: fixed;(a Bootstrap CSS-je biztosítja).
  3. Ha alsó eltolás van definiálva, akkor annak mögé görgetve helyére kell .affixlépnie .affix-bottom. Mivel az eltolások nem kötelezőek, az egyik beállításához be kell állítani a megfelelő CSS-t. Ebben az esetben adjon hozzá, position: absolute;amikor szükséges. A beépülő modul a data attribútumot vagy a JavaScript beállítást használja annak meghatározására, hogy honnan helyezze el az elemet.

Kövesse a fenti lépéseket a CSS beállításához az alábbi használati lehetőségek bármelyikéhez.

Adatattribútumokon keresztül

A toldalékolási viselkedés egyszerű hozzáadásához bármely elemhez egyszerűen adja hozzá data-spy="affix"azt az elemet, amely után kémkedni szeretne. Használja az eltolásokat annak meghatározására, hogy mikor kell átkapcsolni egy elem rögzítését.

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

JavaScripten keresztül

Hívja meg az affix plugint JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset-top="200".

Név típus alapértelmezett leírás
beszámítás szám | funkció | tárgy 10 A képernyőtől eltolni kívánt képpontok a görgetés helyzetének kiszámításakor. Ha egyetlen számot ad meg, az eltolás felül és alul is érvényesül. Egyedi alsó és felső eltolás biztosításához csak adjon meg egy objektumot offset: { top: 10 }vagy offset: { top: 10, bottom: 5 }. Használjon függvényt, ha dinamikusan kell kiszámítani egy eltolást.
cél választó | csomópont | jQuery elem a windowtárgyat Megadja a toldalék célelemét.

Mód

.affix(options)

A tartalmat csatolt tartalomként aktiválja. Elfogad egy opcionális opciót object.

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

.affix('checkPosition')

Újraszámítja a toldalék állapotát a vonatkozó elemek méretei, helyzete és görgetési pozíciója alapján. A .affix, .affix-top, és .affix-bottomosztályok az új állapotnak megfelelően kerülnek hozzáadásra vagy eltávolításra a hozzáfűzött tartalomhoz. Ezt a módszert minden alkalommal meg kell hívni, amikor a csatolt tartalom vagy a célelem mérete megváltozik, hogy biztosítsa a csatolt tartalom helyes elhelyezését.

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

Események

A Bootstrap affix beépülő modulja felfed néhány eseményt az affix funkcióhoz való csatlakozáshoz.

Esemény típus Leírás
affix.bs.affix Ez az esemény közvetlenül az elem rögzítése előtt aktiválódik.
toldott.bs.affix Ez az esemény az elem rögzítése után indul el.
affix-top.bs.affix Ez az esemény közvetlenül azelőtt aktiválódik, hogy az elem tetejére került volna.
affixed-top.bs.affix Ez az esemény az elem tetejére való rögzítése után indul el.
affix-bottom.bs.affix Ez az esemény közvetlenül azelőtt aktiválódik, hogy az elem alulra lett volna ragasztva.
affixed-bottom.bs.affix Ez az esemény az elem alulra ragasztása után indul el.