ခြုံငုံသုံးသပ်ချက်

တစ်ဦးချင်း သို့မဟုတ် ပြုစုခြင်း။

ပလပ်အင်များကို တစ်ဦးချင်းစီ (Bootstrap ၏ တစ်ဦးချင်းစီ *.jsဖိုင်များကို အသုံးပြု၍) သို့မဟုတ် အားလုံးကို တစ်ပြိုင်နက် (အသုံးပြုခြင်း bootstrap.jsသို့မဟုတ် အသေးစိပ် bootstrap.min.js) ပါဝင်သည်။

ဒေတာဂုဏ်တော်

JavaScript တစ်ကြောင်းတည်းမရေးဘဲ Markup API မှတဆင့် Bootstrap ပလပ်အင်အားလုံးကို သက်သက်သုံးနိုင်သည်။ ၎င်းသည် Bootstrap ၏ ပထမတန်းစား API ဖြစ်ပြီး ပလပ်အင်ကို အသုံးပြုသောအခါတွင် သင်၏ ပထမဆုံး ထည့်သွင်းစဉ်းစားသင့်သည်။

ဆိုလိုသည်မှာ၊ အချို့သောအခြေအနေများတွင် ဤလုပ်ဆောင်ချက်ကို ပိတ်ရန် နှစ်လိုဖွယ်ဖြစ်နိုင်သည်။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် data attribute API ကို disable လုပ်နိုင်သည့် စွမ်းရည်ကို data-apiပေးပါသည်။ ဤပုံသည်-

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

တနည်းအားဖြင့်၊ သီးခြားပလပ်အင်တစ်ခုအား ပစ်မှတ်ထားရန်၊ ဤကဲ့သို့သော data-api namespace နှင့်အတူ ပလပ်အင်၏အမည်ကို namespace အဖြစ် ထည့်သွင်းပါ-

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

ပရိုဂရမ်မာတစ် API

JavaScript API မှတဆင့် Bootstrap ပလပ်အင်များအားလုံးကို သင်အသုံးပြုနိုင်မည်ဟုလည်း ကျွန်ုပ်တို့ယုံကြည်ပါသည်။ အများသူငှာ 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

ပဋိပက္ခမရှိပါ။

တစ်ခါတစ်ရံတွင် အခြား UI မူဘောင်များနှင့်အတူ Bootstrap ပလပ်အင်များကို အသုံးပြုရန် လိုအပ်သည်။ ဤအခြေအနေများတွင်၊ namespace သည် ရံဖန်ရံခါ ဖြစ်ပေါ်နိုင်သည်။ ဒီလိုဖြစ်သွားရင်၊ သင့် .noConflictတန်ဖိုးကို ပြန်ပြောင်းလိုတဲ့ plugin ကို ခေါ်နိုင်ပါတယ်။

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

အဲ့ဒါနဲ့

Bootstrap သည် ပလပ်အင်အများစု၏ ထူးခြားသောလုပ်ဆောင်ချက်များအတွက် စိတ်ကြိုက်ဖြစ်ရပ်များကို ပံ့ပိုးပေးပါသည်။ ယေဘူယျအားဖြင့်၊ ၎င်းတို့သည် အဆုံးမရှိနှင့် အတိတ်ပါဝင်မှုပုံစံဖြင့် လာပါသည် - အဆုံးမရှိ (ဥပမာ show) သည် ဖြစ်ရပ်တစ်ခု၏အစတွင် အစပျိုးပြီး ၎င်း၏အတိတ်ပါဝင်မှုပုံစံ (ဥပမာ shown) သည် လုပ်ဆောင်ချက်တစ်ခုပြီးဆုံးချိန်တွင် အစပျိုးသည်။

3.0.0 အရ၊ Bootstrap ဖြစ်ရပ်များအားလုံးကို အမည်သတ်မှတ်ထားသည်။

အဆုံးမရှိ အဖြစ်အပျက်များအားလုံးသည် preventDefaultလုပ်ဆောင်နိုင်စွမ်းကို ပေးစွမ်းသည်။ ၎င်းသည် လုပ်ဆောင်ချက်တစ်ခုမစတင်မီ လုပ်ဆောင်မှုကို ရပ်တန့်ရန် စွမ်းရည်ကို ပံ့ပိုးပေးသည်။

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

ဗားရှင်းနံပါတ်များ

Bootstrap ၏ jQuery ပလပ်အင်တစ်ခုစီ၏ဗားရှင်းကို VERSIONplugin ၏တည်ဆောက်သူ၏ပိုင်ဆိုင်မှုမှတဆင့်ဝင်ရောက်ကြည့်ရှုနိုင်သည်။ ဥပမာ၊ tooltip plugin အတွက်၊

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

JavaScript ကို ပိတ်ထားသည့်အခါ အထူးအတားအဆီးများ မရှိပါ။

JavaScript ကိုပိတ်ထားသောအခါတွင် Bootstrap ၏ပလပ်အင်များသည် အထူးကောင်းမွန်စွာ နောက်ပြန်ဆုတ်ခြင်းမရှိပါ။ ဤကိစ္စရပ်တွင် အသုံးပြုသူအတွေ့အကြုံကို <noscript>သင်စိတ်ဝင်စားပါက၊ သင့်အသုံးပြုသူများထံ အခြေအနေ (နှင့် JavaScript ပြန်လည်ဖွင့်နည်း) ကို ရှင်းပြရန်နှင့်/သို့မဟုတ် သင့်စိတ်ကြိုက် တုံ့ပြန်မှုများကို ထည့်သွင်းပါ။

ကူးပြောင်းမှုများ transition.js

အကူးအပြောင်းများအကြောင်း

ရိုးရှင်းသောအကူးအပြောင်းအကျိုးသက်ရောက်မှုအတွက်၊ transition.jsအခြား JS ဖိုင်များနှင့်အတူ တစ်ကြိမ်ပါဝင်ပါ။ အကယ်၍ သင်သည် စုစည်းထားသော (သို့မဟုတ် အသေးစိပ်) ကို အသုံးပြု bootstrap.jsနေပါက ၎င်းကို ထည့်သွင်းရန် မလိုအပ်ပါ။

အထဲမှာ ဘာပါလဲ။

Transition.js သည် transitionEndအဖြစ်အပျက်များအတွက် အခြေခံအကူအညီဖြစ်သလို CSS အကူးအပြောင်း emulator တစ်ခုဖြစ်သည်။ CSS အကူးအပြောင်း ပံ့ပိုးမှု ရှိမရှိ စစ်ဆေးရန်နှင့် hanging အသွင်ကူးပြောင်းမှုများကို ဖမ်းစားရန် အခြား ပလပ်အင်များက ၎င်းကို အသုံးပြုသည်။

အကူးအပြောင်းများကို ပိတ်ခြင်း။

transition.jsအပြောင်းအရွှေ့များကို (သို့မဟုတ် bootstrap.jsကိစ္စ bootstrap.min.jsဖြစ်နိုင်သည်အတိုင်း) တင်ပြီး နောက်တွင် ပါလာရမည့် အောက်ပါ JavaScript အတိုအထွာများကို အသုံးပြု၍ တစ်ကမ္ဘာလုံး ပိတ်ထားနိုင်သည် -

$.support.transition = false

မော်ဒယ်များ modal.js

Modals များသည် ချောမွေ့သော်လည်း လိုက်လျောညီထွေရှိသော၊ အနိမ့်ဆုံးလိုအပ်သော လုပ်ဆောင်နိုင်စွမ်းနှင့် စမတ်ပုံသေများပါရှိသော ဒိုင်ယာလော့ခ်ကို ညွှန်ပြပါသည်။

HTML5 သည် ၎င်း၏ semantics ကို သတ်မှတ်ပုံကြောင့်၊ autofocusHTML attribute သည် Bootstrap modals များတွင် အကျိုးသက်ရောက်မှု မရှိပါ။ တူညီသောအကျိုးသက်ရောက်မှုရရှိရန်၊ စိတ်ကြိုက် JavaScript အချို့ကို အသုံးပြုပါ-

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

တိုက်ရိုက်သရုပ်ပြ

အောက်ပါခလုတ်ကိုနှိပ်ခြင်းဖြင့် JavaScript မှတစ်ဆင့် 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>

ရွေးချယ်နိုင်သော အရွယ်အစားများ

Modals တွင် ထားရှိရန် ပြုပြင်မွမ်းမံမှု အတန်းများမှတစ်ဆင့် ရရှိနိုင်သော စိတ်ကြိုက်အရွယ်အစား နှစ်ခုရှိသည် .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သင်၏ modal markup မှ အတန်းကို ဖယ်ရှားပါ။

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

ဇယားကွက်စနစ်ကို အသုံးပြုခြင်း။

Modal တစ်ခုအတွင်း Bootstrap grid စနစ်အား အခွင့်ကောင်းယူရန်၊ .rowအတွင်းတွင် nest .modal-bodyလုပ်ပြီး ပုံမှန် grid စနစ်အတန်းများကို အသုံးပြုပါ။

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

အစပျိုးခလုတ်ကိုအခြေခံ၍ ပုံစံတူအကြောင်းအရာ ကွဲပြားသည်။

အနည်းငယ်ကွဲပြားသော အကြောင်းအရာများဖြင့် တူညီသောပုံစံကို အစပျိုးပေးသည့် ခလုတ်များစွာ ရှိပါသလား။ ဘယ်ခလုတ်ကို နှိပ်လိုက်တဲ့အပေါ် မူတည်ပြီး modal ရဲ့ အကြောင်းအရာတွေ ကွဲပြားဖို့ event.relatedTargetနဲ့ HTML data-*attribute (ဖြစ်နိုင်သည် jQuery မှတဆင့် ) ကို အသုံးပြု ပါ။ အသေးစိတ်အတွက် Modal Events docs ကို ကြည့်ပါ 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 plugin သည် ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် တောင်းဆိုမှုအရ သင့်ဝှက်ထားသော အကြောင်းအရာကို ပြောင်းပေးသည်။ ၎င်းသည် ပုံသေ scrolling အပြုအမူကို အစားထိုးရန်အတွက်လည်း ထည့်သွင်းပြီး .modal-openmodal အပြင်ဘက်တွင် နှိပ်သည့်အခါ ပြထားသည့် modals <body>ကိုပယ်ဖျက်ရန် အတွက် ကလစ်ဧရိယာကို ပံ့ပိုးပေးပါသည်။.modal-backdrop

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မရေးဘဲ modal ကို အသက်သွင်းပါ။ data-toggle="modal"ခလုတ်တစ်ခုနှင့်အတူ၊ data-target="#foo"သို့မဟုတ် href="#foo"ပြောင်းရန် သီးခြားပုံစံတစ်ခုအား ပစ်မှတ်ထားရန် ခလုတ်တစ်ခုကဲ့သို့ ထိန်းချုပ်ကိရိယာဒြပ်စင်ပေါ်တွင် သတ်မှတ် ပါ။

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

JavaScript မှတဆင့်

myModalJavaScript တစ်ကြောင်းတည်း ဖြင့် ID ဖြင့် modal ကိုခေါ်ဆိုပါ -

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-backdrop=""။

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

နည်းလမ်းများ

.modal(options)

သင့်အကြောင်းအရာကို ပုံစံတူအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object။

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

.modal('toggle')

ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။ modal ကို အမှန်တကယ် ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.modalသို့မဟုတ် hidden.bs.modalဖြစ်ရပ်မဖြစ်ပေါ်မီ)။

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

.modal('show')

မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်ပါ။ modal ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.modalပွဲမဖြစ်ပွားမီ)။

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

.modal('hide')

ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။ modal သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.modalပွဲမဖြစ်ပွားမီ)။

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

.modal('handleUpdate')

တစ်ခုပေါ်လာပါက မော်ဒယ်လ်ကို ဘယ်ဘက်သို့ခုန်သွားစေမည့် scrollbar တစ်ခုကို တန်ပြန်ရန် modal ၏တည်နေရာကို ပြန်လည်ပြင်ဆင်သည်။

ဖွင့်ထားချိန်တွင် modal ၏ အမြင့်သည် ပြောင်းလဲမှသာ လိုအပ်ပါသည်။

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

အဲ့ဒါနဲ့

Bootstrap ၏ modal class သည် modal လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။

modal အဖြစ်အပျက်အားလုံးကို modal ကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="modal">) တွင် ပစ်ခတ်သည်။

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

dropdowns dropdown.js

ဥပမာများ

navbar၊ တက်ဘ်များနှင့် pills အပါအဝင် ဤရိုးရှင်းသော ပလပ်အင်များဖြင့် မည်သည့်အရာအားလုံးနီးပါးတွင် dropdown menus များကို ထည့်ပါ။

navbar တစ်ခုအတွင်း

ဆေးပြားအတွင်းမှ

အသုံးပြုမှု

ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့်၊ dropdown plugin သည် .openပင်မစာရင်းအကြောင်းအရာတွင် အတန်းကို ပြောင်းပစ်ခြင်းဖြင့် လျှို့ဝှက်အကြောင်းအရာ (dropdown menus) ကို ပြောင်းပေးသည်။

မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် dropdown တစ်ခုဖွင့်ခြင်းသည် .dropdown-backdropမီနူးအပြင်ဘက်တွင်တို့ခြင်းဖြစ်ပြီး သင့်လျော်သော iOS ပံ့ပိုးမှုလိုအပ်ချက်ဖြစ်သည့် dropdown menus ကိုပိတ်ရန်အတွက် နှိပ်သည့်နေရာကို ပေါင်းထည့်သည်။ ဆိုလိုသည်မှာ ဖွင့်ထားသော dropdown menu မှ မတူညီသော dropdown menu သို့ပြောင်းခြင်းသည် မိုဘိုင်းပေါ်တွင် နှိပ်ရန် အပိုတစ်ခု လိုအပ်ပါသည်။

မှတ်ချက်- data-toggle="dropdown"အက်ပလီကေးရှင်းအဆင့်ရှိ dropdown menus များကိုပိတ်ရန်အတွက် ရည်ညွှန်းချက်မှာ အားကိုးထားသောကြောင့် ၎င်းကို အမြဲသုံးရန် စိတ်ကူးကောင်းပါသည်။

ဒေတာဂုဏ်တော်များမှတဆင့်

data-toggle="dropdown"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>

URLs များကို လင့်ခ်ခလုတ်များဖြင့် နဂိုအတိုင်းထားရန်၊ 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>

JavaScript မှတဆင့်

JavaScript မှတဆင့် dropdown များကိုခေါ်ဆိုပါ-

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

ရွေးချယ်စရာများ

တစ်ခုမှ

နည်းလမ်းများ

$().dropdown('toggle')

ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းကြောင်းပြခြင်း၏ dropdown menu ကို ပြောင်းပေးသည်။

အဲ့ဒါနဲ့

dropdown ဖြစ်ရပ်များအားလုံးကို .dropdown-menu's parent element' တွင် ပစ်ထားသည်။

အောက်ဆွဲချသည့် အစီအစဉ်များအားလုံးတွင် relatedTargetတန်ဖိုးသည် ခလုတ်ဖွင့်ရန်နေရာတစ်ခု၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

navbar တွင်ဥပမာ

ScrollSpy ပလပ်အင်သည် scroll position ကိုအခြေခံ၍ nav ပစ်မှတ်များကို အလိုအလျောက် update လုပ်ရန်အတွက်ဖြစ်သည်။ navbar အောက်ရှိ ဧရိယာကို ရွှေ့ပြီး တက်ကြွသော အတန်းပြောင်းလဲမှုကို ကြည့်ရှုပါ။ dropdown sub items များကိုလည်း မီးမောင်းထိုးပြပါမည်။

အသုံးပြုမှု

နှိုင်းရနေရာချထားရန် လိုအပ်သည်။

အကောင်အထည်ဖော်မှုနည်းလမ်းရှိပါစေ၊ scrollspy သည် position: relative;သင်သူလျှိုလုပ်နေသောဒြပ်စင်ပေါ်တွင် အသုံးပြုရန်လိုအပ်ပါသည်။ ကိစ္စအများစုတွင်၊ ဤသည်မှာ <body>။ မှလွဲ၍ အခြားဒြပ်စင်များပေါ်တွင် scrollspying လုပ်သည့်အခါ set <body>တစ်ခုရှိရန်သေချာစေပါ ။heightoverflow-y: scroll;

ဒေတာဂုဏ်တော်များမှတဆင့်

သင်၏ topbar လမ်းညွှန်မှုတွင် scrollspy အပြုအမူကို အလွယ်တကူထည့်ရန်၊ သင် data-spy="scroll"စူးစမ်းလိုသောဒြပ်စင်သို့ ထည့်ပါ (ပုံမှန်အားဖြင့် ၎င်းသည် အများစုဖြစ်မည် <body>)။ ထို့နောက် data-targetမည်သည့် Bootstrap အစိတ်အပိုင်း၏ ပင်မဒြပ်စင် ID သို့မဟုတ် အတန်းအစား အရည်အချင်းကို ထည့်ပါ .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>

JavaScript မှတဆင့်

သင်၏ CSS တွင် ထည့်သွင်းပြီးနောက် position: relative;၊ JavaScript မှတဆင့် scrollspy ကိုခေါ်ဆိုပါ-

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

နည်းလမ်းများ

.scrollspy('refresh')

DOM မှဒြပ်စင်များထည့်ခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းနှင့်အတူ scrollspy ကိုအသုံးပြုသောအခါ၊ သင်သည်ထိုကဲ့သို့သောပြန်လည်ဆန်းသစ်သည့်နည်းလမ်းကိုခေါ်ဆိုရန် လိုအပ်သည်-

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-offset=""။

အဲ့ဒါနဲ့

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ပြောင်းနိုင်သော တဘ်များ tab.js

နမူနာ တက်ဘ်များ

dropdown menus များမှပင် ဒေသတွင်း အကြောင်းအရာအကန့်များမှတဆင့် လျင်မြန်သော၊ ပြောင်းလဲနေသော တဘ်လုပ်ဆောင်နိုင်စွမ်းကို ထည့်ပါ။ Nested တဘ်များကို ပံ့ပိုးမထားပါ။

အသုံးပြုမှု

JavaScript မှတဆင့် tabbable တက်ဘလက်များကိုဖွင့်ပါ (တက်ဘ်တစ်ခုစီသည် တစ်ဦးချင်း အသက်သွင်းရန် လိုအပ်သည်-

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

သေား

မည်သည့် JavaScript ကိုမျှ မရေးဘဲ တဘ် သို့မဟုတ် ဆေးပြား လမ်းညွှန်ချက်အား ရိုးရှင်းစွာ data-toggle="tab"သို့မဟုတ် data-toggle="pill"ဒြပ်စင်တစ်ခုပေါ်တွင် သတ်မှတ်ခြင်းဖြင့် အသက်သွင်းနိုင်သည်။ navတက်ဘ်သို့ အတန်းများ နှင့် nav-tabsအတန်းများကို ပေါင်းထည့်ခြင်းသည် ulBootstrap တက်ဘ်ပုံစံnav ကို အသုံးပြုမည်ဖြစ်ပြီး ၊ နှင့် nav-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 တွင် ကွန်တိန်နာ node တစ်ခု data-targetသို့မဟုတ် ပစ်မှတ်တစ်ခု ရှိသင့်သည်။ hrefအထက်ဖော်ပြပါ ဥပမာများတွင်၊ tabs များသည် attribute များဖြင့် <a>s ဖြစ်သည်။data-toggle="tab"

.tab('show')

ပေးထားသည့် တက်ဘ်ကို ရွေးပြီး ၎င်း၏ ဆက်စပ်အကြောင်းအရာကို ပြသသည်။ ယခင်က ရွေးချယ်ထားသည့် အခြားတဘ်ကို ရွေးမထားဘဲ ၎င်း၏ ဆက်စပ်အကြောင်းအရာကို ဝှက်ထားသည်။ တက်ဘ်အကန့်ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဆိုလိုသည်မှာ shown.bs.tabပွဲမဖြစ်ပွားမီ)။

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

အဲ့ဒါနဲ့

တက်ဘ်အသစ်တစ်ခုကို ပြသသောအခါ၊ အဖြစ်အပျက်များသည် အောက်ပါအစီအစဉ်အတိုင်း မီးလောင်သွားသည်-

1. hide.bs.tab(လက်ရှိသုံးနေသည့် တက်ဘ်ပေါ်တွင်)
2. show.bs.tab(ပြသမည့် tab တွင်)
3. hidden.bs.tab(ယခင်တက်ကြွသောတက်ဘ်တွင်၊ hide.bs.tabအစီအစဉ်နှင့်တူသည်)
4. shown.bs.tab(အသစ်စက်စက်ပြသထားသည့် တက်ဘ်ပေါ်တွင်၊ show.bs.tabဖြစ်ရပ်အတွက်နှင့် တူညီသည်)

မည်သည့်တက်ဘ်မှ အသက်ဝင်နေပြီးဖြစ်ပါက၊ hide.bs.tabနှင့် hidden.bs.tabအစီအစဉ်များကို အလုပ်ဖြုတ်မည်မဟုတ်ပါ။

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Jason Frame မှရေးသားသောအလွန်ကောင်းမွန်သော jQuery.tipsy ပလပ်အင်မှမှုတ်သွင်းထားသည်။ Tooltips များသည် ပုံများကို အားမကိုးဘဲ၊ ကာတွန်းများအတွက် CSS3 ကို အသုံးပြုကာ၊ ဒေသဆိုင်ရာ ခေါင်းစဉ်သိုလှောင်မှုအတွက် data-attributes များကို အပ်ဒိတ်ဗားရှင်းတစ်ခုဖြစ်သည်။

သုညအလျား ခေါင်းစဉ်ပါရှိသော ကိရိယာအကြံပြုချက်များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

ဥပမာများ

ကိရိယာဆိုင်ရာ အကြံပြုချက်များကို ကြည့်ရှုရန် အောက်ပါလင့်ခ်များကို နှိပ်ပါ။

Static tooltip

ရွေးချယ်စရာ လေးခု ရနိုင်သည်- အပေါ်၊ ညာဘက်၊ အောက်ခြေနှင့် ဘယ်ဘက် ညှိထားသည်။

လမ်းညွှန်လေးချက်

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

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

အသုံးပြုမှု

ကိရိယာအကြံပြုချက်ပလပ်အင်သည် လိုအပ်ချက်အရ အကြောင်းအရာနှင့် အမှတ်အသားများကို ထုတ်ပေးပြီး မူရင်းအားဖြင့် ၎င်းတို့၏အစပျိုးဒြပ်စင်နောက်တွင် ကိရိယာအကြံပြုချက်များကို နေရာချပေးသည်။

JavaScript မှတဆင့် tooltip ကိုအစပျိုးပါ

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

သေား

tooltip တစ်ခုအတွက် လိုအပ်သော markup သည် dataattribute တစ်ခုသာဖြစ်ပြီး titleသင် tooltip တစ်ခုရှိလိုသော HTML element တွင်ဖြစ်သည်။ ကိရိယာအကြံပြုချက်တစ်ခု၏ ထုတ်လုပ်ထားသော အမှတ်အသားသည် အနေအထားတစ်ခု လိုအပ်သော်လည်း (ပုံမှန်အားဖြင့်၊ topplugin မှ သတ်မှတ်ထားသည်)။

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

နည်းလမ်းများ

$().tooltip(options)

ဒြပ်စင်စုစည်းမှုသို့ ကိရိယာအကြံပြုချက် လက်ကိုင်ကို ပူးတွဲပါ။

.tooltip('show')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပေးချက်ကို ထုတ်ပြသည်။ ကိရိယာအကြံပြုချက်ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.tooltipပွဲမစမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" ဟုယူဆပါသည်။ သုညအလျား ခေါင်းစဉ်ပါရှိသော ကိရိယာအကြံပြုချက်များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

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

.tooltip('hide')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဝှက်ထားသည်။ ကိရိယာအကြံဉာဏ်ကို အမှန်တကယ် ဝှက်မထားမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.tooltipပွဲမဖြစ်ပွားမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" ဟုယူဆပါသည်။

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

.tooltip('toggle')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ပြောင်းရန်။ ကိရိယာအကြံပြုချက်ကို အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်းမပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.tooltipသို့မဟုတ် hidden.bs.tooltipဖြစ်ရပ်မဖြစ်ပွားမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" ဟုယူဆပါသည်။

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

.tooltip('destroy')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဖျောက်ဖျက်ပစ်သည်။ ကိုယ်စားလှယ်လွှဲအပ်ခြင်းကို အသုံးပြုသည့် ကိရိယာအကြံပြုချက်များ ( ရွေးချယ်ခွင့် ကို အသုံးပြု၍ ဖန်တီးထားသည့် )selector သည် ဆင်းသက်လာသော အစပျိုးဒြပ်စင်များပေါ်တွင် တစ်ဦးချင်း ဖျက်ဆီး၍မရပါ။

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

အဲ့ဒါနဲ့

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

iPad ပေါ်ရှိ အကြောင်းအရာများကဲ့သို့ ထပ်ဆင့်အသေးစား ထပ်ဆင့်ထည့်ရန်၊ ဒုတိယအချက်အလက်များအတွက် မည်သည့်ဒြပ်စင်သို့မဆို ထည့်ပါ။

ခေါင်းစဉ်နှင့် အကြောင်းအရာ နှစ်ခုစလုံးသည် သုညအလျားရှိသော Popover များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

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

ဥပမာများ

Static popover

ရွေးချယ်စရာ လေးခု ရနိုင်သည်- အပေါ်၊ ညာဘက်၊ အောက်ခြေနှင့် ဘယ်ဘက် ညှိထားသည်။

တိုက်ရိုက်သရုပ်ပြ

<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ပြုလုပ်သည့်နောက်ကလစ်တွင် popover များကိုပယ်ရန် trigger ကိုသုံးပါ။

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

အသုံးပြုမှု

JavaScript မှတဆင့် popovers ကိုဖွင့်ပါ-

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

နည်းလမ်းများ

$().popover(options)

အစိတ်အပိုင်းစုစည်းမှုတစ်ခုအတွက် popovers ကို စတင်သည်။

.popover('show')

ဒြပ်စင်တစ်ခု၏ popover ကိုဖော်ပြသည်။ popover အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.popoverပွဲမစမီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။ ခေါင်းစဉ်နှင့် အကြောင်းအရာ နှစ်ခုစလုံးသည် သုညအလျားရှိသော Popover များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

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

.popover('hide')

ဒြပ်စင်တစ်ခု၏ popover ကို ဝှက်ထားသည်။ popover သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.popoverပွဲမဖြစ်ပွားမီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။

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

.popover('toggle')

ဒြပ်စင်တစ်ခု၏ popover ကို ပြောင်းသည်။ popover သည် အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်းမပြုမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိခြင်း (ဥပမာ shown.bs.popoverသို့မဟုတ် hidden.bs.popoverဖြစ်ရပ်မဖြစ်ပွားမီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။

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

.popover('destroy')

ဒြပ်စင်တစ်ခု၏ popover ကို ဖျောက်ဖျက်ပစ်သည်။ ကိုယ်စားလှယ်လွှဲစာ ( ရွေးချယ်ခွင့် ကို အသုံးပြု၍ ဖန်တီးထားသည့်) Popovers များသည် မျိုးဆက်selector ပွားအစပျိုးဒြပ်စင်များပေါ်တွင် တစ်ဦးချင်း ဖျက်ဆီး၍မရပါ။

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

အဲ့ဒါနဲ့

$('#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"။ (ဒေတာ-api ၏ အလိုအလျောက်စတင်ခြင်းအား အသုံးပြုသည့်အခါ မလိုအပ်ပါ။)

$().alert('close')

DOM မှ ဖယ်ရှားခြင်းဖြင့် သတိပေးချက်ကို ပိတ်ပါ။ .fadeဒြပ်စင်ပေါ်တွင် အတန်းများ နှင့် အတန်းများ ရှိနေပါက .in၊ ၎င်းကို မဖယ်ရှားမီ သတိပေးချက် ပျောက်ကွယ်သွားပါမည်။

အဲ့ဒါနဲ့

Bootstrap ၏သတိပေးချက်ပလပ်အင်သည် သတိပေးချက်လုပ်ဆောင်နိုင်စွမ်းသို့ချိတ်ဆက်ရန်အတွက် အချို့သောဖြစ်ရပ်များကို ဖော်ထုတ်ပေးပါသည်။

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ခလုတ် များ button.js

ခလုတ်များဖြင့် ပိုမိုလုပ်ဆောင်ပါ။ ခလုတ်များကို ထိန်းချုပ်ရန် သို့မဟုတ် ကိရိယာဘားများကဲ့သို့သော နောက်ထပ်အစိတ်အပိုင်းများအတွက် ခလုတ်အုပ်စုများကို ဖန်တီးပါ။

တင်းမာသော

data-loading-text="Loading..."ခလုတ်တစ်ခုပေါ်ရှိ loading state ကိုသုံးရန် ထည့်ပါ ။

ဤအင်္ဂါရပ်ကို v3.3.5 ကတည်းက ရပ်ဆိုင်းထားပြီး v4 တွင် ဖယ်ရှားထားသည်။

<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"ခလုတ်တစ်ခုတည်းတွင် ခလုတ်ဖွင့်ခြင်းကို အသက်သွင်းရန် ပေါင်းထည့်ပါ ။

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

အမှန်ခြစ်/ရေဒီယို

၎င်းတို့၏ သက်ဆိုင်ရာပုံစံများတွင် ခလုတ်ဖွင့်ခြင်းကို ဖွင့်ရန် အမှန်ခြစ်ဘောက်စ် သို့မဟုတ် ရေဒီယိုထည့်သွင်းမှုများပါရှိသော data-toggle="buttons"တစ်ခုသို့ ထည့်ပါ ။.btn-group

<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 ကို ခေါက်သိမ်းပါ။

ပြောင်းလွယ်ပြင်လွယ် အမူအကျင့်အတွက် လက်တစ်ဆုပ်စာ အတန်းများကို အသုံးပြုသည့် ပြောင်းလွယ်ပြင်လွယ် ပလပ်အင်။

ဥပမာ

အတန်းအပြောင်းအလဲများမှတစ်ဆင့် အခြားဒြပ်စင်များကို ပြသရန်နှင့် ဝှက်ရန် အောက်ပါခလုတ်များကို နှိပ်ပါ။

• .collapseအကြောင်းအရာကို ဝှက်ထားသည်။
• .collapsingအကူးအပြောင်းများအတွင်း အသုံးပြုသည်။
• .collapse.inအကြောင်းအရာကိုပြသသည်။

hrefရည်ညွှန်းချက်နှင့်အတူ လင့်ခ် တစ်ခု သို့မဟုတ် ရည်ညွှန်းချက်ပါသည့် ခလုတ် တစ်ခုကို သင်သုံးနိုင်သည် data-target။ နှစ်ခုစလုံးတွင်၊ data-toggle="collapse"လိုအပ်သည်။

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

ဘာဂျာ ဥပမာ

အကော်ဒီယံ အကန့် အစိတ်အပိုင်းတစ်ခု ဖန်တီးရန် ပုံသေ ပြိုကျသည့် အပြုအမူကို တိုးချဲ့ပါ။

<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 ကို s နှင့် လဲလှယ်ရန်လည်း ဖြစ်နိုင်သည် .list-group။

အသုံးပြုမှု

ပြိုကျသောပလပ်အင်သည် လေးလံသော ရုတ်သိမ်းခြင်းကို ကိုင်တွယ်ရန် အတန်းအနည်းငယ်ကို အသုံးပြုသည်-

• .collapseအကြောင်းအရာကို ဝှက်ထားသည်။
• .collapse.inအကြောင်းအရာကိုပြသသည်။
• .collapsingအကူးအပြောင်းစတင်ချိန်တွင် ထည့်သွင်းပြီး ပြီးဆုံးသည့်အခါ ဖယ်ရှားသည်။

ဤအတန်းများကို တွင်တွေ့နိုင်ပါသည် component-animations.less။

ဒေတာဂုဏ်တော်များမှတဆင့်

data-toggle="collapse"ပြိုလဲ data-targetနိုင်သော ဒြပ်စင်တစ်ခု၏ ထိန်းချုပ်မှုကို အလိုအလျောက် သတ်မှတ်ပေးရန် အစိတ်အပိုင်းသို့ ပေါင်းထည့်ရုံသာ ။ data-targetပြိုကျမှုကို အသုံးချရန် ရည်ညွှန်းချက်သည် CSS ရွေးချယ်မှုအား လက်ခံသည် ။ collapseတွဲနိုင်သော အစိတ်အပိုင်းသို့ အတန်းကို ထည့်သွင်းရန် သေချာပါစေ ။ ၎င်းကို ပုံသေဖွင့်လိုလျှင် နောက်ထပ်အတန်းကို ထည့်ပါ in။

အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ထိန်းချုပ်မှုတစ်ခုသို့ ထည့်ရန်၊ ဒေတာရည်ညွှန်းချက်ကို ထည့်ပါ data-parent="#selector"။ လုပ်ဆောင်ချက်ကို ကြည့်ရန် ဒီမိုကို ကိုးကားပါ။

JavaScript မှတဆင့်

ကိုယ်တိုင်ဖွင့်ပါ-

$('.collapse').collapse()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-parent=""။

နည်းလမ်းများ

.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 ၏ပြိုကျမှုအတန်းသည် ပြိုကျသည့်လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးသည်။

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

carousel.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 တစ်ခုခုကို ထိုနေရာတွင် ထားလိုက်ပါက ၎င်းကို အလိုအလျောက် ညှိပြီး ဖော်မတ်လုပ်မည်ဖြစ်သည်။

ပထမဆလိုက်တံဆိပ်

Nulla vitae elit libero၊ a pharetra augue mollis interdum။

ဒုတိယဆလိုက်တံဆိပ်

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။

တတိယဆလိုက်တံဆိပ်

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

အရင် နောက်တစ်ခု

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

အသုံးပြုမှု

အဝိုင်းလေးများ

ချားရဟတ် များ ကောင်းမွန်စွာလုပ်ဆောင်နိုင်ရန် idအပြင်ဘက်ဆုံး ကွန်တိန်နာ (the ) ကို အသုံးပြုရန် လိုအပ်ပါသည်။ .carouselအဝိုင်းလေးများစွာကို ထည့်သည့်အခါ သို့မဟုတ် ဝိုင်းလေးတစ်ခုပြောင်းသည့်အခါ idသက်ဆိုင်ရာ ထိန်းချုပ်မှုများကို အပ်ဒိတ်လုပ်ရန် သေချာပါစေ။

ဒေတာဂုဏ်တော်များမှတဆင့်

အဝိုင်းလေး၏ တည်နေရာကို အလွယ်တကူ ထိန်းချုပ်နိုင်ရန် ဒေတာ attribute များကို သုံးပါ။ data-slideသော့ချက်စကားလုံးများကို လက်ခံသည် prevသို့မဟုတ် next၎င်း၏လက်ရှိအနေအထားနှင့် သက်ဆိုင်သော slide အနေအထားကို ပြောင်းလဲပေးသည်။ တနည်းအားဖြင့်၊ data-slide-toအကြမ်းဖျင်းဆလိုက်အညွှန်းကို အဝိုင်းလေးသို့ ဖြတ်ရန် data-slide-to="2"၊ ဆလိုက်အနေအထားမှအစရှိသည့် သီးခြားအညွှန်းတစ်ခုသို့ ပြောင်းပေးသည့် အဝိုင်းလေးဆီသို့ အသုံးပြုပါ 0။

စာမျက်နှာ data-ride="carousel"အား စတင်ချိန်မှ စတင်ကာ လှုပ်ရှားနေသော အဝိုင်းတစ်ဝိုင်းကို အမှတ်အသားပြုရန် ရည်ညွှန်းချက်���ို အသုံးပြုသည်။ တူညီသောအဝိုင်းလေး၏ ရှင်းလင်းပြတ်သားသော JavaScript အစပြုခြင်း (မလိုအပ်သောနှင့် မလိုအပ်ဘဲ) ပေါင်းစပ်အသုံးပြု၍မရပါ။

JavaScript မှတဆင့်

အဝိုင်းလေးအား ကိုယ်တိုင်ခေါ်ဆိုပါ-

$('.carousel').carousel()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-interval=""။

နည်းလမ်းများ

.carousel(options)

စိတ်ကြိုက်ရွေးချယ်စရာတစ်ခုဖြင့် အဝိုင်းလေးကို objectစတင်ပြီး အရာများမှတစ်ဆင့် စက်ဘီးစီးခြင်းကို စတင်သည်။

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

.carousel('cycle')

ဘယ်မှညာမှ အရာများ အဝိုင်းလေးကို ဖြတ်သန်းပါ။

.carousel('pause')

စက်ဘီးဝိုင်းလေးအား အရာများမှတဆင့် စက်ဘီးစီးခြင်းမှ ရပ်တန့်စေပါသည်။

.carousel(number)

အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။

.carousel('prev')

ယခင်အကုသိုလ်ကံမှ သံသရာ။

.carousel('next')

သံသရာလည်ရမယ့်အရာ။

အဲ့ဒါနဲ့

Bootstrap ၏ အဝိုင်းလေးအတန်းသည် အဝိုင်းလေး၏ လုပ်ဆောင်နိုင်စွမ်းကို ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်နှစ်ခုကို ဖော်ထုတ်ပေးပါသည်။

ဖြစ်ရပ်နှစ်ခုစလုံးတွင် အောက်ပါ အပိုဂုဏ်သတ္တိများ ရှိသည်။

• direction: အဝိုင်းလေး လျှောကျနေသော လမ်းကြောင်း (သော်လည်းကောင်း "left") "right"။
• relatedTarget: လက်ရှိအရာအဖြစ် နေရာသို့ လျှောကျနေသော DOM ဒြပ်စင်။

အဝိုင်းလေး၏ အဖြစ်အပျက်အားလုံးကို ဝိုင်းလေးကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="carousel">) တွင် ပစ်ခတ်သည်။

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js တွဲထည့်ပါ။

ဥပမာ

affix ပလပ်အင်သည် အ position: fixed;ဖွင့်အပိတ်လုပ်ကာ တွေ့ရသောအကျိုးသက်ရောက်မှုကို အတုယူသည် position: sticky;။ ညာဘက်ရှိ subnavigation သည် affix plugin ၏ တိုက်ရိုက်သရုပ်ပြမှုဖြစ်သည်။

အသုံးပြုမှု

ဒေတာရည်ညွှန်းချက်များမှတစ်ဆင့် သို့မဟုတ် သင့်ကိုယ်ပိုင် JavaScript ဖြင့် ကိုယ်တိုင်ပြုလုပ်ထားသော affix plugin ကို အသုံးပြုပါ။ အခြေအနေနှစ်ခုလုံးတွင်၊ သင်သည် သင်၏ဆက်ကပ်ထားသော အကြောင်းအရာ၏ နေရာချထားမှုနှင့် အကျယ်အတွက် CSS ကို ပေးရပါမည်။

မှတ်ချက်- Safari မှ တင်ဆက်သည့် ချို့ယွင်းချက်ကြောင့် ဆွဲထားသော သို့မဟုတ် တွန်းထားသော ကော်လံကဲ့သို့သော အတော်လေးနေရာယူထားသော ဒြပ်စင်တစ်ခုတွင် affix plugin ကို မသုံးပါနှင့် ။

CSS မှတဆင့် နေရာချထားခြင်း။

affix plugin သည် သီးခြားပြည်နယ်တစ်ခုစီကိုကိုယ်စားပြုသည်- .affix, .affix-top, နှင့် .affix-bottom. အမှန်တကယ် ရာထူးများကို ကိုင်တွယ်ရန် ဤအတန်းများကို သင်ကိုယ်တိုင် (ဤ plugin ၏ အမှီအခိုကင်းသော) အတွက် position: fixed;On မှလွဲ၍ စတိုင်များကို ပေးဆောင်ရပါမည် ။.affix

ဤသည်မှာ affix plugin အလုပ်လုပ်ပုံဖြစ်သည် ။

1. စတင်ရန်၊ ပလပ်အင် .affix-topသည် ဒြပ်စင်သည် ၎င်း၏ထိပ်ဆုံး အနေအထားတွင် ရှိနေကြောင်း ညွှန်ပြရန် ပေါင်းထည့်သည်။ ဤအချိန်တွင် CSS နေရာချထားရန်မလိုအပ်ပါ။
2. သင်ထည့်သွင်းလိုသော ဒြပ်စင်ကို ကျော်သွားပါက အမှန်တကယ် ကပ်ထားမှုကို ဖြစ်ပေါ်စေပါသည်။ ဤနေရာသည် (Bootstrap ၏ CSS မှ ပံ့ပိုးပေးသည်) .affixအစားထိုး .affix-topပြီး သတ်မှတ်သည် ။position: fixed;
3. အောက်ခြေအော့ဖ်ဆက်ကို သတ်မှတ်ပါက၊ ကျော်သွားပါက ၎င်းကို အစားထိုးသင့် .affixသည် .affix-bottom။ အော့ဖ်ဆက်များသည် ရွေးချယ်နိုင်သောကြောင့်၊ သတ်မှတ်ခြင်းတစ်ခုသည် သင့်အား သင့်လျော်သော CSS ကို သတ်မှတ်ရန် လိုအပ်သည်။ ဤကိစ္စတွင် position: absolute;လိုအပ်သည့်အခါထည့်ပါ။ ပလပ်အင်သည် ထိုနေရာတွင် ဒြပ်စင်ကို နေရာချထားရန် ဆုံးဖြတ်ရန် ဒေတာ attribute သို့မဟုတ် JavaScript ရွေးချယ်မှုကို အသုံးပြုသည်။

အောက်ပါအသုံးပြုမှုရွေးချယ်စရာများထဲမှ တစ်ခုခုအတွက် သင်၏ CSS ကို သတ်မှတ်ရန် အထက်ပါအဆင့်များကို လိုက်နာပါ။

ဒေတာဂုဏ်တော်များမှတဆင့်

မည်သည့်ဒြပ်စင်တွင်မဆို affix အပြုအမူကို လွယ်ကူစွာထည့်ရန်၊ data-spy="affix"သင်စူးစမ်းလိုသောဒြပ်စင်သို့ထည့်ရုံသာဖြစ်သည်။ ဒြပ်စင်တစ်ခု၏ ပင်ချိတ်ကို ပြောင်းရန် မည်သည့်အချိန်တွင် သတ်မှတ်ရန် အော့ဖ်ဆက်များကို သုံးပါ။

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

JavaScript မှတဆင့်

JavaScript မှတဆင့် affix plugin ကိုခေါ်ဆိုပါ-

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-offset-top="200"။

နည်းလမ်းများ

.affix(options)

သင့်အကြောင်းအရာကို ပူးတွဲပါအကြောင်းအရာအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object။

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

.affix('checkPosition')

သက်ဆိုင်ရာဒြပ်စင်များ၏ အတိုင်းအတာ၊ အနေအထားနှင့် scroll အနေအထားတို့ကို အခြေခံ၍ affix ၏အခြေအနေကို ပြန်လည်တွက်ချက်သည်။ အခြေအနေအသစ်အရ အဆိုပါ .affix, .affix-top, နှင့် .affix-bottomအတန်းများကို ထည့်သွင်းခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းတို့ကို ပြုလုပ်ထားသည်။ ထည့်သွင်းထားသော အကြောင်းအရာ၏ အတိုင်းအတာများ သို့မဟုတ် ပစ်မှတ်ဒြပ်စင်များ ပြောင်းလဲသည့်အခါတိုင်း၊ ကပ်ထားသော အကြောင်းအရာ၏ မှန်ကန်သောနေရာချထားမှုကို သေချာစေရန် ဤနည်းလမ်းကို ခေါ်ဆိုရန် လိုအပ်သည်။

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

အဲ့ဒါနဲ့

Bootstrap ၏ affix plugin သည် affix လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။