Kpɔɖeŋunyagbɔgblɔ

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (azã Bootstrap ƒe *.jsfaɛl ɖekaɖekawo), alo wo katã zi ɖeka (azã bootstrap.jsalo esiwo woɖe ɖe vovo bootstrap.min.js).

JavaScript si woƒo ƒu la zazã

Wo ame evea siaa bootstrap.jskple bootstrap.min.jsplugins katã le faɛl ɖeka me. Ðeka koe nàde eme.

Plugin ƒe nusiwo dzi woanɔ te ɖo

Plugin aɖewo kple CSS ƒe akpa aɖewo nɔa te ɖe plugin bubuwo dzi. Ne ède plugins ɖekaɖeka la, kpɔ egbɔ be yelé ŋku ɖe nusiwo dzi woanɔ te ɖo siawo ŋu le docs me. De dzesii hã be plugins katã nɔ te ɖe jQuery dzi (esia fia be ele be woatsɔ jQuery ade eme do ŋgɔ na plugin ƒe faɛlwo). Kpɔ mía ŋkumebower.json be nàkpɔ jQuery ƒe tɔtrɔ siwo wodo alɔe.

Nyatakaka ƒe nɔnɔmewo

Àteŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to dzeside API la dzi ko evɔ maŋlɔ JavaScript ƒe fli ɖeka pɛ hã o. Esia nye Bootstrap ƒe API gbãtɔ eye ele be wòanye wò gbãtɔ si ŋu nàbu ne èle plugin zãm.

Ne míegblɔe alea la, le nɔnɔme aɖewo me la, ate ŋu anyo be woatsi dɔwɔnu sia. Eyata míena ŋutete hã be míawɔ nyatakaka ƒe nɔnɔme API la nuwɔametɔe to nudzɔdzɔ siwo katã le nuŋlɔɖi si ƒe ŋkɔ dometsotso kple data-api. Esia le abe alea ene:

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

Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:

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

Plugin ɖeka koe le element ɖesiaɖe me to data attributes dzi

Mègazã nyatakaka ƒe nɔnɔmewo tso plugin geɖewo me le element ɖeka dzi o. Le kpɔɖeŋu me, dɔwɔnu ƒe aɖaŋuɖoɖo kple toggle modal siaa mate ŋu anɔ abɔta aɖe si o. Be nàte ŋu awɔ esia la, zã nusi wotsɔ blaa nu.

Ðoɖowɔɖi ƒe API

Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.

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

Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):

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

Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le Constructornunɔamesi aɖe dzi: $.fn.popover.Constructor. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel="popover"]').data('popover').

Ðoɖo siwo woɖo ɖi xoxo

Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.DEFAULTSnu ŋu:

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

Masɔmasɔ aɖeke meli o

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

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

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Tso 3.0.0 dzi la, Bootstrap nudzɔdzɔwo katã ƒe ŋkɔwo le dometsotso me.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefaultdɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme.

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

Version ƒe xexlẽdzesiwo

Woateŋu akpɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to VERSIONkpeɖeŋutɔ ƒe xɔtula ƒe nɔnɔme dzi. Le kpɔɖeŋu me, na dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ la:

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

Fallback tɔxɛ aɖeke meli ne wotu JavaScript o

Bootstrap ƒe plugins medzea anyi ɖe megbe etɔxɛe amenuveve ne JavaScript nye nuwɔametɔ o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.

Ame etɔ̃lia ƒe agbalẽdzraɖoƒewo

Bootstrap medoa alɔ ame etɔ̃lia ƒe JavaScript agbalẽdzraɖoƒewo abe Prototype alo jQuery UI ene le se nu o. Togbɔ be .noConflictnudzɔdzɔwo li eye wotsɔ ŋkɔwo ɖo wo dome hã la, kuxi siwo sɔ kple wo nɔewo ate ŋu anɔ anyi siwo wòle be nàɖɔ ɖo le ɖokuiwò si.

Trɔtrɔwo ƒe tɔtrɔ.js

Ku ɖe tɔtrɔwo ŋu

Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, transition.jstsɔ zi ɖeka kpe ɖe JS faɛl bubuawo ŋu. Ne èle compiled (alo minified) zãm la bootstrap.js, mehiã be nàde esia eme o—ele afima xoxo.

Nusi le eme

Transition.js nye kpeɖeŋutɔ vevi aɖe na transitionEndnudzɔdzɔwo kpakple CSS tɔtrɔ ƒe kpɔɖeŋu. Wozãnɛ to plugin bubuawo dzi tsɔ léa ŋku ɖe CSS ƒe tɔtrɔ ƒe kpekpeɖeŋu ŋu eye wòléa tɔtrɔ siwo le xɔxlɔ̃m.

Tɔtrɔwo ƒe nuwɔametɔnyenye

Woateŋu atɔ te tɔtrɔwo le xexeame katã to JavaScript ƒe akpa si gbɔna zazã me, si wòle be wòava le transition.js(alo bootstrap.jsalo bootstrap.min.js, abe alesi wòle ene) ƒe agba megbe:

$.support.transition = false

Mɔnuwo ƒe nɔnɔmewo modal.js

Modals nye streamlined, gake woateŋu atrɔ asi le, dzeɖoɖo ƒe nyabiasewo kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults.

Womedo alɔ modals geɖe siwo le ʋuʋu ɖi o

Kpɔ egbɔ be yemeʋu modal aɖe esime bubu gakpɔtɔ le dzedzem o. Modal siwo wu ɖeka ɖeɖefia le ɣeyiɣi ɖeka me bia custom code.

Modal markup ƒe ɖoɖowɔwɔ

Dze agbagba ɣesiaɣi be nàda modal ƒe HTML kɔda ɖe teƒe si le dziƒo le wò nuŋlɔɖia me be nàƒo asa na akpa bubu siwo akpɔ ŋusẽ ɖe modal la ƒe dzedzeme kple/alo dɔwɔwɔ dzi.

Asitelefon dzi nuxlɔ̃amewo

Nuxlɔ̃ame aɖewo li ku ɖe modals zazã le asitelefonwo dzi ŋu. Kpɔ míaƒe browser support docs hena numeɖeɖe bubuwo.

Le alesi HTML5 ɖea eƒe gɔmesese gɔmee ta la, autofocusHTML nɔnɔmea mekpɔa ŋusẽ aɖeke ɖe Bootstrap modals dzi o. Be nàkpɔ ŋusẽ ma ke la, zã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu:

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

Kpɔɖeŋuwo

Kpɔɖeŋu si meʋãna o

Modal si woɖe gɔme kple ta, ŋutilã, kple nuwɔna ƒe ƒuƒoƒo le afɔti me.

<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 ƒe wɔwɔfia

Trɔ modal aɖe to JavaScript dzi to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.

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

Na modals nasu amewo si

Kpɔ egbɔ be yetsɔ role="dialog"kple aria-labelledby="...", kpe ɖe modal ƒe tanya ŋu, ɖe .modal, kple role="document"ɖe .modal-dialogeya ŋutɔ ŋu.

Tsɔ kpe ɖe eŋu la, àte ŋu ana wò modal dialog ƒe numeɖeɖe kple aria-describedbyon .modal.

YouTube videowo dede eme

YouTube videowo dede modals me bia JavaScript bubu siwo mele Bootstrap me o be woadzudzɔ ƒoƒo le eɖokui si kple bubuwo. Kpɔ Stack Overflow ƒe nyatakaka sia si kpena ɖe ame ŋu hena nyatakaka bubuwo.

Agbɔsɔsɔme siwo woate ŋu atia

Modals ƒe lolome eve le wo ɖokui si, siwo li to modifier classes dzi be woatsɔ wo ade .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>

Ðe nɔnɔmetata siwo me woɖea nɔnɔmetatawo le la ɖa

Le modals siwo dzena ko tsɔ wu be woadzo le eme be woakpɔ la, ɖe .fadeklass la ɖa le wò modal markup la me.

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

Grid ƒe ɖoɖoa zazã

Be nàwɔ Bootstrap grid system la ŋudɔ le modal aɖe me la, ɖeko nest .rows le la me .modal-bodyeye emegbe nàzã normal grid system classes.

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

Ðe abɔta gbogbo aɖewo le asiwò siwo katã ʋãa modal ɖeka, siwo me nyawo to vovo vie ko? Zã event.relatedTargetkple HTML data-*nɔnɔmewo (ɖewohĩ to jQuery dzi ) tsɔ trɔ asi le modal la me nyawo ŋu le abɔta si dzi wozi nu. Kpɔ Modal Events docs hena numeɖeɖe bubuwo le relatedTarget, .

...butɔnu bubuwo...
<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)
})

Zãzã

Modal plugin la trɔa wò nyatakaka ɣaɣlawo ne wobiae, to nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Egatsɔa kpe .modal-openɖe <body>be woaɖe asi le ʋuʋudedi ƒe nuwɔna si woɖo ɖi ŋu eye wòwɔa a .modal-backdropbe woana teƒe si woate ŋu aƒo nu le hena asiɖeɖe le modals siwo woɖe fia ŋu ne wole ʋuʋum le modal la godo.

To nyatakaka ƒe nɔnɔmewo dzi

Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.

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

To JavaScript dzi

Yɔ modal si si id myModalle kple JavaScript ƒe fli ɖeka:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-backdrop="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
megbenyawo boolean alo kaƒoƒoa'static' nyateƒe Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ staticna megbenya si metua modal le ʋuʋu dzi o.
keyboard dzi boolean ƒe ƒuƒoƒo nyateƒe Doa modal la ne wozi escape key dzi
ɖe fia boolean ƒe ƒuƒoƒo nyateƒe Fia modal la ne wodze egɔme.
si gbɔ dzi dzi afᴐmᴐ alakpa

Tiatia sia megale dɔ wɔm o tso v3.3.0 eye woɖee ɖa le v4 me. Míele aɖaŋu ɖom be nàzã client-side templating alo data binding framework boŋ, alo nàyɔ jQuery.load ɖokuiwò.

Ne wotsɔ URL si le didiƒe na la, woatsɔ nyatakakawo ade eme zi ɖeka to jQuery ƒe loadmɔnu dzi eye woado wo ɖe .modal-contentdiv la me. Ne èle data-api zãm la, àteŋu azã hrefnɔnɔmea atsɔ agblɔ adzɔgetsoƒe. Esia ƒe kpɔɖeŋu aɖe dze le ete:

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

Mɔnuwo

Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

Asitɔtrɔ le modal aɖe ŋu. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.modalalo hidden.bs.modalnudzɔdzɔa nadzɔ).

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

Eʋua modal aɖe kple asi. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ (si nye hafi shown.bs.modalnudzɔdzɔa nadzɔ).

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

Asi ɣlaa modal aɖe. Trɔ yi yɔla gbɔ hafi woɣla modal la ŋutɔŋutɔ (si nye hafi hidden.bs.modalnudzɔdzɔa nadzɔ).

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

Trɔ asi le modal ƒe nɔƒe ŋu be wòatsi tre ɖe agbalẽxatsaxatsa aɖe ŋu nenye be ɖeka adze, si ana modal la nati kpo ayi miame.

Ne modal la ƒe kɔkɔme trɔ esime wòle ʋuʋu ko hafi wòhiã.

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

Nudzɔdzɔwo

Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me.

Woda tu modal nudzɔdzɔwo katã ɖe modal la ŋutɔ dzi (si nye le <div class="modal">).

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.modal Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la. Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene.
woɖe fia.bs.modal Woɖea nudzɔdzɔ sia ɖa ne wowɔ modal la be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene.
ɣla.bs.modal Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
ɣaɣla.bs.modal Woɖea nudzɔdzɔ sia ne wowu modal la ɣla ɖe zãla la nu (alala be CSS ƒe tɔtrɔwo nawu enu).
wotsɔ agba ɖo.bs.modal Woɖea nudzɔdzɔ sia ne modal la tsɔa nyatakakawo dea eme to remotetiatia la zazã me.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Nusiwo wotsɔna ƒua gbe dropdown.js

Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu kple kpeɖeŋutɔ bɔbɔe sia, siwo dometɔ aɖewoe nye navbar, tabs, kple pills.

Le navbar aɖe me

Le atikekuiwo me

To data attributes alo JavaScript dzi la, dropdown plugin la trɔa nya ɣaɣlawo (dropdown menus) to asitɔtrɔ le .openklass la ŋu le dzila ƒe xexlẽdzesi ƒe nu la dzi.

Le asitelefonwo dzi la, ne èʋu nusi le tsia dzi la, etsɔa teƒe aɖe kpena ɖe eŋu .dropdown-backdropabe afisi nàte ŋu aƒo nu le ene hena nuɖuɖu siwo le tsia dzi la nu tsotso ne èle nu ƒom le nuɖuɖua godo, si nye nudidi na iOS ƒe kpekpeɖeŋu nyuitɔ. Esia fia be ne èdi be yeatrɔ tso nu siwo le ʋuʋu ɖi la dzi ayi nu siwo le fli me bubu dzi la, ahiã be nàzi asitelefon dzi geɖe wu.

De dzesii: Woɖoa data-toggle="dropdown"ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔe kpe data-toggle="dropdown"ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.

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

Be URL-wo nanɔ anyi nyuie kple kadodo ƒe abɔtawo la, zã data-targetnɔnɔmea ɖe 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>

To JavaScript dzi

Yɔ nusiwo le fli dzi la to JavaScript dzi:

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

data-toggle="dropdown"wogahiã kokoko

Eɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-toggle="dropdown"ehiã ɣesiaɣi be nànɔ dropdown la ƒe trigger element la dzi.

Ɖeke o

Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu.

Wodaa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu's dzila ƒe akpaa dzi.

Nudzɔdzɔ siwo katã le tsia dzi la ƒe relatedTargetnɔnɔme le wo si, si ƒe asixɔxɔ nye toggling anchor element.

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.dropdown Nudzɔdzɔ sia doa dzo enumake ne woyɔ show instance mɔnu la.
woɖee fia.bs.dropdown Woɖea nudzɔdzɔ sia ne wowɔ dropdown la be wòadze na zãla (alala CSS ƒe tɔtrɔwo, be woawu enu).
ɣla.bs.nu si wotsɔna ƒua gbe Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la.
hidden.bs.wo ƒe ƒuƒoƒo Woɖea nudzɔdzɔ sia ne wowu dropdown la ɣla ɖe zãla la nu (alala CSS ƒe tɔtrɔwo, be woawu enu).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy ƒe agbalẽxatsaxatsa.js

Kpɔɖeŋu le navbar me

ScrollSpy ƒe kpeɖeŋutɔa nye na nav taɖodzinuwo ƒe asitɔtrɔ le eɖokui si le agbalẽxatsaxatsa ƒe nɔƒe nu. Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woade dzesi nu sue siwo le fli dzi la hã.

@da ami

Ad leggings keytar, brunch id nutata kplɔ̃ɖoƒe dolor labore. Pitchfork yr enim lo-fi hafi wodzra qui. Tumblr agble-to-kplɔ̃ kekefɔkpa ƒe gomenɔamesiwo nusianu. Anim keffiyeh carles ƒe lãgbalẽ. Velit seitan mcsweeney ƒe fotoɖeƒe 3 amegãxi ɣleti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ɖewohĩ mèse wo ŋkɔ kpɔ o et cardigan kakaɖedzi ga culpa biodiesel wes anderson atsyɔ̃ɖoɖo. Nihil tattooed accusamus, cred nukokoedonamela biodiesel keffiyeh aɖaŋudɔwɔla ullamco consequat.

@mdo dzi

Veniam marfa ƒe ɖaƒoƒo ƒe ɖaƒoƒo, adipisicing fugiat velit pitchfork ɖa. Freegan ɖa aliqua cupidat mcsweeney ƒe vero. Cupidatat ene loko nisi, ea helvetica nulla carles. Tattooed cosby sweater nuɖuɖu agbatsɔʋu, mcsweeney ƒe quis non freegan vinyl. Lo-fi wes anderson +1 ƒe awudodo. Carles non atsyɔ̃ɖoɖo ƒe kamedede quis gentrify. Brooklyn adipisicing asinudɔwɔwɔ biya vice keytar deserunt.

ɖeka

Occaecat ƒe lãgbalẽ si woyɔna be aliqua delectus. Fap asinudɔwɔwɔ biya deserunt skateboard ea. Lomo keke ƒe gomenɔamesiwo adipisicing banh mi, velit ea sunt kplɔe ɖo dzidzenu locavore ɖeka-dzɔtsoƒe kɔfi le magna veniam. Agbe kɔkɔ id vinyl, echo tsaɖibɔ consequat quis aliquip banh mi pitchfork. Vero VHS est amiɖeɖe ɖe lãme na ame. Consectetur nisi DIY minim dɔla ƒe akplo. Cred ex le, nusiwo li tegbee delectus consectetur fanny pack iphone.

eve

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 dɔla kotoku marfa nusianu delectus nuɖuɖu agbatsɔʋu. Sapiente ƒe wɔwɔme id assumenda. Locavore sed helvetica cliche irony, dziɖegbewo ɖewohĩ mèse nu tso wo ŋu o consequat hoodie gluten-maɖemaɖe lo-fi fap aliquip. Labore elit placeat hafi wodzra vɔ, terry richardson proident brunch nesciunt quis cosby awudziwui pariatur keffiyeh ut helvetica aɖaŋudɔwɔla. Cardigan asinudɔwɔwɔ biya seitan dzadzraɖo velit. VHS chambray laboris nye ɣeyiɣi kpui aɖe ƒe veniam. Anim mollit minim commodo ullamco dziɖegbe ƒe avuwo.

Zãzã

Ebia be woawɔ Bootstrap nav

Scrollspy bia fifia be woazã Bootstrap nav ƒe akpa aɖe hena kadodo siwo le dɔ wɔm ƒe dzesidede nyuie.

ID ƒe taɖodzinu siwo gbɔ woate ŋu akpɔ gbɔ hiã

Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane si le DOM la me abe <div id="home"></div>.

Woŋe :visibleaɖaba ƒu nusiwo menye taɖodzinu o dzi

Woaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo mele :visiblejQuery ƒe nya nu o dzi eye womaɖe woƒe nav nu siwo sɔ ɖe enu la afia gbeɖe o.

Ebia be woaɖo teƒe si sɔ ɖe wo nɔewo nu

Eɖanye dɔwɔwɔ ƒe mɔnu ka kee o, scrollspy bia be woazã position: relative;le element si dzi nèle ŋku lém ɖo la dzi. Zi geɖe la, esiae nye <body>. Ne èle agbalẽ xatsaxatsa le nu bubu <body>siwo heightmenye overflow-y: scroll;.

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-spy="scroll"ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-targetnɔnɔme si me Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass le akpe ɖe eŋu .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>

To JavaScript dzi

Ne ètsɔ position: relative;wò CSS kpe ɖe eŋu vɔ la, yɔ agbalẽxatsaxatsa la to JavaScript dzi:

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

Mɔnuwo

.scrollspy('refresh')

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi 10 Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.

Nudzɔdzɔwo

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
wɔ.bs.agbalẽ xatsaxatsawo Nudzɔdzɔ sia doa dzo ɣesiaɣi si agbalẽxatsaxatsa la va le nu yeye aɖe ŋu dɔ wɔm.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tab siwo woate ŋu atrɔ asi le tab.js

Kpɔɖeŋu tabwo

Tsɔ tab ƒe dɔwɔwɔ kabakaba, si trɔna kpe ɖe eŋu be nàtrɔ to nutoa me nyatakakawo ƒe akpawo dzi, to menu siwo le tsia dzi gɔ̃ hã dzi. Womewɔa dɔ ɖe tab siwo wotsɔ ƒo ƒui dzi o.

Raw denim ɖewohĩ mèse wo ŋkɔ kpɔ o jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth aƒetɔ kɔklɔ. Aɖatsiwo ƒe nyagbɔgblɔ ɣeyiɣi kpui aɖe, williamsburg carles vegan helvetica. Reprehenderit lãwula retro keffiyeh drɔ̃ekukula synth. Cosby ƒe awudziwui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat lãwo ƒe lãmesẽfefewɔlawo ƒe iphone. Seitan aliquip quis cardigan amerikatɔwo ƒe awudodo, lãwula 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.

Keke tabbed ƒe mɔfiamewo ɖe enu

Plugin sia keke tabbed navigation component la ɖe enu be wòatsɔ tabbable ƒe teƒewo akpe ɖe eŋu.

Zãzã

Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

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

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

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

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"alo ɖe edzi ko me. data-toggle="pill"Ne ètsɔ navkple nav-tabsƒe klasswo kpe ɖe tab ulla ŋu la, àwɔ Bootstrap ƒe tab ƒe atsyã ŋudɔ , gake ne ètsɔ navkple nav-pillsƒe klasswo kpe ɖe eŋu la, àwɔ dɔ le pill ƒe atsyã ŋu .

<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 ƒe ŋusẽkpɔɖeamedzi

Be nàna tabwo naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .innana nya siwo le gɔmedzedzea me la nadze.

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

$().tab

Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me. Le kpɔɖeŋu siwo le etame me la, tabawo nye <a>s siwo me data-toggle="tab"nɔnɔmewo le.

.tab('show')

Tia tab si wona eye wòaɖe eƒe nya siwo do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe nyatakaka siwo do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tabnudzɔdzɔa nadzɔ).

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

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

  1. hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
  2. show.bs.tab(le tab si woaɖe afia la dzi)
  3. hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
  4. shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tabkple nudzɔdzɔawo ŋu o.hidden.bs.tab

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.tab Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
woɖe fia.bs.tab Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
ɣla.bs.tab la Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome.
ɣaɣla.bs.tab Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Dɔwɔnu ƒe aɖaŋuɖoɖowo tooltip.js

Wotsɔ jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ la ʋãe; Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, zãa CSS3 hena nɔnɔmetatawo, kple data-nɔnɔmewo hena teƒea ƒe tanyawo dzraɖoƒe.

Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.

Kpɔɖeŋuwo

Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:

Tight pants next level keffiyeh ɖewohĩ mèse wo ŋkɔ kpɔ o. Fotoɖeƒe ɖaɖa raw denim letterpress vegan dɔla kotoku stumptown. Agble-to-kplɔ̃ seitan, mcsweeney ƒe fixie si li tegbee quinoa 8-bit american awuwo le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo dziɖegbe ƒe avuwo. Tofu biodiesel williamsburg marfa, ene loko mcsweeney ƒe kɔ vegan chambray. A really ironic artisan whatever keytar , scenester agble-ɖe-kplɔ̃ banksy Austin twitter asi freegan cred raw denim ɖeka-dzɔtsoƒe kɔfi viral.

Static dɔwɔnu ƒe aɖaŋuɖoɖo

Tiatia ene li: etame, ɖusime, ete, kple miame.

Mɔfiame ene

<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 ƒe dɔwɔwɔ

Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt-in, si fia be ele be wò ŋutɔ nàdze wo gɔme .

Mɔ ɖeka si dzi nàto adze dɔwɔnu ƒe aɖaŋuɖoɖowo katã gɔme le axa aɖe dzi enye be nàtia wo ɖe woƒe data-togglenɔnɔme nu:

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

Zãzã

Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔa wɔa nyatakakawo kple dzesidede ne wobiae, eye le gɔmedzedzea me la, etsɔa dɔwɔnu ƒe aɖaŋuɖoɖowo ɖoa woƒe nusi ʋãa ame la megbe.

Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to JavaScript dzi:

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

Dzesidede dzesiwo

Dzesi si hiã na dɔwɔnu ƒe aɖaŋuɖoɖo nye datanɔnɔme aɖe ko eye titlele HTML ƒe akpaa dzi la, èdi be dɔwɔnu ƒe aɖaŋuɖoɖo nanɔ ye si. Dɔwɔnu ƒe dzesi ƒe dzesi si wowɔ la le bɔbɔe vie, togbɔ be ebia teƒe aɖe hã (le gɔmedzedzea me la, woɖoe ɖe topto plugin la dzi).

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

Kadodo siwo me fli geɖe le

Ɣeaɖewoɣi la, àdi be yeatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo aɖe akpe ɖe hyperlink si xatsa fli geɖe ŋu. Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ ƒe nuwɔna gbãtɔ enye be wòatsɔe aɖo titina le tsia dzi kple le tsia dzi. Tsɔ kpe white-space: nowrap;ɖe wò sekewo ŋu be nàƒo asa na esia.

Dɔwɔnu ƒe aɖaŋuɖoɖowo le abɔta ƒe ƒuƒoƒowo, nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo, kple kplɔ̃wo me bia ɖoɖo tɔxɛ aɖe

Ne èle dɔwɔnu ƒe aɖaŋuɖoɖowo zãm le nusiwo le a .btn-groupalo an me ŋu .input-group, alo le nusiwo do ƒome kple kplɔ̃ ŋu ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) la, ahiã be nàgblɔ tiatia la container: 'body'(si woŋlɔ ɖe ete) be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o (abe element la ƒe tsitsi keke ta kple/ alo eƒe dzogoe siwo le goglo la ƒe bu ne woʋu dɔwɔnua ƒe nugbɔ).

Mègadze agbagba be yeaɖe dɔwɔnu ƒe aɖaŋuɖoɖowo afia le nu ɣaɣlawo ŋu o

Yɔyɔ $(...).tooltip('show')ne taɖodzinu ƒe akpaa le display: none;ana dɔwɔnu ƒe aɖaŋuɖoɖoa nanɔ teƒe si mesɔ o.

Dɔwɔnu ƒe aɖaŋuɖoɖo siwo ŋu woate ŋu aɖo na keyboard kple kpekpeɖeŋunamɔ̃ɖaŋununya zãlawo

Le ezãla siwo tsɔa keyboard le mɔ zɔm, eye vevietɔ kpekpeɖeŋunamɔ̃wo zãlawo gome la, ɖeko wòle be nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo akpe ɖe nusiwo ŋu woate ŋu alé ŋku ɖe keyboard ŋu le abe kadodowo, agbalẽvi dzi kpɔkpɔ, alo nu ɖesiaɖe si nèdi si me tabindex="0"nɔnɔme aɖe le ŋu.

Dɔwɔnu ƒe aɖaŋuɖoɖowo le nuwɔametɔwo ƒe akpawo ŋu hiã wrapper elements

Be nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖo akpe ɖe a disabledalo .disabledelement ŋu la, tsɔ element la de a me <div>eye nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa ade ema dzi <div>boŋ.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe Wɔ CSS fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
nugoe me nugoe kaƒoƒo | alakpa alakpa

Tsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa kpe ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: container: 'body'. Tiatia sia ɖea vi ŋutɔ le esi wòɖea mɔ na wò be nàɖo dɔwɔnu ƒe nugbɔ ɖe nuŋlɔɖi ƒe sisi me le nusi te ɖe nusi ʋãa nu ŋu - si axe mɔ na dɔwɔnu ƒe nugbɔ be wòagadzo le nusi ʋãa dɔa gbɔ le fesre ƒe lolome tɔtrɔ me o.

hehe ɖe megbe xexlẽdzesi | nu 0.

Hehe ɖe megbe le dɔwɔnu ƒe aɖaŋuɖoɖo ɖeɖefia kple eɣla ɖe megbe (ms) - meku ɖe asi ƒe ʋuʋu ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { "show": 500, "hide": 100 }

html boolean ƒe ƒuƒoƒo alakpa De HTML dɔwɔnua ƒe aɖaŋuɖoɖoa me. Ne alakpae la, woazã jQuery ƒe textmɔnu atsɔ ade emenyawo DOM la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu.
ɖoɖo ɖe teƒe aɖe kaƒoƒo | wᴐ dᴐ 'dzi'

Alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - ta | ete | miame | ɖusime | auto.
Ne woɖo "auto" la, atrɔ asi le dɔwɔnu ƒe aɖaŋuɖoɖoa ŋu le mɔ si trɔna nu. Le kpɔɖeŋu me, ne ɖoɖo nye "auto left" la, dɔwɔnu ƒe aɖaŋuɖoɖoa adze le miame ne anya wɔ, ne menye nenema o la, adze le ɖusime.

Ne wozã dɔwɔwɔ aɖe tsɔ nya teƒe si woɖoe ɖo la, woyɔnɛ kple dɔwɔnu ƒe dzesi DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye nusi ʋãa nu DOM node abe eƒe evelia ene. Woɖo thisnya siwo ƒo xlãe la ɖe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpɔɖeŋua dzi.

tiatiawɔla ka alakpa Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ naa HTML me nyatakaka siwo trɔna la nate ŋu atsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo akpe ɖe eŋu. Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le .
ƒe nɔnɔmetata ka '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Gɔmeɖoanyi HTML si nàzã ne èle dɔwɔnu ƒe aɖaŋuɖoɖoa wɔm.

Woado dɔwɔnu ƒe aɖaŋuɖoɖoa titleɖe .tooltip-inner.

.tooltip-arrowava zu dɔwɔnua ƒe aŋutrɔ.

Ele be .tooltipklass la nanɔ agbalẽ xatsaxatsa ƒe akpa si le gota wu la si.

tanya kaƒoƒo | wᴐ dᴐ '' .

Tanya ƒe asixɔxɔ gbãtɔ ne titlenɔnɔme mele afima o.

Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe thisnufiameɖoɖo ɖe element si ŋu wotsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa kpe ɖo la ŋu.

daƒe ka 'hover focus'. Alesi woadze dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. Àte ŋu ato nu geɖe siwo aʋã wò la me; tsɔ dometsotso aɖe ma wo dome. manualwomate ŋu atsɔe akpe ɖe nusi aʋã ame bubu aɖeke ŋu o.
nukpɔkpɔ ƒe ʋɔtru kaƒoƒo | nu | wᴐ dᴐ { tiatiawɔla: 'ŋutilã', padding: 0 }

Enaa dɔwɔnu ƒe aɖaŋuɖoɖoa nɔa nu sia ƒe liƒowo me. Kpɔɖeŋu: viewport: '#viewport'alo{ "selector": "#viewport", "padding": 0 }

Ne wotsɔ dɔwɔwɔ aɖe na la, woyɔnɛ kple triggering element DOM node abe eƒe nyaʋiʋli ɖeka kolia ene. Woɖo thisnya siwo ƒo xlãe la ɖe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpɔɖeŋua dzi.

Nyatakaka ƒe nɔnɔmewo na dɔwɔnu ɖekaɖekawo ƒe aɖaŋuɖoɖowo

Woateŋu agblɔ tiatia siwo woawɔ na dɔwɔnu ɖekaɖekawo le mɔ bubu nu to nyatakakawo ƒe nɔnɔmewo zazã me, abe alesi míeɖe eme le etame ene.

Mɔnuwo

$().tooltip(options)

Kpe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe asiléƒe ɖe element ƒe nuƒoƒoƒu ŋu.

.tooltip('show')

Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ (si nye hafi shown.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu. Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.

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

.tooltip('hide')

Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɣla dɔwɔnu ƒe aɖaŋuɖoɖoa ŋutɔŋutɔ (si nye hafi hidden.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.

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

.tooltip('toggle')

Trɔa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.tooltipalo hidden.bs.tooltipnudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.

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

.tooltip('destroy')

Eɣlaa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ. Dɔwɔnu ƒe aɖaŋuɖoɖo siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.

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

Nudzɔdzɔwo

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
show.bs.dɔwɔnu ƒe aɖaŋuɖoɖo Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia.bs.dɔwɔnu ƒe aɖaŋuɖoɖo Woɖea nudzɔdzɔ sia ɖa ne wowɔ dɔwɔnu ƒe aɖaŋuɖoɖoa be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu).
hide.bs.dɔwɔnu ƒe aɖaŋuɖoɖo Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
hidden.bs.dɔwɔnu ƒe aɖaŋuɖoɖo Woɖea nudzɔdzɔ sia ɖa ne dɔwɔnu ƒe aɖaŋuɖoɖoa ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu).
inserted.bs.dɔwɔnu ƒe aɖaŋuɖoɖo Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.tooltipne wotsɔ dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔnɔmetata kpe ɖe DOM ŋu.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers ƒe nyatakakawo popover.js

Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe.

Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.

Plugin ƒe ŋuɖoɖo ɖe eŋu

Popovers bia be dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ nade wò Bootstrap ƒe tɔtrɔ yeyea me.

Opt-in ƒe dɔwɔwɔ

Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt-in, si fia be ele be wò ŋutɔ nàdze wo gɔme .

Mɔ ɖeka si dzi woato adze popovers katã gɔme le axa aɖe dzi enye be woatia wo to woƒe data-togglenɔnɔme nu:

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

Popovers le button groups, input groups, kple tables me bia ɖoɖo tɔxɛ aɖe

Ne èle popovers zãm ɖe nusiwo le a .btn-groupalo an me dzi .input-group, alo le nusiwo do ƒome kple kplɔ̃ dzi ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ahiã be nàgblɔ tiatia la container: 'body'(si woŋlɔ ɖe ete) be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o (abe element la ƒe tsitsi keke ta kple/ alo eƒe dzogoe siwo le goglo la ƒe bu ne wodze popover la gɔme).

Mègadze agbagba be yeaɖe popovers afia le nu ɣaɣlawo dzi o

Yɔyɔ $(...).popover('show')ne taɖodzinu element la le display: none;ana popover la nanɔ teƒe si mesɔ o.

Popovers le nuwɔametɔwo ƒe elements dzi bia wrapper elements

Be nàtsɔ popover akpe ɖe a disabledalo .disabledelement ŋu la, tsɔ element la de a me <div>eye nàtsɔ popover la aɖo ema dzi <div>boŋ.

Kadodo siwo me fli geɖe le

Ɣeaɖewoɣi la, àdi be yeatsɔ popover akpe ɖe hyperlink si xatsa fli geɖe ŋu. Popover ƒe kpeɖeŋutɔ ƒe nuwɔna gbãtɔ enye be wòatsɔe aɖo titina le tsia dzi kple le tsia dzi. Tsɔ kpe white-space: nowrap;ɖe wò sekewo ŋu be nàƒo asa na esia.

Kpɔɖeŋuwo

Popover si meʋãna o

Tiatia ene li: etame, ɖusime, ete, kple miame.

Popover ƒe ta

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover ƒe nyateƒe

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover ƒe gɔme

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover dzo le afima

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Live demo ƒe wɔwɔfia

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

Mɔfiame ene

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

Ðe asi le eŋu le ʋuʋu si kplɔe ɖo me

focustrigger la nàtsɔ aɖe popovers ɖa le click si kplɔe ɖo si zãla la awɔ me.

Dzesi tɔxɛ aɖe hiã na dismiss-ne-next-click

Be nàkpɔ cross-browser kple cross-platform ƒe nuwɔna nyuie la, ele be nàzã <a>tag la, ke menye tag la o <button>, eye ele be nàde role="button"kple tabindexnɔnɔmewo hã eme.

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

Zãzã

Na popovers nawɔ dɔ to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe Wɔ CSS fade ƒe tɔtrɔ ɖe popover la ŋu
nugoe me nugoe kaƒoƒo | alakpa alakpa

Etsɔa popover la kpena ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: container: 'body'. Tiatia sia ɖea vi ŋutɔ le esi wòɖea mɔ na wò be nàɖo popover la ɖe nuŋlɔɖia ƒe sisi me le nusi te ɖe nusi ʋãa nu ŋu - si axe mɔ na popover la be wòagadzo le nusi ʋãa ame gbɔ le fesre ƒe lolome tɔtrɔ me o.

eme nuwo kaƒoƒo | wᴐ dᴐ '' .

Default content value ne data-contentnɔnɔme mele afima o.

Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe thisnufiame ɖoɖo ɖe element si wotsɔ popover la kpe ɖe eŋu la ŋu.

hehe ɖe megbe xexlẽdzesi | nu 0.

Hehe ɖe megbe le popover (ms) ɖeɖefia kple eɣla ɖe megbe - meku ɖe asi trigger ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { "show": 500, "hide": 100 }

html boolean ƒe ƒuƒoƒo alakpa De HTML popover la me. Ne alakpae la, woazã jQuery ƒe textmɔnu atsɔ ade emenyawo DOM la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu.
ɖoɖo ɖe teƒe aɖe kaƒoƒo | wᴐ dᴐ 'nyui'

Ale si woaɖo popover la ɖe ɖoɖo nu - ta | ete | miame | ɖusime | auto.
Ne woɖo "auto" la, atrɔ asi le popover la ŋu le mɔ si trɔna nu. Le kpɔɖeŋu me, ne ɖoɖo nye "auto left" la, popover la adze le miame ne anya wɔ, ne menye nenema o la, adze le ɖusime.

Ne wozã dɔwɔwɔ aɖe tsɔ nya teƒe si woɖoe ɖo la, woyɔnɛ kple popover DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye triggering element DOM node abe eƒe evelia ene. Woɖo thisnya siwo ƒo xlãe ɖe popover ƒe kpɔɖeŋua dzi.

tiatiawɔla ka alakpa Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ popover nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ naa HTML me nyatakaka siwo trɔna la nate ŋu atsɔ popovers akpe ɖe eŋu. Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le .
ƒe nɔnɔmetata ka '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Gɔmeɖoanyi HTML be nàzã ne èle popover la wɔm.

Woado popover titlela ɖe .popover-title.

Woado popover contentla ɖe .popover-content.

.arrowava zu popover la ƒe aŋutrɔ.

Ele be .popoverklass la nanɔ agbalẽ xatsaxatsa ƒe akpa si le gota wu la si.

tanya kaƒoƒo | wᴐ dᴐ '' .

Tanya ƒe asixɔxɔ gbãtɔ ne titlenɔnɔme mele afima o.

Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe thisnufiame ɖoɖo ɖe element si wotsɔ popover la kpe ɖe eŋu la ŋu.

daƒe ka 'zi edzi'. Alesi wodzea popover gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. Àte ŋu ato nu geɖe siwo aʋã wò la me; tsɔ dometsotso aɖe ma wo dome. manualwomate ŋu atsɔe akpe ɖe nusi aʋã ame bubu aɖeke ŋu o.
nukpɔkpɔ ƒe ʋɔtru kaƒoƒo | nu | wᴐ dᴐ { tiatiawɔla: 'ŋutilã', padding: 0 }

Enaa popover la nɔa nu sia ƒe liƒo me. Kpɔɖeŋu: viewport: '#viewport'alo{ "selector": "#viewport", "padding": 0 }

Ne wotsɔ dɔwɔwɔ aɖe na la, woyɔnɛ kple triggering element DOM node abe eƒe nyaʋiʋli ɖeka kolia ene. Woɖo thisnya siwo ƒo xlãe ɖe popover ƒe kpɔɖeŋua dzi.

Data nɔnɔmewo na ame ɖekaɖekawo ƒe popovers

Woateŋu agblɔ tiatia siwo woawɔ na popover ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me, abe alesi woɖe eme le etame ene.

Mɔnuwo

$().popover(options)

Edzea popovers gɔme na element nuƒoƒoƒu.

.popover('show')

Eɖea element aɖe ƒe popover fiana. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ (si nye hafi shown.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu. Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.

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

.popover('hide')

Eɣlaa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɣla popover la ŋutɔŋutɔ (si nye hafi hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.

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

.popover('toggle')

Trɔa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.popoveralo hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.

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

.popover('destroy')

Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ. Popovers siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.

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

Nudzɔdzɔwo

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.popover Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia.bs.popover Woɖea nudzɔdzɔ sia ɖa ne wowɔ popover la be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu).
ɣla.bs.ahedada Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
ɣaɣla.bs.ahedada Woɖea nudzɔdzɔ sia ɖa ne popover la ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu).
wotsɔ de eme.bs.popover Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.popoverne wotsɔ popover ƒe nɔnɔmetata kpe ɖe DOM ŋu.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Nuxlɔ̃ame gbedasiwo alert.js

Kpɔɖeŋu nuxlɔ̃amewo

Tsɔ dismiss dɔwɔwɔ kpe ɖe nuxlɔ̃ame gbedasiwo katã ŋu kple plugin sia.

Ne èle .closeabɔta zãm la, ele be wòanye vi gbãtɔ na .alert-dismissibleeye nuŋɔŋlɔ aɖeke mate ŋu ava do ŋgɔ nɛ le dzesidea me o.

Zãzã

Ðeko nàtsɔe akpe data-dismiss="alert"ɖe wò nutrenu ƒe dzesi ŋu be wòana nuxlɔ̃ame ƒe nutrenu ƒe dɔwɔwɔ le eɖokui si. Ne ètu nuxlɔ̃ame aɖe la, eɖenɛ ɖa le DOM la me.

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

Be wò nuxlɔ̃amewo nazã animation ne wole nuwuwu la, kpɔ egbɔ be wozã .fadekple .inklassawo le wo ŋu xoxo.

Mɔnuwo

$().alert()

Ewɔa nuxlɔ̃ame ɖoa to na ʋuʋu nudzɔdzɔwo le dzidzimeviwo ƒe akpa siwo si data-dismiss="alert"nɔnɔmea le. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)

$().alert('close')

Etua nuxlɔ̃ame aɖe to eɖeɖe le DOM la me. Ne .fadekple .inklasswo le element la dzi la, nuxlɔ̃amea nu ayi hafi woaɖee ɖa.

Nudzɔdzɔwo

Bootstrap ƒe nuxlɔ̃ame plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame dɔwɔwɔ me.

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
close.bs.nuxlɔ̃ame Nudzɔdzɔ sia doa dzo enumake ne woyɔ closekpɔɖeŋu mɔnu la.
wotu.bs.nuxlɔ̃ame Woɖea nudzɔdzɔ sia ne wotu nuxlɔ̃amea (alala be CSS ƒe tɔtrɔwo nawu enu).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Abɔtawo ƒe abɔta.js

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Cross-browser ƒe dɔwɔwɔ ɖekae

Firefox nɔa anyi tso nɔnɔmewo dzi kpɔkpɔ me (nuwɔametɔnyenye kple ŋkuléle ɖe nu ŋu) le axawo ƒe agbawo katã me . Esia gbɔ kpɔnu aɖee nye be woazã autocomplete="off". Kpɔ Mozilla ƒe nugbagbevi #654072 .

Dukɔmevinyenye ƒe nuwɔna

Tsɔ kpe ɖe eŋu data-loading-text="Loading..."be nàzã agbatsɔtsɔ ƒe nɔnɔme le abɔta aɖe dzi.

Wodzudzɔ nɔnɔme sia tso v3.3.5 eye woɖee ɖa le v4 me.

Zã nɔnɔme ɖesiaɖe si nèdi!

Le wɔwɔfia sia ta la, míele data-loading-textkple zãm $().button('loading'), gake menye nɔnɔme ma koe nàte ŋu azã o. Kpɔ nu geɖe tso esia ŋu le ete le $().button(string)nuŋlɔɖiawo me .

<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 ɖeka ƒe tɔtrɔ

Tsɔ kpe ɖe eŋu data-toggle="button"be nàwɔ tɔtrɔ le abɔta ɖeka dzi ŋudɔ.

Do ŋgɔ toggled buttons hiã .activekplearia-pressed="true"

Le abɔta siwo wotrɔ do ŋgɔ gome la, ele be nàtsɔ .activeklass la kple aria-pressed="true"nɔnɔmea akpe ɖe buttonɖokuiwò ŋu.

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

Dzesiwo ƒe Aɖaka / Radio

Tsɔe kpe data-toggle="buttons"ɖe .btn-groupaɖaka si me woŋlɔ nu ɖo alo radio dzi nyawo ŋu be wòana tɔtrɔ le woƒe atsyãwo me nawɔ dɔ.

Tiatia siwo wotia do ŋgɔ hiã.active

Le tiatia siwo nètia do ŋgɔ gome la, ele be wò ŋutɔ nàtsɔ .activeklass la akpe ɖe input la labelŋu.

Visual checked state koe wowɔa yeyee le click dzi

Ne wowɔ dzesideɖaka ƒe abɔta ƒe nɔnɔme si woɖo la yeyee evɔ womada clicknudzɔdzɔ aɖeke ɖe abɔta la dzi o (le kpɔɖeŋu me to <input type="reset">alo to ɖoɖowɔwɔ ɖe checkednyawo tsɔtsɔ de eme ƒe nɔnɔme ŋu dzi), ahiã be wò ŋutɔ nàtrɔ .activeklass la ɖe nyawo tsɔtsɔ de eme la tɔ labeldzi.

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

$().button('toggle')

Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.

$().button('reset')

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ gbãtɔ ŋu. Mɔnu sia nye asynchronous eye wòtrɔna hafi gbugbɔgaɖoɖoa wu enu ŋutɔŋutɔ.

$().button(string)

Trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe nɔnɔme ɖesiaɖe si woɖe fia le nyatakaka me.

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

Kpɔ ɖa collapse.js

Plugin si te ŋu trɔna ɖe nɔnɔmewo ŋu si zãa klass ʋɛ aɖewo hena tɔtrɔ bɔbɔe ƒe nuwɔna.

Plugin ƒe ŋuɖoɖo ɖe eŋu

Collapse bia be woatsɔ transitions plugin la ade wò Bootstrap ƒe tɔtrɔ yeyea me.

Kpɔɖeŋu

Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:

  • .collapseɣlaa nyatakaka siwo le eme
  • .collapsingwozãnɛ le tɔtrɔwo me
  • .collapse.inɖea emenyawo fiana

Àte ŋu azã kadodo si me hrefnɔnɔmea le, alo abɔta si me data-targetnɔnɔmea le. Le go eveawo siaa me la, data-toggle="collapse"wobia tso ame si.

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>

Accordion ƒe kpɔɖeŋu

Keke collapse behavior si woɖo ɖi la ɖe enu be nàwɔ accordion kple panel ƒe akpaa.

Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo 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>

Ateŋu adzɔ hã be woaɖɔli .panel-bodys kple .list-groups.

  • Bootply ƒe ƒuƒoƒo
  • Itmus ɖeka si nye ac facilin
  • Eros evelia

Na kekeɖenu/agbã ƒe dziɖuɖuwo nanye esiwo ŋu woate ŋu aɖo

Kpɔ egbɔ be yetsɔe kpe aria-expandedɖe nusi dzi wokpɔna ŋu. Nɔnɔme sia ɖea nɔnɔme si me nusi woate ŋu agbã la le fifia me tẽe be woatsɔ axe mɔ ɖe nuxlẽlawo kple kpekpeɖeŋunamɔnu mawo tɔgbe nu. Ne wotu nusi woateŋu agbã la le gɔmedzedzea me la, ele be eƒe asixɔxɔ nanye aria-expanded="false". Ne èɖo collapsible element la be wòaʋu le gɔmedzedzea me to inklass la zazã me la, ɖoe aria-expanded="true"ɖe control la dzi boŋ. Plugin la atrɔ nɔnɔme sia le eɖokui si le esi woʋu alo wotu nusi woate ŋu agbã la alo womeʋui o nu.

Gakpe ɖe eŋu la, ne wò dziɖuɖu ƒe akpa aɖe le taɖodzinu ɖom ɖe nu ɖeka si woate ŋu agbã ŋu – i.e. data-targetnɔnɔme la le asi fiam idtiatiawɔla aɖe – àte ŋu atsɔ nɔnɔme bubu akpe aria-controlsɖe dziɖuɖu ƒe akpaa ŋu, si me akpa idsi woate ŋu agbã la ƒe la le. Egbegbe screen readerwo kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu wɔa nɔnɔme sia ŋudɔ tsɔ naa mɔ kpui bubuwo ezãlawo be woazɔ mɔ ayi nusi woate ŋu agbã la ŋutɔ gbɔ tẽ.

Zãzã

Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:

  • .collapseɣlaa emenyawo
  • .collapse.inɖea emenyawo fiana
  • .collapsingwotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enu

Woate ŋu akpɔ klass siawo le component-animations.less.

To nyatakaka ƒe nɔnɔmewo dzi

Ðeko nàtsɔ data-toggle="collapse"kple a akpe data-targetɖe element la ŋu be wòade dɔ asi na element si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-targetxɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee in.

Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe dziɖuɖu si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector". Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

$('.collapse').collapse()

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-parent="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dzila tiatiawɔla alakpa Ne wotsɔ tiatiawɔnu aɖe na la, ekema woatu nusiwo katã woate ŋu agbã le dzila si woɖo la te ne woɖe nu sia si woate ŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna deŋgɔ - esia nɔ te ɖe panelklass la dzi)
trɔ asi le eŋu boolean ƒe ƒuƒoƒo nyateƒe Trɔa nusi woate ŋu agbã la le yɔyɔ dzi

Mɔnuwo

.collapse(options)

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

.collapse('toggle')

Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla ɖe eme. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ alo aɣlae (si nye hafi shown.bs.collapsealo hidden.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('show')

Fia nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ (si nye hafi shown.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('hide')

Eɣlaa nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɣla nusi woateŋu agbã la ŋutɔŋutɔ (si nye hafi hidden.bs.collapsenudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.collapse Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia.bs.collapse Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu).
ɣla.bs.kollapse Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hidemɔnua vɔ.
hidden.bs.wo ƒe ƒuƒoƒo Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel ƒe ʋuƒo.js

Slideshow ƒe akpa aɖe si wotsɔna ƒua du toa nu veviwo me, abe carousel ene. Womedoa alɔ nested carousels o.

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

Nya siwo woŋlɔ ɖe agbalẽa te siwo woate ŋu atia

Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-captionelement si le ɖesiaɖe me .item. Da HTML ɖesiaɖe kloe si nàte ŋu atia la ɖe afima eye wòaɖo eɖokui ɖe ɖoɖo nu ahawɔ ɖoɖo ɖe eŋu.

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

Carousel gbogbo aɖewo

Carousels bia be woazã an idle nugoe si le gota wu (the .carousel) dzi be carousel dziɖunuwo nate ŋu awɔ dɔ nyuie. Ne èle carousel geɖe kpem ɖe eŋu, alo ne èle carousel ƒe id, trɔm la, kpɔ egbɔ be yewɔ asitɔtrɔ le mɔ̃ siwo sɔ ŋu.

To nyatakaka ƒe nɔnɔmewo dzi

Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-slidexɔa nya veviawo prevalo next, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-slide-tonàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-slide-to="2"la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0.

Wozãa data-ride="carousel"nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.

To JavaScript dzi

Yɔ carousel kple asi kple:

$('.carousel').carousel()

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-interval="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dometsotso xexlẽdzesi 5000 ƒe xexlẽme Ɣeyiɣi agbɔsɔsɔme si woatsɔ ahe ɖe megbe le nu aɖe ƒe gasɔdodo le eɖokui si dome. Ne alakpae la, carousel mazɔ le eɖokui si o.
tɔ vie kaƒoƒo | ƒuƒlu "hover" . Ne woɖoe ɖe "hover", tɔ te ʋufɔti la ƒe gasɔdodo ɖe edzi mouseentereye wògadze ʋufɔti la ƒe kekefɔfɔ gɔme le mouseleave. Ne èɖoe ɖe null, la, ne ètsɔe ɖo carousel la dzi la, madzudzɔe o.
bla boolean ƒe ƒuƒoƒo nyateƒe Nenye be ele be carousel la nanɔ gasɔ tsam atraɖii alo be wòatɔ sesĩe.
keyboard dzi boolean ƒe ƒuƒoƒo nyateƒe Nenye be ele be carousel la nawɔ nu ɖe ​​keyboard ƒe nudzɔdzɔwo ŋu.

Edzea carousel la gɔme kple tiatia siwo woate ŋu atia objecteye wòdzea gasɔdodo gɔme to nuawo me.

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

Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.

Exea mɔ na carousel la be wòagazɔ to nuwo me o.

Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array).

Tsitre ɖe nusi do ŋgɔ ŋu.

Tsitre ɖe nu si kplɔe ɖo ŋu.

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me.

Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:

  • direction: Mɔ si dzi carousel la le ʋuʋum ɖo ( "left"alo alo "right").
  • relatedTarget: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nu si le dɔ wɔm ene.

Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">).

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
slide.bs.ʋuʋudedi ƒe ʋuʋudedi Nudzɔdzɔ sia dzona enumake ne woyɔ slidekpɔɖeŋu mɔnu la.
slid.bs.ʋuʋudedi ƒe ʋuʋudedi Wodaa tu nudzɔdzɔ sia ne carousel la wu eƒe slide ƒe tɔtrɔ nu.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Tsɔ affix.js kpe ɖe eŋu

Kpɔɖeŋu

Affix plugin la trɔa asi position: fixed;le eŋu hetsia enu, eye wòsrɔ̃a ŋusẽkpɔɖeamedzi si wokpɔ kple position: sticky;. Subnavigation si le ɖusime la nye affix plugin la ƒe live demo.


Zãzã

Zã affix plugin la to data attributes dzi alo nàtsɔ asi awɔ wò ŋutɔ wò JavaScript. Le nɔnɔme eveawo siaa me la, ele be nàna CSS na wò nyatakaka siwo wotsɔ kpe ɖe eŋu ƒe nɔƒe kple kekeme.

De dzesii: Mègazã affix plugin ɖe element si le element si woɖo ɖe teƒe si sɔ me, abe sɔti si wohe alo wotu ene dzi o, le Safari gɔmeɖeɖe ƒe vodada ta .

Ðoƒe ɖoɖo to CSS dzi

Affix plugin la trɔa asi le hatsotso etɔ̃ dome, eye wo dometɔ ɖesiaɖe tsi tre ɖi na nɔnɔme aɖe koŋ: .affix, .affix-top, kple .affix-bottom. Ele be nàna atsyãawo, negbe position: fixed;on koe mele eme o .affix, na klass siawo wò ŋutɔ (si le eɖokui si tso plugin sia gbɔ) be nàkpɔ nɔƒe ŋutɔŋutɔwo gbɔ.

Alesi affix plugin la wɔa dɔe enye si:

  1. Be nàdze egɔme la, plugin la kpena ɖe eŋu .affix-topbe wòafia be element la le eƒe nɔƒe si le etame wu. Le afisia la, mehiã be woaɖo CSS ƒe nɔƒe aɖeke o.
  2. Ele be ʋuʋu to element si nèdi be woatsɔ akpe ɖe eŋu ŋu la, ele be wòaʋã nusi wotsɔ kpe ɖe eŋu ŋutɔŋutɔ. Afi siae .affixwoɖɔlia .affix-topkple ɖoa position: fixed;(si Bootstrap ƒe CSS na).
  3. Ne woɖe eteƒe ƒe vovototo gɔme la, ele be .affixnàtsɔ .affix-bottom. Esi wònye be offsets nye tiatia ta la, ɖoɖo ɖeka bia be nàɖo CSS si sɔ. Le go sia me la, tsɔe kpee position: absolute;ne ehiã. Plugin la zãa data attribute alo JavaScript tiatia tsɔ nyaa afisi woaɖo element la tso afima.

Wɔ ɖe afɔɖeɖe siwo le etame dzi nàtsɔ aɖo wò CSS na zazã ƒe tiatia siwo le ete la dometɔ ɖesiaɖe.

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ affix behavior akpe ɖe element ɖesiaɖe ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="affix"ɖe element si nèdi be yeatsa ŋku ŋu. Zã offsets tsɔ ɖe ɣeyiɣi si nàtrɔ element ƒe pinning la gɔme.

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

To JavaScript dzi

Yɔ affix plugin la to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset-top="200".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi | dɔwɔwɔ | nu 10 Pixels siwo woaɖe tso screen dzi ne wole akɔnta bum afisi agbalẽxatsaxatsa le. Ne wotsɔ xexlẽdzesi ɖeka na la, woawɔ offset la ŋudɔ le etame kple ete siaa. Be nàna vovototo tɔxɛ aɖe si le ete kple etame la, ɖeko nàna nu aɖe offset: { top: 10 }alo offset: { top: 10, bottom: 5 }. Zã dɔwɔwɔ ne ehiã be nàbu akɔnta le offset ŋu le mɔ si trɔna nu.
taɖodzinu tiatiawɔla | node | jQuery ƒe akpa aɖe nusi windowwotsɔ wɔe Tsɔ taɖodzinu ƒe akpa si le affix la me la fia.

Mɔnuwo

.affix(options)

Ewɔa wò nyatakakawo ŋudɔ abe nyatakaka siwo wotsɔ kpe ɖe eŋu ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

.affix('checkPosition')

Gbugbɔ bu akɔnta le nya si wotsɔ kpe ɖe eŋu la ƒe nɔnɔme ŋu le nusiwo sɔ ƒe didime, teƒe si wole, kple agbalẽxatsaxatsa ƒe nɔƒe nu. Wotsɔa .affix, .affix-top, kple .affix-bottomklassawo kpena ɖe nya siwo wotsɔ kpe ɖe eŋu la ŋu alo ɖea wo ɖa le nɔnɔme yeyea nu. Ele be woayɔ mɔnu sia ɣesiaɣi si woatrɔ nya siwo wotsɔ kpe ɖe eŋu alo nusi woɖo taɖodzinu na ƒe didimewo, be woakpɔ egbɔ be nya siwo wotsɔ kpe ɖe eŋu la le teƒe nyuitɔ.

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

Nudzɔdzɔwo

Bootstrap ƒe affix plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe affix dɔwɔwɔ me.

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
affix.bs.nyagbɔgblɔ Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la kpena ɖe eŋu.
wotsɔ kpe ɖe eŋu.bs.affix Wodaa nudzɔdzɔ sia ne wotsɔ element la kpe ɖe eŋu vɔ.
affix-ta.bs.nyagbɔgblɔ Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la blaa-top.
affixed-top.bs.affix si wotsɔ kpe ɖe eŋu Woɖea nudzɔdzɔ sia ne wotsɔ element la de affixed-top vɔ megbe.
affix-anyigba.bs.affix Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la blaa nu-ete.
affixed-bottom.bs.nyagbɔgblɔ si wotsɔ kpe ɖe eŋu Wodoa nudzɔdzɔ sia ne wotsɔ element la de affixed-bottom vɔ megbe.