تێڕوانینێکی گشتی

تاکەکەسی یان کۆکراوە

دەتوانرێت پێوەکراوەکان بە تاک (بە بەکارهێنانی *.jsفایلە تاکەکەسییەکانی Bootstrap)، یان هەموویان بە یەکجار (بە بەکارهێنانی bootstrap.jsیان بچووککراو bootstrap.min.js) جێگیر بکرێن.

بە بەکارهێنانی جاڤاسکڕێپتی کۆکراوە

هەردووکیان bootstrap.jsو bootstrap.min.jsهەموو پێوەکراوەکان لە یەک فایلدا لەخۆدەگرن. تەنها یەکێکیان لەخۆ بگرە.

وابەستەییەکانی پێوەکراو

هەندێک لە پێوەکراوەکان و پێکهاتەکانی CSS پشت بە پێوەکراوەکانی تر دەبەستن. ئەگەر پێوەکراوەکان بە تاک بە تاک جێگیر دەکەیت، دڵنیابە لە پشکنینی ئەم وابەستەییانە لە دۆکیومێنتەکاندا. هەروەها تێبینی ئەوە بکە کە هەموو پێوەکراوەکان پشت بە jQuery دەبەستن (ئەمە واتە jQuery دەبێت پێش فایلەکانی پێوەکراوەکان بێت). راوێژ بە ئێمە بکەbower.json بۆ ئەوەی بزانیت کام وەشانی jQuery پشتگیری دەکرێت.

تایبەتمەندیەکانی داتا

دەتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی API ی مارکاپەوە بەبێ ئەوەی یەک دێڕی جاڤاسکڕێپت بنووسیت. ئەمە API ی پلە یەکە لە Bootstrap ە و دەبێت یەکەم شت بێت کە لەبەرچاو بگیرێت لەکاتی بەکارهێنانی پێوەکراوێکدا.

کە ووتمان، لە هەندێک بارودۆخدا ڕەنگە خواستراو بێت ئەم کاراییە بکوژێنرێتەوە. بۆیە ئێمە توانای لەکارخستنی API تایبەتمەندی داتاش دەدەین بە هەڵوەشاندنەوەی هەموو ڕووداوەکان لەسەر بەڵگەنامەکە کە بە data-api. ئەمەش بەم شێوەیە دەردەکەوێت:

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

یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکە وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:

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

تەنها یەک پێوەکراو بۆ هەر توخمێک لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا لە چەندین پێوەکراو لەسەر هەمان توخم بەکارمەهێنە. بۆ نموونە دوگمەیەک ناتوانێت هەم ئامرازی هەبێت و هەم مۆداڵێک بگۆڕێت. بۆ بەدیهێنانی ئەمە، توخمێکی پێچان بەکاربهێنە.

API بەرنامەیی

هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript API ەوە. هەموو API گشتیەکان شێوازی تاک و زنجیرن و ئەو کۆکردنەوە دەگەڕێننەوە کە کاریان لەسەر کراوە.

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

هەموو شێوازەکان دەبێ شتێکی هەڵبژاردەی هەڵبژاردە قبوڵ بکەن، ڕستەیەک کە شێوازێکی دیاریکراو دەکاتە ئامانج، یان هیچ (کە پێوەکراوێک بە هەڵسوکەوتی پێشوەختە دەستپێدەکات):

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

هەروەها هەر پێوەکراوێک بنیاتنەرە خاوەکەی لەسەر Constructorتایبەتمەندییەک ئاشکرا دەکات: $.fn.popover.Constructor. ئەگەر دەتەوێت نموونەیەکی پێوەکراوێکی تایبەت بەدەست بهێنیت، ڕاستەوخۆ لە توخمێکەوە وەریبگرەوە: $('[rel="popover"]').data('popover').

ڕێکخستنە پێشوەختەکان

دەتوانیت ڕێکخستنە پێشوەختەکان بۆ پێوەکراوێک بگۆڕیت بە دەستکاریکردنی Constructor.DEFAULTSشتەکەی پێوەکراوەکە:

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

هیچ ململانێیەک نییە

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

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

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

لە 3.0.0ەوە، هەموو ڕووداوەکانی Bootstrap ناویان بۆ دانراوە.

هەموو ڕووداوە بێکۆتاییەکان preventDefaultکارایی دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دەدات.

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

ژمارەکانی وەشانی

دەتوانرێت لە ڕێگەی VERSIONتایبەتمەندی بنیاتنەری پێوەکراوەکەوە دەست بە وەشانی هەریەک لە پێوەکراوەکانی jQuery ی Bootstrap بگات. بۆ نموونە بۆ پێوەکراوەکەی tooltip:

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

هیچ فۆڵباکێکی تایبەت نییە کاتێک جاڤاسکڕێپت لەکارخراوە

پێوەکراوەکانی Bootstrap بە تایبەتی بە ڕەوشتەوە ناگەڕێنەوە کاتێک جاڤاسکڕێپت لەکاردەخرێت. ئەگەر لەم حاڵەتەدا گرنگی بە ئەزموونی بەکارهێنەر دەدەیت، بەکاری بهێنە <noscript>بۆ ڕوونکردنەوەی دۆخەکە (و چۆن جاڤاسکڕێپت چالاک بکەیتەوە) بۆ بەکارهێنەرانت، و/یان زیادکردنی پاشەکشەی تایبەت بە خۆت.

کتێبخانەکانی لایەنی سێیەم

بووتستراپ بە فەرمی پشتگیری لە کتێبخانەکانی جاڤاسکڕێپتی لایەنی سێیەم وەک Prototype یان jQuery UI ناکات. سەرەڕای .noConflictڕووداوەکان و ناوەکان، لەوانەیە کێشەی گونجان هەبن کە پێویستە لەسەر خۆت چارەسەریان بکەیت.

گواستنەوەکان transition.js

دەربارەی گواستنەوەکان

بۆ کاریگەرییە سادەکانی گواستنەوە، transition.jsجارێک شانبەشانی فایلەکانی تری JS دابنێ. ئەگەر تۆ کۆمپایڵکراو (یان بچووککراو) بەکاردەهێنیت bootstrap.js، پێویست ناکات ئەمە بخەیتە ناوەوە- پێشتر لەوێیە.

چی لە ناوەوەدا هەیە

Transition.js یارمەتیدەرێکی بنەڕەتییە بۆ transitionEndڕووداوەکان هەروەها ئیمۆلیتەرێکی گواستنەوەی CSS. لەلایەن پێوەکراوەکانی ترەوە بەکاردێت بۆ پشکنینی پشتگیری گواستنەوەی CSS و بۆ گرتنی گواستنەوە هەڵواسراوەکان.

لەکارخستنی گواستنەوەکان

دەتوانرێت گواستنەوەکان بە شێوەیەکی جیهانی لەکاربخرێن بە بەکارهێنانی ئەم پارچە جاڤاسکڕێپتەی خوارەوە، کە دەبێت دوای بارکردنی transition.js(یان bootstrap.jsیان bootstrap.min.js, بەپێی حاڵەتەکە) بێت:

$.support.transition = false

مۆداڵەکان modal.js

مۆداڵەکان ڕێکخراون، بەڵام نەرم و نیان، دیالۆگ ئامۆژگاری بە کەمترین کارایی پێویست و پێشوەختە زیرەکەکان.

چەندین مۆداڵی کراوە پشتگیری ناکرێت

دڵنیابە کە مۆداڵێک مەکەرەوە لەکاتێکدا مۆداڵێکی تر هێشتا دیارە. پیشاندانی زیاتر لە یەک مۆداڵ لە یەک کاتدا پێویستی بە کۆدی تایبەت هەیە.

جێگیرکردنی مۆداڵی مارکاپ

هەمیشە هەوڵبدە کۆدی HTML ی مۆداڵێک لە شوێنێکی ئاستی سەرەوە لە بەڵگەنامەکەتدا دابنێیت بۆ ئەوەی پێکهاتەکانی تر کاریگەرییان لەسەر دەرکەوتن و/یان کارایی مۆداڵەکە نەبێت.

ئاگادارکردنەوەکانی ئامێری مۆبایل

هەندێک ئاگادارکردنەوە هەیە سەبارەت بە بەکارهێنانی مۆداڵەکان لەسەر ئامێرە مۆبایلەکان. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی پشتگیری وێبگەڕەکەمان بکە.

بەهۆی چۆنێتی پێناسەکردنی HTML5 ماناکانی، autofocusتایبەتمەندی HTML هیچ کاریگەرییەکی نییە لە مۆداڵی Bootstrap. بۆ بەدەستهێنانی هەمان کاریگەری، هەندێک جاڤاسکڕێپتی تایبەت بەکاربهێنە:

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

نموونە

نموونەی ئیستاتیک

مۆداڵی ڕەندەرکراو بە سەردێڕ و جەستە و کۆمەڵێک کردار لە ژێرەوەدا.

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

دیمۆی ڕاستەوخۆ

مۆداڵێک لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕە بە کرتەکردن لەسەر دوگمەی خوارەوە. لە سەرەوەی لاپەڕەکەوە دەخلیسکێتە خوارەوە و کاڵ دەبێتەوە.

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

مۆدالەکان بکە بە دەستڕاگەیشتن

دڵنیابە زیاد بکە role="dialog"و aria-labelledby="...", بە ئاماژەدان بە ناونیشانی مۆداڵی، بۆ .modal, و role="document"بۆ .modal-dialogخۆی.

سەرەڕای ئەوە، دەتوانیت وەسفێک لە دیالۆگی مۆداڵی خۆت بدەیت بە aria-describedbyon .modal.

جێگیرکردنی ڤیدیۆکانی یوتیوب

جێگیرکردنی ڤیدیۆکانی یوتیوب لە مۆداڵەکاندا پێویستی بە جاڤاسکڕێپتی زیادە هەیە کە لە بووتستراپدا نەبێت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی پەخشکردنەکە بوەستێنێت و زۆر شتی تر. بۆ زانیاری زیاتر سەیری ئەم پۆستە یارمەتیدەرەی Stack Overflow بکە .

قەبارەی ئیختیاری

مۆداڵەکان دوو قەبارەی هەڵبژاردەیان هەیە، لە ڕێگەی پۆلەکانی دەستکاریکەرەوە بەردەستە بۆ ئەوەی لەسەر .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>

ئەنیمەیشن لاببە

بۆ ئەو مۆداڵانەی کە بە سادەیی دەردەکەون نەک کاڵ ببنەوە بۆ بینین، .fadeپۆلەکە لە نیشانە مۆداڵەکەت دەربهێنە.

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

بەکارهێنانی سیستەمی تۆڕ

بۆ ئەوەی سوود لە سیستەمی تۆڕی Bootstrap وەربگریت لەناو مۆداڵێکدا، تەنها .rows لەناو مۆداڵێکدا هێلانە بکە .modal-bodyو پاشان پۆلەکانی سیستەمی تۆڕی ئاسایی بەکاربهێنە.

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

کۆمەڵێک دوگمەت هەیە کە هەموویان هەمان مۆداڵی دەستپێدەکەن، تەنها بە ناوەڕۆکێکی کەمێک جیاواز؟ تایبەتمەندیەکانی بەکارهێنان event.relatedTargetو HTMLdata-* (ڕەنگە لە ڕێگەی jQuery ) بۆ گۆڕینی ناوەڕۆکی مۆداڵەکە بەپێی ئەوەی کام دوگمە کرتە کراوە. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی ڕووداوە مۆداڵییەکان بکە لەسەر relatedTarget,

...دوگمەی زیاتر...
<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)
})

بەکارهێنان

پێوەکراوەکەی مۆداڵی ناوەڕۆکی شاراوەت لەسەر داواکاری دەگۆڕێت، لە ڕێگەی تایبەتمەندیەکانی داتا یان جاڤاسکڕێپتەوە. هەروەها زیاد دەکات .modal-openبۆ <body>بۆ سەرپێچیکردنی هەڵسوکەوتی سکڕۆڵکردنی پێشوەختە و دروست دەکات .modal-backdropبۆ دابینکردنی ناوچەیەکی کلیک بۆ ڕەتکردنەوەی مۆداڵی پیشان دراو کاتێک کلیککردن لە دەرەوەی مۆداڵەکە.

لە ڕێگەی تایبەتمەندییەکانی داتا

مۆداڵێک چالاک بکە بەبێ نووسینی جاڤاسکڕێپت. لەسەر توخمێکی کۆنترۆڵکەر دابنێ data-toggle="modal"، وەک دوگمەیەک، لەگەڵ data-target="#foo"یان href="#foo"بۆ بە ئامانجگرتنی مۆداڵێکی دیاریکراو بۆ گۆڕینی.

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

لە ڕێگەی جاڤاسکڕێپتەوە

بانگی مۆداڵێک بکە بە id myModalبە یەک دێڕی جاڤاسکڕێپت:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-backdrop="".

ناو جۆر بنەڕەتی وەسف
باکگراوند boolean یان ڕیزەکە'static' ڕاست توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت. یانیش staticبۆ باکگراوندێک دیاری بکە کە مۆداڵی لەسەر کلیککردن داناخات.
کیبۆرد boolean ڕاست مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت
نیشاندان boolean ڕاست مۆداڵی نیشان دەدات کاتێک دەستپێدەکات.
دوور ڕێڕەو هەڵە

ئەم هەڵبژاردنە لە v3.3.0 ەوە بەکارنەهاتووە و لە v4 لابراوە. ئێمە پێشنیار دەکەین لەبری ئەوە قاڵبسازی لایەنی مشتەری یان چوارچێوەی بەستنەوەی داتا بەکاربهێنیت، یان خۆت بانگی jQuery.load بکەیت.

ئەگەر URL ی دوور دابین بکرێت، ناوەڕۆک جارێک لە ڕێگەی شێوازی jQuery باردەکرێت loadو دەخرێتە ناو .modal-contentdiv. ئەگەر تۆ data-api بەکاردەهێنیت، دەتوانیت بە شێوەیەکی جێگرەوە hrefتایبەتمەندییەکە بەکاربهێنیت بۆ دیاریکردنی سەرچاوەی دوور. نموونەیەک لەم بابەتە لە خوارەوە نیشان دراوە:

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

شێوازەکان

ناوەڕۆکەکەت وەک مۆداڵ چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

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

بە دەست مۆداڵێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی مۆداڵەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.modalیان hidden.bs.modalڕووبدات).

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

بە دەستی مۆداڵێک دەکاتەوە. پێش ئەوەی مۆداڵەکە بەڕاستی پیشان بدرێت دەگەڕێتەوە بۆ پەیوەندیکەر (واتە پێش ئەوەی shown.bs.modalڕووداوەکە ڕووبدات).

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

بە دەستی مۆداڵێک دەشارێتەوە. پێش ئەوەی مۆداڵەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.modalڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

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

شوێنی مۆداڵەکە ڕێکدەخاتەوە بۆ بەرپەرچدانەوەی سکڕۆڵبارێک لە ئەگەری دەرکەوتنی یەکێکیان، کە وا دەکات مۆداڵەکە باز بدات بۆ لای چەپ.

تەنها کاتێک پێویستە کە بەرزی مۆداڵەکە بگۆڕێت لەکاتێکدا کراوە بێت.

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

ڕووداوەکان

پۆلی مۆداڵی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی مۆداڵی.

هەموو ڕووداوە مۆداڵییەکان لە خودی مۆداڵەکەدا تەقە دەکرێن (واتە لە <div class="modal">).

جۆری ڕووداو وەسف
show.bs.modal ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت. ئەگەر بەهۆی کلیکێکەوە بێت، ئەوا توخمە کلیککراوەکە وەک relatedTargetتایبەتمەندی ڕووداوەکە بەردەستە.
نیشان دراوە.bs.modal ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). ئەگەر بەهۆی کلیکێکەوە بێت، ئەوا توخمە کلیککراوەکە وەک relatedTargetتایبەتمەندی ڕووداوەکە بەردەستە.
شاردنەوە.bs.modal ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە.bs.modal ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن).
بارکراوە.bs.modal ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە ناوەڕۆکی بارکردبێت بە بەکارهێنانی remoteبژاردەکە.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

درۆپداونەکان dropdown.js

زیادکردنی مینیوی دابەزین بۆ نزیکەی هەر شتێک بەم پێوەکراوە سادەیە، لەوانەش navbar، تابەکان و حەبەکان.

لەناو ناوبارێکدا

لەناو حەبدا

لە ڕێگەی تایبەتمەندیەکانی داتا یان جاڤاسکڕێپتەوە، پێوەکراوەکە ناوەڕۆکی شاراوە (مینیوەکانی دابەزین) دەگۆڕێت بە گۆڕینی .openپۆلەکە لەسەر بابەتی لیستی باوک.

لە ئامێرە مۆبایلەکاندا، کردنەوەی درۆپداونێک زیاد دەکات .dropdown-backdropوەک ناوچەیەکی لێدان بۆ داخستنی مینیوەکانی دابەزین لەکاتی پەنجەدان لە دەرەوەی مینیوەکە، کە پێویستە بۆ پشتگیرییەکی دروستی iOS. ئەمەش واتە گۆڕین لە مینیویەکی کراوەوە بۆ مینیوی دابەزینێکی جیاواز پێویستی بە لێدانی زیادە هەیە لە مۆبایلدا.

تێبینی: data-toggle="dropdown"تایبەتمەندییەکە پشتی پێدەبەسترێت بۆ داخستنی مینیوەکانی دابەزین لە ئاستی بەرنامەیەکدا، بۆیە باشترە هەمیشە بەکاری بهێنیت.

لە ڕێگەی تایبەتمەندییەکانی داتا

زیادکردن data-toggle="dropdown"بۆ بەستەرێک یان دوگمەیەک بۆ گۆڕینی دابەزینێک.

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

بۆ ئەوەی URLەکان بە دوگمەکانی بەستەرەکان وەک خۆیان بمێننەوە، data-targetتایبەتمەندییەکە بەکاربهێنە لەبری 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>

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە درۆپداونەکانەوە بکە:

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

data-toggle="dropdown"هێشتا پێویستە

بەبێ گوێدانە ئەوەی کە ئایا لە ڕێگەی جاڤاسکڕێپتەوە بانگی دابەزینەکەت دەکەیت یان لەبری ئەوە data-api بەکاردەهێنیت، data-toggle="dropdown"هەمیشە پێویستە لەسەر توخمە دەستپێکەری دابەزینەکە ئامادە بیت.

هیچ

مینیوی دابەزینی ناوبارێکی دیاریکراو یان گەشتێکی تابکراو دەگۆڕێت.

هەموو ڕووداوەکانی دابەزین لە .dropdown-menuتوخمە باوکەکەی 's تەقە دەکرێن.

هەموو ڕووداوە دابەزینەکان relatedTargetتایبەتمەندییەکیان هەیە، کە بەهاکەی توخمە ئەنکرەکەی دەگۆڕێت.

جۆری ڕووداو وەسف
show.bs.دابەزاندن ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک شێوازی show instance بانگ دەکرێت.
shown.bs.دابەزاندن ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە دابەزینەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون).
hide.bs.دابەزاندن ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک شێوازی hide instance بانگ کراوە.
hidden.bs.دابەزاندن ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە درۆپداونەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

سکڕۆڵسپای scrollspy.js

نموونە لە navbar

پێوەکراوەکەی ScrollSpy بۆ نوێکردنەوەی ئۆتۆماتیکی ئامانجەکانی nav بە پشتبەستن بە شوێنی سکڕۆڵکردنە. ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە لاوەکییەکانی دابەزین تیشک دەخرێنە سەر.

@قەڵەو

ڕیکلام قیاس keytar، brunch id هونەر ئاهەنگ dolor labore. Pitchfork yr enim lo-fi پێش ئەوەی qui بفرۆشرێن. Tumblr مافی پاسکیل لە کێڵگە بۆ مێز هەرچییەک بێت. Anim keffiyeh کارلێس کاردیگان. کۆشکی وێنەی Velit seitan mcsweeney 3 گورگ مانگ irure. کۆسبی بلوز لۆمۆ جین شۆرت، ویلیامسبێرگ هودی مینیم qui ڕەنگە نەتبیستبێت لەوان et سندوقی متمانە کاردیگان culpa biodiesel wes anderson جوانکاری. Nihil تاتۆی accusamus، cred ئیرۆنی بایۆدیزەل keffiyeh پیشەسازی ullamco consequat.

@mdo

سکەیتبۆرد سمێڵ ڤێنیام مارفا، سمێڵی چەقۆی ڤێلیت ڤێلیت. سمێڵی فریگان ئەلیکوا کوپیداتات ڤێرۆی mcsweeney. کوپیداتات چوار لۆکۆ نیسی، ئیا هێلڤێتیکا نولا کارلێس. بارهەڵگرێکی خۆراکی بلوزێکی کۆسبی تاتۆی لەسەر کراوە، ڤینێلی mcsweeney's quis non freegan. لۆ-فای وێس ئەندەرسۆن +1 سەرتۆریال. کارلێس ڕاهێنانی نا جوانکاری quis gentrify. بروکلن adipisicing بیرەی دەستی جێگری keytar deserunt.

یەک

ئۆکایکات کۆمۆدۆ ئەلیکوا دیلێکتوس. Fap کرافت بیرە deserunt سکەیتبۆرد ea. مافی پاسکیل لۆمۆ adipisicing banh mi, velit ea sunt ئاستی داهاتوو locavore تاکە سەرچاوە قاوە لە magna veniam. ژیانی بەرز id ڤینێل، ئیکۆ پارک consequat quis aliquip banh mi pitchfork. ڤێرۆ ڤی ئێچ ئێس est adipisicing. جانتای نامەبەری کەمترین DIY Consectetur nisi. Cred ex لە، بەردەوام delectus consectetur فەنی پاکەت ئایفۆن.

دوو

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 جانتای نامەبەر مارفا هەرچییەک بێت بارهەڵگری خۆراکی دیلێکتوس. Sapiente synth id گریمانە. Locavore sed helvetica cliche irony, ڕەشەبا پشیلە کە ڕەنگە نەتبیستبێت لەوان consequat hoodie گلوتین-بێ گلوتین lo-fi fap aliquip. Labore elit placeat پێش ئەوەی بفرۆشرێن، تێری ڕیچاردسۆن proident brunch nesciunt quis cosby بلوز pariatur keffiyeh ut helvetica پیشەسازی. کاردیگان بیرەی دەستی سێتان ڤێلیتی ئامادەکراو. ڤی ئێچ ئێس چامبرای لابۆریس پۆپۆڕ ڤینیام. ئەنیم مۆلیت مینی کۆمۆدۆ ئولامکۆ ڕەشەبا پشیلە.

بەکارهێنان

پێویستی بە Bootstrap nav هەیە

لە ئێستادا Scrollspy پێویستی بە بەکارهێنانی پێکهاتەی Bootstrap nav هەیە بۆ تیشک خستنە سەر بەستەرە چالاکەکان.

ئامانجی ناسنامەی چارەسەرکراو پێویستە

بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە DOM وەک <div id="home"></div>.

:visibleتوخمە نائامانجەکان پشتگوێ دەخرێن

ئەو توخمانەی ئامانج کە :visibleبەپێی jQuery نین پشتگوێ دەخرێن و بابەتە nav ی هاوبەشیان هەرگیز تیشک ناخرێنە سەر.

پێویستی بە جێگیرکردنی ڕێژەیی هەیە

گرنگ نییە شێوازی جێبەجێکردنەکە، scrollspy پێویستی بە بەکارهێنانی position: relative;لەسەر ئەو توخمە هەیە کە سیخوڕی لەسەر دەکەیت. لە زۆربەی حاڵەتەکاندا ئەمە <body>. لەکاتی سکڕۆڵسپیکردن لەسەر توخمەکانی تر جگە لە <body>, دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;جێبەجێی دەکەیت.

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ گەشتکردن لە سەرەوە، زیاد بکە data-spy="scroll"بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە <body>). پاشان data-targetتایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .navپێکهاتەیەکی Bootstrap.

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

لە ڕێگەی جاڤاسکڕێپتەوە

دوای زیادکردنی position: relative;لە CSS ـەکەتدا، لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

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

شێوازەکان

.scrollspy('refresh')

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset="".

ناو جۆر بنەڕەتی وەسف
ئۆفسێت ژماره‌ 10. 10 پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ.

ڕووداوەکان

جۆری ڕووداو وەسف
چالاک بکە.bs.scrollspy ئەم ڕووداوە هەرکاتێک شتێکی نوێ لەلایەن scrollspy چالاک بوو، ئاگرەکە.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

تابەکان کە دەتوانرێت بگۆڕدرێن tab.js

نموونەی تابەکان

زیادکردنی کارایی تابی خێرا و داینامیکی بۆ گواستنەوە لە ڕێگەی پەنجەرەی ناوەڕۆکی ناوخۆییەوە، تەنانەت لە ڕێگەی مینیوە دابەزینەکانەوە. تابەکانی هێلانەکراو پشتگیری ناکرێت.

جینز خاو ڕەنگە نەتبیستبێت لەوان شۆرت جین ئۆستین. Nesciunt تۆفۆ stumptown aliqua، پاککردنەوەی وەستای ڕیترۆ سینت. سمێڵ کلیشە کاتی، ویلیامسبێرگ کارلێس ڤیگن هێلڤێتیکا. Reprehenderit قەساب ڕیترۆ keffiyeh خەون گیر synth. بلوزێکی کۆسبی eu banh mi، qui irure تێری ڕیچاردسۆن ex squid. Aliquip placeat سەلڤیا سیلوم ئایفۆن. Seitan aliquip quis کاردیگان جل و بەرگی ئەمریکی، قەساب 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.

گەشتکردن بە تابدار درێژ دەکاتەوە

ئەم پێوەکراوە پێکهاتەی گەشتکردنی تابدار درێژ دەکاتەوە بۆ زیادکردنی ناوچەی تابکراو.

بەکارهێنان

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

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

دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:

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

مارکاپ

دەتوانیت گەشتکردنێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-toggle="tab"یان data-toggle="pill"لەسەر توخمێک. زیادکردنی پۆلەکانی navو بۆ تابەکە ستایلکردنی تابی Bootstrap جێبەجێ دەکات ، لە کاتێکدا زیادکردنی پۆلەکانی و ستایلکردنی حەب جێبەجێ دەکات .nav-tabsulnavnav-pills

<div>

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

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

</div>

کاریگەری کاڵبوونەوە

بۆ ئەوەی تابەکان کاڵ ببنەوە، زیاد بکە .fadeبۆ هەر یەکەیان .tab-pane. هەروەها دەبێت یەکەم پەنجەرەی تاب دەبێت .inناوەڕۆکی سەرەتایی دیار بکات.

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

شێوازەکان

$().tab

توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا data-targetیان گرێیەکی ئامانجدار بکات. hrefلە نموونەکانی سەرەوەدا، تابەکان ئەو <a>s ن کە data-toggle="tab"تایبەتمەندییان هەیە.

.tab('show')

تابە پێدراوەکە هەڵدەبژێرێت و ناوەڕۆکی پەیوەندیدار بەوەوە پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و ناوەڕۆکی پەیوەندیدار بەوەوە دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.tabڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

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

ڕووداوەکان

لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:

  1. hide.bs.tab(لە تابە چالاکەکەی ئێستا)
  2. show.bs.tab(لە سەر تابی پیشان دەدرێت)
  3. hidden.bs.tab(لە تابی چالاک پێشوودا، هەمان تابی بۆ hide.bs.tabڕووداوەکە)
  4. shown.bs.tab(لە تابی تازە چالاک کە تازە پیشان دراوە، هەمان تابی بۆ show.bs.tabڕووداوەکە)

ئەگەر پێشتر هیچ تابێک چالاک نەبووە، ئەوا ڕووداوەکانی hide.bs.tabو hidden.bs.tabتەقە ناکرێن.

جۆری ڕووداو وەسف
show.bs.tab ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
نیشان دراوە.bs.tab ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
شاردنەوەی.bs.tab ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت.
شاراوە.bs.tab ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ئامرازەکان tooltip.js

ئیلهام لە پێوەکراوێکی نایابی jQuery.tipsy وەرگیراوە کە لەلایەن Jason Frame نووسراوە؛ ئامرازەکان وەشانێکی نوێکراوە، کە پشت بە وێنە نابەستێت، CSS3 بۆ ئەنیمەیشنەکان بەکاردەهێنێت، و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.

ئەو ئامۆژگارییانەی کە ناونیشانەکانیان درێژی سفرە هەرگیز پیشان نادرێن.

نموونە

بۆ بینینی ئامۆژگاری ئامرازەکان، ماوسەکەت لەسەر ئەم بەستەرانەی خوارەوە دابنێ:

پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar , scenester کێڵگە-بۆ-مێز banksy ئاوستی تویتەر دەست freegan cred خاو جینز تاکە سەرچاوە قاوە ڤایرۆس.

ئامۆژگاری ئامرازی ئیستاتیک

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.

چوار ئاراستە

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

کارایی هەڵبژاردنی بەشداریکردن

لەبەر هۆکاری کارایی، Tooltip و Popover data-apis هەڵبژێردراون، واتە دەبێت خۆت سەرەتایییان بکەیت .

یەکێک لە ڕێگاکانی دەستپێکردنی هەموو ئامۆژگارییەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی تایبەتمەندییەکانیان هەڵیانبژێریت data-toggle:

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

بەکارهێنان

پێوەکراوەکەی ئامرازەکان ناوەڕۆک و نیشانە لەسەر داواکاری دروست دەکات، و بە شێوازی پێشوەختە ئامرازەکان لە دوای توخمە دەستپێکەرەکەیان دادەنێت.

ئامرازەکە لە ڕێگەی جاڤاسکڕێپتەوە دەستپێبکە:

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

مارکاپ

ئاماژەپێکراوی پێویست بۆ ئامۆژگارییەک تەنها dataتایبەتمەندییەکە و titleلەسەر توخمەکەی HTML دەتەوێت ئامرازێکت هەبێت. مارکاپی دروستکراوی ئامرازێک تا ڕادەیەک سادەیە، هەرچەندە پێویستی بە شوێنێک هەیە (بە شێوازی پێشوەختە، topلەلایەن پێوەکراوەکەوە بۆ دانراوە).

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

بەستەری چەند دێڕ

هەندێک جار دەتەوێت ئامرازێک زیاد بکەیت بۆ هایپەرلینکێک کە چەند دێڕێک دەپێچێتەوە. هەڵسوکەوتی پێشوەختەی پێوەکراوەکەی tooltip ئەوەیە کە بە شێوەی ئاسۆیی و ڕاست لە ناوەڕاستیدا بێت. زیاد بکە white-space: nowrap;بۆ ئەنکرەکانت بۆ ئەوەی ئەمە ڕوونەدات.

ئامۆژگاری ئامرازەکان لە گروپەکانی دوگمەکان، گروپەکانی چوونەژوورەوە و خشتەکان پێویستیان بە ڕێکخستنی تایبەت هەیە

لە کاتی بەکارهێنانی ئامۆژگاری ئامرازەکان لەسەر توخمەکانی ناو a .btn-groupیان an .input-group, یان لەسەر توخمەکانی پەیوەست بە خشتەکە ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>)، دەبێت بژاردەکە دیاری بکەیت container: 'body'(لە خوارەوە بەڵگەی لەسەرە) بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت (وەک گەشەکردنی فراوانتربوونی توخمەکە و/ یان لەدەستدانی گۆشە گوڵاوەکانی کاتێک کە ئامرازەکە دەستپێدەکات).

هەوڵ مەدە ئامرازەکان لەسەر توخمە شاراوەکان پیشان بدەیت

بانگهێشتکردن $(...).tooltip('show')کاتێک توخمە ئامانجەکە display: none;دەبێت دەبێتە هۆی ئەوەی کە ئامرازەکە بە هەڵە جێگیر بکرێت.

ئامۆژگاری دەستڕاگەیشتن بۆ بەکارهێنەرانی کیبۆرد و تەکنەلۆژیای یارمەتیدەر

بۆ ئەو بەکارهێنەرانەی کە بە کیبۆردێک دەڕۆن، و بە تایبەتی بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان، پێویستە تەنها ئامۆژگاری ئامرازەکان زیاد بکەیت بۆ توخمە تەرکیزکراوەکانی کیبۆرد وەک بەستەرەکان، کۆنتڕۆڵەکانی فۆڕم، یان هەر توخمێکی ئارەزوومەندانە کە tabindex="0"تایبەتمەندییەکی هەیە.

ئامۆژگاری ئامرازەکان لەسەر توخمە لەکارکەوتووەکان پێویستیان بە توخمە پێچراوەکان هەیە

بۆ زیادکردنی ئامرازێک بۆ توخمێک disabledیان .disabledتوخمێک، توخمەکە بخەرە ناو a <div>و <div>لەبری ئەوە توولتیپەکە بەکاربهێنە بۆ ئەو توخمە.

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەی کاڵبوونەوەی CSS بۆ ئامرازەکە جێبەجێ بکە
دەفرێک ڕستە | هەڵە هەڵە

ئامۆژگاری ئامرازەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: container: 'body'. ئەم هەڵبژاردنە بە تایبەتی بەسوودە لەوەی کە ڕێگەت پێدەدات نوکی ئامرازەکە لە ڕەوتی بەڵگەنامەکەدا لە نزیک توخمە دەستپێکەرەکە دابنێیت - کە ڕێگری دەکات لە هەڵفڕینی نوکی ئامرازەکە لە توخمە دەستپێکەرەکە لە کاتی گۆڕینی قەبارەی پەنجەرەدا.

دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { "show": 500, "hide": 100 }

html boolean هەڵە HTML بخەرە ناو ئامرازەکەوە. ئەگەر هەڵە بێت، textشێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن ڕستە | کردار 'سەروو'

چۆنێتی جێگیرکردنی ئامرازەکان - سەرەوە | خوارەوە | چەپ | ڕاستە | auto.
کاتێک "auto" دیاری دەکرێت، بە شێوەیەکی داینامیکی ئاڕاستەی ئامرازەکە دەکاتەوە. بۆ نموونە ئەگەر جێگیرکردنەکە "auto left" بێت، کاتێک کە دەتوانرێت ئامرازەکە بە چەپ پیشان دەدرێت، ئەگەرنا ڕاست پیشان دەدات.

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی DOMی ئامرازی وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە thisلەسەر نموونەی ئامرازەکان دانراوە.

هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی ئامرازەکانی زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە .
قاڵب ڕستە '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی ئامرازەکەدا.

ئامرازەکان titleدەدرێنە ناو .tooltip-inner.

.tooltip-arrowدەبێتە تیری ئامرازەکە.

دەرەوەترین توخمە پێچراوەکە دەبێت .tooltipپۆلە��ەی هەبێت.

ناونیشان ڕستە | کردار ''

بەهای ناونیشانی پێشوەختە ئەگەر titleتایبەتمەندی ئامادە نەبێت.

ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە thisکۆمەڵە ئاماژەیەکەی بۆ ئەو توخمە کە ئامرازەکە پێیەوە بەستراوەتەوە.

وورژاندن ڕستە 'hover focus' چۆن tooltip دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manualناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت.
دەرچەی بینین ڕستە | شت | کردار { هەڵبژێرەر: 'جەستە'، پادکردن: 0 }

ئامرازەکە لە سنووری ئەم توخمەدا دەهێڵێتەوە. نموونە: viewport: '#viewport'یان{ "selector": "#viewport", "padding": 0 }

ئەگەر فەنکشنێک بدرێت، بە توخمە دەستپێکەرەکەی DOM node وەک تاکە ئارگومێنتەکەی بانگ دەکرێت. کۆنتێکستەکە thisلەسەر نموونەی ئامرازەکان دانراوە.

تایبەتمەندیەکانی داتا بۆ ئامۆژگاری تاکەکەسی

دەتوانرێت بژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.

شێوازەکان

$().tooltip(options)

مامەڵەکارێکی ئامۆژگاری بە کۆمەڵە توخمێکەوە دەبەستێتەوە.

.tooltip('show')

ئامۆژگاری ئامرازی توخمێک ئاشکرا دەکات. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی shown.bs.tooltipڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت. ئەو ئامرازانەی کە ناونیشانەکانیان درێژی سفرە هەرگیز پیشان نادرێن.

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

.tooltip('hide')

ئامۆژگاری ئامرازی توخمێک دەشارێتەوە. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.tooltipڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت.

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

.tooltip('toggle')

ئامۆژگاری ئامرازی توخمێک دەگۆڕێت. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.tooltipیان hidden.bs.tooltipڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت.

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

.tooltip('destroy')

ئامرازی توخمێک دەشارێتەوە و لەناو دەبات. ئەو ئامرازانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی هەڵبژاردەی دروست دەکرێن ) selectorناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.

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

ڕووداوەکان

جۆری ڕووداو وەسف
نیشاندانی ئامۆژگاری.bs ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.tooltip ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامرازەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
hide.bs.تول ئامۆژگاری ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
hidden.bs.ئامۆژگاری ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامێرەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی CSS).
inserted.bs.ئامۆژگاری ئامرازەکان ئەم ڕووداوە دوای show.bs.tooltipڕووداوەکە کاتێک قاڵبی ئامۆژگاری ئامرازەکان بۆ DOM زیاد کراوە، ئاگر دەکرێتەوە.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

پۆپۆڤەرز popover.js

زیادکردنی سەرپۆشی بچووکی ناوەڕۆک، وەک ئەوانەی لە ئایپاددان، بۆ هەر توخمێک بۆ نیشتەجێکردنی زانیارییە لاوەکییەکان.

ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.

وابەستەیی بە پێوەکراو

Popovers پێویستە پێوەکراوەکەی tooltip لە وەشانی Bootstrap ی تۆدا هەبێت.

کارایی هەڵبژاردنی بەشداریکردن

لەبەر هۆکاری کارایی، Tooltip و Popover data-apis هەڵبژێردراون، واتە دەبێت خۆت سەرەتایییان بکەیت .

یەکێک لە ڕێگاکانی دەستپێکردنی هەموو پۆپۆڤەرەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی data-toggleتایبەتمەندیەکەیان هەڵبژێریت:

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

پۆپۆڤەرەکان لە گروپەکانی دوگمەکان، گروپەکانی چوونەژوورەوە و خشتەکان پێویستیان بە ڕێکخستنی تایبەت هەیە

لە کاتی بەکارهێنانی popovers لەسەر توخمەکانی ناو a .btn-groupیان an .input-group، یان لەسەر توخمەکانی پەیوەست بە خشتەکە ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>)، دەبێت بژاردەکە دیاری بکەیت container: 'body'(لە خوارەوە بەڵگەی لەسەرە) بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت (وەک گەشەکردنی فراوانتربوونی توخمەکە و/ یان لەدەستدانی گۆشە گوڵاوەکانی کاتێک پۆپۆڤەرەکە دەستپێدەکات).

هەوڵ مەدە پۆپۆڤەرەکان لەسەر توخمە شاراوەکان پیشان بدەیت

بانگهێشتکردن $(...).popover('show')کاتێک توخمە ئامانجەکە display: none;دەبێت دەبێتە هۆی ئەوەی کە پۆپۆڤەرەکە بە هەڵە جێگیر بکرێت.

پۆپۆڤەرەکان لەسەر توخمە لەکارکەوتووەکان پێویستیان بە توخمە پێچراوەکان هەیە

بۆ زیادکردنی پۆپۆڤەر بۆ a disabledیان .disabledتوخمەکە، توخمەکە بخەرە ناو a <div>و لەبری ئەوە پۆپۆڤەرەکە بەکاربهێنە بۆ ئەو توخمە <div>.

بەستەری چەند دێڕ

هەندێک جار دەتەوێت پۆپۆڤەرێک زیاد بکەیت بۆ هایپەرلینکێک کە چەند دێڕێک دەپێچێتەوە. هەڵسوکەوتی پێشوەختەی پێوەکراوەکەی popover ئەوەیە کە بە شێوەی ئاسۆیی و ڕاست لە ناوەڕاستیدا بێت. زیاد بکە white-space: nowrap;بۆ ئەنکرەکانت بۆ ئەوەی ئەمە ڕوونەدات.

نموونە

پۆپۆڤەری ئیستاتیک

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.

سەرەوەی پۆپۆڤەر

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

پۆپۆڤەر ڕاستە

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

بنی پۆپۆڤەر

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

پۆپۆڤەر ڕۆیشت

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

دیمۆی ڕاستەوخۆ

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

چوار ئاراستە

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

لە کلیکی داهاتوودا لە کارەکەت دوور بخەرەوە

بەکارهێنانی focusتریگەر بۆ ڕەتکردنەوەی پۆپۆڤەرەکان لە کلیکی داهاتوودا کە بەکارهێنەر دەیکات.

پێویستە نیشانەیەکی تایبەت بۆ ڕەتکردنەوە لەسەر کلیککردنی داهاتوو

بۆ هەڵسوکەوتی دروستی cross-browser و cross-platform، پێویستە تاگەکە بەکاربهێنیت <a>نەک تاگەکە ، <button>هەروەها دەبێت تایبەتمەندیەکانی role="button"و tabindexلەخۆبگریت.

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

بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەی کاڵبوونەوەی CSS بۆ popover بەکاربهێنە
دەفرێک ڕستە | هەڵە هەڵە

پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: container: 'body'. ئەم هەڵبژاردنە بە تایبەتی بەسوودە لەبەر ئەوەی ڕێگەت پێدەدات پۆپۆڤەرەکە لە ڕەوتی بەڵگەنامەکەدا لە نزیک توخمە دەستپێکەرەکە دابنێیت - کە ڕێگری دەکات لە هەڵفڕینی پۆپۆڤەرەکە لە توخمە دەستپێکەرەکە دوور لە کاتی گۆڕینی قەبارەی پەنجەرە.

ناوەڕۆک ڕستە | کردار ''

بەهای ناوەڕۆکی پێشوەختە ئەگەر data-contentتایبەتمەندییەکە ئامادە نەبێت.

ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە thisڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.

دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { "show": 500, "hide": 100 }

html boolean هەڵە HTML بخەرە ناو popoverەکەوە. ئەگەر هەڵە بێت، textشێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن ڕستە | کردار 'ڕاست'

چۆنێتی جێگیرکردنی پۆپۆڤەر - سەرەوە | خوارەوە | چەپ | ڕاستە | auto.
کاتێک "auto" دیاری دەکرێت، بە شێوەیەکی داینامیکی پەپۆڤەرەکە ئاڕاستە دەکاتەوە. بۆ نموونە ئەگەر جێگیرکردنەکە "auto left" بێت، کاتێک دەتوانرێت popover بە چەپ پیشان دەدرێت، ئەگەرنا ڕاست پیشان دەدات.

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی popover DOM وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە thisبۆ نموونەی popover دانراوە.

هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی پۆپۆڤەر دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی popovers زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە .
قاڵب ڕستە '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی popover.

پۆپۆڤەرەکان titleدەدرێنە ناو .popover-title.

پۆپۆڤەرەکان contentدەدرێنە ناو .popover-content.

.arrowدەبێتە تیری پۆپۆڤەر.

دەرەوەترین توخمە پێچراوەکە دەبێت .popoverپۆلەکەی هەبێت.

ناونیشان ڕستە | کردار ''

بەهای ناونیشانی پێشوەختە ئەگەر titleتایبەتمەندی ئامادە نەبێت.

ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە thisڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.

وورژاندن ڕستە 'کلیک' چۆن popover دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manualناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت.
دەرچەی بینین ڕستە | شت | کردار { هەڵبژێرەر: 'جەستە'، پادکردن: 0 }

پۆپۆڤەر لە سنووری ئەم توخمەدا دەهێڵێتەوە. نموونە: viewport: '#viewport'یان{ "selector": "#viewport", "padding": 0 }

ئەگەر فەنکشنێک بدرێت، بە توخمە دەستپێکەرەکەی DOM node وەک تاکە ئارگومێنتەکەی بانگ دەکرێت. کۆنتێکستەکە thisبۆ نموونەی popover دانراوە.

تایبەتمەندیەکانی داتا بۆ تاکە پۆپۆڤەرەکان

دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.

شێوازەکان

$().popover(options)

پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.

.popover('show')

پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.

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

.popover('hide')

پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت.

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

.popover('toggle')

پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.popoverیان hidden.bs.popoverڕووبدات). ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت.

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

.popover('destroy')

پۆپۆڤەری توخمێک دەشارێتەوە و لەناو دەبات. ئەو پۆپۆڤەرانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی بژاردەی دروست دەکرێن ) selectorناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.

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

ڕووداوەکان

جۆری ڕووداو وەسف
show.bs.popover ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.popover ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە پۆپۆڤەرەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
شاردنەوە.bs.popover ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە.bs.popover ئەم ڕووداوە کاتێک تەقە دەکرێت کە popover تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن).
جێگیرکراوە.bs.popover ئەم ڕووداوە دوای show.bs.popoverڕووداوەکە کاتێک قاڵبی popover زیاد کراوە بۆ DOM کاردەکاتە دەرەوە.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

پەیامی ئاگادارکردنەوە alert.js

نموونەی ئاگادارکردنەوەکان

زیادکردنی کارایی ڕەتکردنەوە بۆ هەموو نامەکانی ئاگادارکردنەوە بەم پێوەکراوە.

لە کاتی بەکارهێنانی .closeدوگمەیەکدا، دەبێت یەکەم منداڵی ئەو بێت .alert-dismissibleو هیچ ناوەڕۆکێکی دەق نابێت لە مارکاپەکەدا پێشی بێت.

بەکارهێنان

تەنها زیاد بکە data-dismiss="alert"بۆ دوگمەی داخستنی خۆت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی داخستنی ئاگادارکردنەوە بدەیت. داخستنی ئاگادارکردنەوەیەک لە DOM لا دەبات.

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

بۆ ئەوەی ئاگادارکردنەوەکانت لە کاتی داخستنیدا ئەنیمەیشن بەکاربهێنن، دڵنیابە کە .fadeو ....in پێشتر پۆلەکانی ویان بۆ جێبەجێ کراوە

شێوازەکان

$().alert()

وا دەکات ئاگادارکردنەوەیەک گوێ لە ڕووداوەکانی کلیک بگرێت لەسەر توخمە نەوەکان کە data-dismiss="alert"تایبەتمەندیەکەیان هەیە. (پێویست نییە لە کاتی بەکارهێنانی دەستپێکردنی ئۆتۆماتیکی data-api.)

$().alert('close')

ئاگادارکردنەوەیەک دادەخات بە لابردنی لە DOM. ئەگەر پۆلەکانی .fadeو .inلەسەر توخمەکە ئامادە بن، ئاگادارکردنەوەکە پێش لابردنی کاڵ دەبێتەوە.

ڕووداوەکان

پێوەکراوەکەی ئاگادارکردنەوەی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئاگادارکردنەوە.

جۆری ڕووداو وەسف
داخستنی.bs.alert ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک closeشێوازی نموونە بانگ دەکرێت.
داخراو.bs.alert ئەم ڕووداوە کاتێک ئاگادار دەکرێتەوە کە ئاگادارکردنەوەکە داخراوە (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

دوگمەکان button.js

بە دوگمەکان زیاتر بکە. دوگمەی کۆنترۆڵکردن دەڵێت یان گروپێک لە دوگمە دروست بکە بۆ پێکهاتەی زیاتر وەک توولبارەکان.

دەوڵەتدار

زیادکردن data-loading-text="Loading..."بۆ بەکارهێنانی دۆخی بارکردن لەسەر دوگمەیەک.

ئەم تایبەتمەندییە لە v3.3.5 ەوە بەکارنەهاتووە و لە v4 دا لابراوە.

هەر حاڵەتێکت پێ خۆشە بەکاری بهێنە!

لە پێناو ئەم نمایشەدا، ئێمە data-loading-textو بەکاردەهێنین $().button('loading')، بەڵام ئەوە تاکە ویلایەت نییە کە دەتوانیت بەکاری بهێنیت. لە خوارەوە لە $().button(string)بەڵگەنامەکاندا زیاتر لەم بارەیەوە ببینە .

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

تاکە گۆڕانکاری

زیادکردن data-toggle="button"بۆ چالاککردنی گۆڕانکاری لەسەر یەک دوگمە.

دوگمەکانی پێش گۆڕانکاری پێویستیان بە....active و ...aria-pressed="true"

بۆ دوگمەکانی پێش گۆڕانکاری، دەبێت .activeپۆلەکە و aria-pressed="true"تایبەتمەندییەکە زیاد بکەیت بۆ buttonخۆت.

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

بۆکس / ڕادیۆ هەڵبژێرە

زیاد بکە data-toggle="buttons"بۆ .btn-groupسندوقێکی هەڵبژاردن یان هاتنەژوورەوەی ڕادیۆیی تێدایە بۆ چالاککردنی گۆڕانکاری لە ستایلەکانیاندا.

بژاردەی پێشوەختە هەڵبژێردراو پێویستیان بە....active

بۆ هەڵبژاردە پێشوەختە هەڵبژێردراوەکان، پێویستە خۆت .activeپۆلەکە زیاد بکەیت بۆ ئینپوتەکە label.

دۆخی پشکنینی بینراو تەنها لەسەر کلیک نوێ دەکرێتەوە

ئەگەر دۆخی هەڵبژێردراوی دوگمەی سندوقی هەڵبژاردن نوێ بکرێتەوە بەبێ ئەوەی clickڕووداوێک لەسەر دوگمەکە تەقێنرێت (بۆ نموونە لە ڕێگەی <input type="reset">یان لە ڕێگەی ڕێکخستنی checkedتایبەتمەندی ئینپوتەکە)، پێویستە خۆت .activeپۆلەکە لەسەر ئینپوتەکە بگۆڕیت 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>

شێوازەکان

$().button('toggle')

دۆخی پاڵنەر دەگۆڕێت. ئەو ڕواڵەتە دەدات بە دوگمەکە کە چالاک کراوە.

$().button('reset')

دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ دەقی ئەسڵی. ئەم شێوازە ناهاوسەنگە و پێش ئەوەی ڕێستکردنەکە بەڕاستی تەواو بێت دەگەڕێتەوە.

$().button(string)

دەق دەگۆڕێت بۆ هەر دۆخێکی دەقی پێناسەکراوی داتا.

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

پێوەکراوێکی نەرم و نیان کە مشتێک پۆل بەکاردەهێنێت بۆ هەڵسوکەوتی ئاسانی گۆڕینی.

وابەستەیی بە پێوەکراو

داڕشتن پێویستی بەوەیە کە پێوەکراوەکەی transitions لە وەشانی Bootstrap ـەکەتدا جێگیر بکرێت.

نموونە

بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:

  • .collapseناوەڕۆک دەشارێتەوە
  • .collapsingلە کاتی گواستنەوەکاندا بەکاردەهێنرێت
  • .collapse.inناوەڕۆک نیشان دەدات

دەتوانیت بەستەرێک بەکاربهێنیت کە hrefتایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-targetتایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-toggle="collapse"is required.

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>

نموونەی ئەکۆردیۆن

هەڵسوکەوتی داڕمانی پێشوەختە درێژ بکەرەوە بۆ دروستکردنی ئاکۆردیۆنێک لەگەڵ پێکهاتەی پانێڵەکە.

Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام 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>

هەروەها دەتوانرێت .panel-bodys بە .list-groups بگۆڕدرێتەوە.

  • Bootply
  • One itmus ac facilin
  • Second eros

کۆنتڕۆڵەکانی فراوانکردن/داڕمان بکە بە دەستڕاگەیشتن

دڵنیابە زیاد بکە aria-expandedبۆ توخمە کۆنترۆڵەکە. ئەم تایبەتمەندییە بە ڕوونی دۆخی ئێستای توخمە داڕووخاوەکە بۆ خوێنەرانی شاشە و تەکنەلۆژیا یارمەتیدەرە هاوشێوەکان پێناسە دەکات. ئەگەر توخمە داخراوەکە بە شێوازی پێشوەختە داخراو بێت، پێویستە بەهای aria-expanded="false". ئەگەر توخمە داخراوەکەت بە شێوازی پێشوەختە بە بەکارهێنانی inپۆلەکە ڕێکخستووە کە کراوە بێت، aria-expanded="true"لەبری ئەوە لەسەر کۆنتڕۆڵەکە ڕێکبخە. پێوەکراوەکە بە شێوەیەکی ئۆ��ۆماتیکی ئەم تایبەتمەندییە دەگۆڕێت بە پشتبەستن بەوەی کە ئایا توخمە داخراوەکە کراوەتەوە یان داخراوە یان نا.

سەرەڕای ئەوە، ئەگەر توخمە کۆنترۆڵەکەت تاکە توخمێکی داڕووخاو دەکاتە ئامانج – واتە data-targetتایبەتمەندییەکە ئاماژە بە idهەڵبژێرەرێک دەکات – دەتوانیت تایبەتمەندییەکی زیادە زیاد بکەیت aria-controlsبۆ توخمە کۆنترۆڵەکە، کە idتوخمە داڕووخاوەکەی تێدایە. خوێنەری شاشەی مۆدێرن و تەکنەلۆژیای یارمەتیدەری هاوشێوە لەم تایبەتمەندییە کەڵک وەردەگرن بۆ ئەوەی بەکارهێنەران کورتە ڕێگای زیادە بدەن بۆ ئەوەی ڕاستەوخۆ بچنە سەر خودی توخمە داڕووخاوەکە.

بەکارهێنان

پێوەکراوەکەی داڕمان چەند پۆلێک بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ بەرزکردنەوەی قورس:

  • .collapseناوەڕۆکەکە دەشارێتەوە
  • .collapse.inناوەڕۆکەکەی نیشان دەدات
  • .collapsingکاتێک گواستنەوەکە دەست پێدەکات زیاد دەکرێت، و کاتێک تەواو دەبێت لادەبرێت

ئەم پۆلانە دەتوانرێت لە component-animations.less.

لە ڕێگەی تایبەتمەندییەکانی داتا

تەنها زیاد بکە data-toggle="collapse"و a data-targetبۆ توخمەکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-targetهەڵبژێرەری CSS قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapseبۆ توخمە داخراوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکەin .

بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ کۆنتڕۆڵێکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector". بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەست چالاک بکە لەگەڵ:

$('.collapse').collapse()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-parent="".

ناو جۆر بنەڕەتی وەسف
دایک و باوک هەڵبژێرەر هەڵە ئەگەر هەڵبژێرەرێک دابینکرابێت، ئەوا هەموو توخمە داڕووخێنراوەکانی ژێر دایک و باوکی دیاریکراو دادەخرێن کاتێک ئەم بابەتە داخراوە پیشان دەدرێت. (هاوشێوەی ڕەفتاری ئەکۆردیۆنی تەقلیدییە - ئەمە وابەستەی panelپۆلەکەیەتی)
toggle بکە boolean ڕاست توخمە داخراوەکە لە کاتی بانگکردندا دەگۆڕێت

شێوازەکان

.collapse(options)

ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

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

.collapse('toggle')

توخمێکی داڕووخاو دەگۆڕێت بۆ پیشاندانی یان شاراوە. دەگەڕێتەوە بۆ بانگکەر پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.collapseیان hidden.bs.collapseڕووبدات).

.collapse('show')

توخمێکی داڕووخاو نیشان دەدات. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی shown.bs.collapseڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.

.collapse('hide')

توخمێکی داڕووخاو دەشارێتەوە. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.collapseڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.

ڕووداوەکان

پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.

جۆری ڕووداو وەسف
نیشاندانی.bs.collapse ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.collapse ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
شاردنەوە.bs.collapse ئەم ڕووداوە دەستبەجێ تەقە دەکرێت کاتێک hideمیتۆدەکە بانگ کراوە.
شاراوە.bs.collapse ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

کارۆسێل کارۆسێل .js

پێکهاتەیەکی سلایدشۆ بۆ پاسکیلسواری بەناو توخمەکاندا، وەکو کارۆسێل. کارۆسێلەکانی هێلانەکراو پشتگیری ناکرێت.

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

نووسینی ئیختیاری

زیادکردنی کەپشن بۆ سلایدەکانت بە ئاسانی بە .carousel-captionتوخمەکە لەناو هەر .item. تەنها نزیکەی هەر HTML ی هەڵبژاردە لەناو ئەوێدا دابنێ و بە شێوەیەکی ئۆتۆماتیکی ڕێکدەخرێت و فۆرمات دەکرێت.

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

چەندین کارۆسێل

کارۆسێلەکان پێویستیان بە بەکارهێنانی ئامێرێک هەیە idلەسەر دەرەوەترین دەفر (the .carousel) بۆ ئەوەی کۆنتڕۆڵەکانی کارۆسێلەکان بە باشی کاربکەن. لە کاتی زیادکردنی چەندین کارۆسێل، یان لە کاتی گۆڕینی کارۆسێلێک id، دڵنیابە لە نوێکردنەوەی کۆنتڕۆڵە پەیوەندیدارەکان.

لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا بەکاربهێنە بۆ ئەوەی بە ئاسانی شوێنی کارۆسێلەکە کۆنتڕۆڵ بکەیت. data-slideوشە سەرەکییەکان prevیان قبوڵ دەکات next، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاربهێنە data-slide-toبۆ تێپەڕاندنی ئیندێکسی خام سلاید بۆ کارۆسێل data-slide-to="2", کە شوێنی سلایدەکە دەگۆڕێت بۆ ئیندێکسێکی تایبەت کە بە0 .

تایبەتمەندییەکە data-ride="carousel"بەکاردێت بۆ نیشاندانی کارۆسێلێک وەک ئەنیمەیشنێک کە لە کاتی بارکردنی لاپەڕەوە دەست پێدەکات. ناتوانرێت بە تێکەڵکردن لەگەڵ (زیادە و ناپێویست) دەستپێکردنی ڕوونی جاڤاسکڕێپتی هەمان کارۆسێل بەکاربهێنرێت.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەستی پەیوەندی بە کارۆسێلەوە بکە بەم شێوەیە:

$('.carousel').carousel()

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-interval="".

ناو جۆر بنەڕەتی وەسف
نێوانیان ژماره‌ 5000 بڕی کات بۆ دواکەوتن لە نێوان پاسکیلکردنی ئۆتۆماتیکی شتێک. ئەگەر درۆ بێت، کارۆسێل بە شێوەیەکی ئۆتۆماتیکی خول ناکات.
وچان ڕستە | هیچ "hover" ئەگەر لەسەر . "hover"_ ئەگەر لەسەر .mouseentermouseleavenull
پێچانەوە boolean ڕاست ئایا کارۆسێلەکە دەبێت بە بەردەوامی پاسکیل بسوڕێتەوە یان وێستگەی سەختی هەبێت.
کیبۆرد boolean ڕاست ئایا پێویستە کارۆسێلەکە کاردانەوەی هەبێت بەرامبەر بە ڕووداوەکانی کیبۆرد.

کارۆسێلەکە بە بژاردەیەکی ئیختیاری objectدەستپێدەکات و دەست دەکات بە پاسکیلسواری لە ڕێگەی شتەکانەوە.

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

لە چەپەوە بۆ ڕاست بەناو شتەکانی کارۆسێلدا دەسوڕێتەوە.

کارۆسێلەکە لە پاسکیلسواری لە ڕێگەی شتەکانەوە ڕادەگرێت.

کارۆسێلەکە دەخولێنێتەوە بۆ چوارچێوەیەکی دیاریکراو (بە بنەمای 0، هاوشێوەی ڕیزبەندییەک).

خولگە دەکات بۆ بابەتی پێشوو.

خولگە دەکات بۆ بابەتی داهاتوو.

پۆلی کارۆسێلی بووتستراپ دوو ڕووداو بۆ پەیوەستکردن بە کارایی کارۆسێلەوە ئاشکرا دەکات.

هەردوو ڕووداوەکە ئەم تایبەتمەندییە زیادانەی خوارەوەیان هەیە:

  • direction: ئەو ئاراستەیەی کە کارۆسێلەکە پێی دەخلیسکێت (یان "left"یان "right").
  • relatedTarget: ئەو توخمەی DOM کە وەک بابەتی چالاک دەخلیسکێتە شوێنی خۆی.

هەموو ڕووداوەکانی کارۆسێلەکە لە خودی کارۆسێلەکە تەقە دەکرێن (واتە لە <div class="carousel">).

جۆری ڕووداو وەسف
slide.bs.carousel ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک slideشێوازی نموونە بانگهێشت دەکرێت.
slid.bs.کارۆسێل ئەم ڕووداوە کاتێک تەقە دەکرێت کە کارۆسێلەکە گواستنەوەی خلیسکێنەی خۆی تەواو کردبێت.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

پەیوەست بکە بە affix.js

نموونە

پێوەکراوەکانی پەیوەستکردنەکە دەگۆڕێت position: fixed;و دەکوژێتەوە، ئەو کاریگەرییەی کە بە دۆزراوەتەوە وەرئەگرێت position: sticky;. ژێرناوچەی لای ڕاست دیمۆیەکی ڕاستەوخۆی پێوەکراوەکەی ئافیکسە.


بەکارهێنان

پێوەکراوەکە لە ڕێگەی تایبەتمەندییەکانی داتا یان بە دەستی بە جاڤاسکڕێپتی تایبەت بە خۆت بەکاربهێنە. لە هەردوو بارودۆخەکەدا، پێویستە CSS بۆ شوێن و پانایی ناوەڕ��کی لێدراوەکەت دابین بکەیت.

تێبینی: پێوەکراوەکەی پەیوەستکردن لەسەر توخمێک بەکارمەهێنە کە لە توخمێکی تاڕادەیەک جێگیردا هەیە، وەک ستوونی ڕاکێشراو یان پاڵنراو، بەهۆی هەڵەی ڕەندەری سەفاری .

جێگیرکردن لە ڕێگەی CSS

پێوەکراوەکە لە نێوان سێ پۆلدا دەگۆڕێت، هەریەکەیان نوێنەرایەتی دۆخێکی تایبەت دەکەن: .affix, .affix-top, و .affix-bottom. پێویستە ستایلەکان دابین بکەیت، جگە لە position: fixed;on .affix, بۆ ئەم پۆلانە خۆت (سەربەخۆ لەم پێوەکراوە) بۆ مامەڵەکردن لەگەڵ شوێنە ڕاستەقینەکان.

لێرەدا چۆنێتی کارکردنی پێوەکراوەکانی affix دەبینین:

  1. بۆ دەستپێکردن، پێوەکراوەکە زیاد دەکات.affix-top بۆ ئەوەی ئاماژە بەوە بکات کە توخمەکە لە سەرەوەترین شوێنی خۆیدایە. لەم خاڵەدا پێویست بە جێگیرکردنی CSS ناکات.
  2. سکڕۆڵکردن بەسەر ئەو توخمەدا کە دەتەوێت لێبدرێتەوە دەبێت لکاندنی ڕاستەقینە دەستپێبکات. لێرەدایە کە .affixجێگرەوە .affix-topو سێت دەکات position: fixed;(لەلایەن CSS ی Bootstrap دابینکراوە).
  3. ئەگەر ئۆفسێتی خوارەوە پێناسە کرا، بە تێپەڕبوونی پێویستە .affixبە .affix-bottom. بەو پێیەی ئۆفسێتەکان هەڵبژاردەن، ڕێکخستنی یەکێکیان پێویستە CSS ی گونجاو دابنێیت. لەم حاڵەتەدا position: absolute;لەکاتی پێویستدا زیاد بکە. پێوەکراوەکە تایبەتمەندی داتا یان هەڵبژاردەی جاڤاسکڕێپت بەکاردەهێنێت بۆ دیاریکردنی ئەوەی کە توخمەکە لەوێوە لە کوێ دابنێت.

بۆ ڕێکخستنی CSS ـەکەت بۆ هەریەکێک لە هەڵبژاردەکانی بەکارهێنان لە خوارەوە هەنگاوەکانی سەرەوە پەیڕەو بکە.

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی affix زیاد بکەیت بۆ هەر توخمێک، تەنها زیاد بکە data-spy="affix"بۆ ئەو توخمە کە دەتەوێت سیخوڕی لەسەر بکەیت. ئۆفسێتەکان بەکاربهێنە بۆ پێناسەکردنی کەی پینکردنی توخمێک بگۆڕیت.

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

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە پێوەکراوەکانی affix بکە:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset-top="200".

ناو جۆر بنەڕەتی وەسف
ئۆفسێت ژمارە | فەنکشن | شت 10. 10 پێکسڵەکان بۆ ئۆفسێت لە شاشەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ. ئەگەر یەک ژمارە دابین بکرێت، ئۆفسێتەکە بە هەردوو ئاراستەی سەرەوە و خوارەوە جێبەجێ دەکرێت. بۆ دابینکردنی ئۆفسێتی ناوازە و خوارەوە و سەرەوە تەنها شتێک دابین بکە offset: { top: 10 }یان offset: { top: 10, bottom: 5 }. کاتێک پێویستت بە حیسابکردنی ئۆفسێتێکە بە شێوەیەکی داینامیکی فەنکشنێک بەکاربهێنە.
ئامانج هەڵبژێرەر | گرێ | توخمێکی jQuery windowشتەکە _ توخمە ئامانجی پاشگرەکە دیاری دەکات.

شێوازەکان

.affix(options)

ناوەڕۆکەکەت وەک ناوەڕۆکی لکێنراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

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

.affix('checkPosition')

دۆخی هاوپێچەکە بە پشتبەستن بە ڕەهەندەکان و شوێن و شوێنی سکڕۆڵی توخمە پەیوەندیدارەکان حیساب دەکاتەوە. , .affix, .affix-topو .affix-bottomپۆلەکان بەپێی دۆخی نوێ زیاد دەکرێن یان لە ناوەڕۆکی لێدراو لادەبرێن. ئەم شێوازە پێویستی بە بانگکردن هەیە هەرکاتێک ڕەهەندەکانی ناوەڕۆکی لکێنراو یان توخمە ئامانجەکە بگۆڕدرێن، بۆ دڵنیابوون لە جێگیرکردنی دروستی ناوەڕۆکی لکێنراو.

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

ڕووداوەکان

پێوەکراوەکەی affix ی Bootstrap چەند ڕووداوێک بۆ پەیوەستکردن بە کارایی affix ئاشکرا دەکات.

جۆری ڕووداو وەسف
affix.bs.ئافیکس ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە لێبدرێت ئاگر دەداتەوە.
پەیوەست.bs.affix ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە، ئاگر دەکرێتەوە.
affix-top.bs.ئافیکس ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە چەسپێنرێت-سەرەوە ئاگرەکە.
affixed-top.bs.لێدان ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە-top دەکرێتەوە.
affix-bottom.bs.ئافیکس ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە چەسپێنرێت-خوارەوە ئاگر دەدات.
affixed-bottom.bs.لێدان ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە-خوارەوە تەقێنراوە.