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

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

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

စုစည်းထားသော JavaScript ကိုအသုံးပြုခြင်း။

နှစ်ခုလုံး bootstrap.jsနှင့် bootstrap.min.jsဖိုင်တစ်ခုတည်းတွင် ပလပ်အင်အားလုံး ပါဝင်ပါသည်။ တစ်ခုပဲပါဝင်ပါ။

ပလပ်အင် မှီခိုမှုများ

အချို့သော ပလပ်အင်များနှင့် CSS အစိတ်အပိုင်းများသည် အခြားပလပ်အင်များပေါ်တွင် မူတည်သည်။ အကယ်၍ သင်သည် ပလပ်အင်များကို တစ်ဦးချင်းစီ ထည့်သွင်းပါက၊ စာရွက်စာတမ်းများတွင် ဤမှီခိုမှု ရှိမရှိ စစ်ဆေးပါ။ ပလပ်အင်အားလုံးသည် jQuery ပေါ်တွင်မူတည်ကြောင်းကိုလည်း သတိပြုပါ (၎င်းသည် plugin ဖိုင်များ ရှေ့တွင် jQuery ကို ထည့်သွင်းရမည်ဖြစ်သည်)။ jQuery ၏ မည်သည့်ဗားရှင်းကို ပံ့ပိုးထားသည်ကို သိရှိရန် ကျွန်ုပ်တို့နှင့် တိုင်ပင် ပါ။bower.json

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

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

ဒေတာရည်ညွှန်းချက်များမှတစ်ဆင့် ဒြပ်စင်တစ်ခုလျှင် ပလပ်အင်တစ်ခုသာ

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

ပရိုဂရမ်မာတစ် 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 ပြန်လည်ဖွင့်နည်း) ကို ရှင်းပြရန်နှင့်/သို့မဟုတ် သင့်စိတ်ကြိုက် တုံ့ပြန်မှုများကို ထည့်သွင်းပါ။

ပြင်ပစာကြည့်တိုက်များ

Bootstrap သည် Prototype သို့မဟုတ် jQuery UI ကဲ့သို့သော ပြင်ပမှ JavaScript စာကြည့်တိုက်များကို တရားဝင် ပံ့ပိုးမထားပါ ။ ဖြစ်ရပ်များနှင့် နာမည် .noConflictသတ်မှတ်ထားသော်လည်း၊ သင်ကိုယ်တိုင် ပြင်ဆင်ရန် လိုအပ်သည့် လိုက်ဖက်ညီမှု ပြဿနာများရှိနိုင်ပါသည်။

ကူးပြောင်းမှုများ 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 များသည် ချောမွေ့သော်လည်း လိုက်လျောညီထွေရှိသော၊ အနိမ့်ဆုံးလိုအပ်သော လုပ်ဆောင်နိုင်စွမ်းနှင့် စမတ်ပုံသေများပါရှိသော ဒိုင်ယာလော့ခ်ကို ညွှန်ပြပါသည်။

အဖွင့်ပုံစံမျိုးစုံကို မပံ့ပိုးပါ။

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

Modal markup နေရာချထားခြင်း။

modal ၏အသွင်အပြင်နှင့်/သို့မဟုတ်လုပ်ဆောင်နိုင်စွမ်းကိုထိခိုက်စေသောအခြားအစိတ်အပိုင်းများကိုရှောင်ရှားရန် modal ၏ HTML ကုဒ်ကို သင့်စာရွက်စာတမ်းတွင် ထိပ်တန်းအဆင့်အနေအထားတွင် အမြဲထားရန်ကြိုးစားပါ။

မိုဘိုင်းလ်စက်က သတိပေးသည်။

မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် 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>

မော်ဒယ်များကို အသုံးပြုနိုင်ရန် ပြုလုပ်ပါ။

modal ခေါင်းစဉ်၊ to နှင့် သူ့ဘာသာသူ role="dialog"ကို ကိုးကားပြီး ထည့်ရန် သေချာပါ စေ။aria-labelledby="...".modalrole="document".modal-dialog

ထို့အပြင်၊ aria-describedbyon on ဖြင့် သင်၏ modal dialog ၏ ရှင်းလင်းချက်ကို သင် ပေးနိုင်ပါသည် .modal

YouTube ဗီဒီယိုများကို ထည့်သွင်းခြင်း။

YouTube ဗီဒီယိုများကို modals တွင် မြှုပ်နှံခြင်းသည် ဖွင့်ခြင်းနှင့် အခြားအရာများကို အလိုအလျောက်ရပ်တန့်ရန် Bootstrap တွင် မရှိသည့် နောက်ထပ် JavaScript လိုအပ်သည်။ နောက်ထပ်အချက်အလက်များအတွက် ဤအသုံးဝင်သော Stack Overflow ပို့စ်ကို ကြည့်ပါ ။

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

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

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
နောက်ခံကား boolean သို့မဟုတ် string'static' မှန်ပါတယ်။ ပုံစံ-နောက်ခံဒြပ်စင်တစ်ခု ပါဝင်သည်။ တနည်းအားဖြင့် staticကလစ်ပေါ်တွင် modal ကို မပိတ်သော နောက်ခံကားအတွက် သတ်မှတ်ပါ။
ကီးဘုတ် ဘူလီယံ မှန်ပါတယ်။ Escape သော့ကို နှိပ်လိုက်သောအခါ modal ကို ပိတ်ပါ။
ရှိုး ဘူလီယံ မှန်ပါတယ်။ စတင်သောအခါတွင် ပုံစံငယ်ကို ပြသည်။
အဝေး လမ်းကြောင်း အတုအယောင်

ဤရွေးချယ်မှုကို v3.3.0 ကတည်းက ရပ်တန့်ထားပြီး v4 တွင် ဖယ်ရှားထားသည်။ client-side templateing သို့မဟုတ် data binding framework သို့မဟုတ် jQuery.load ကို သင့်ကိုယ်သင် ခေါ်ဆိုခြင်းအစား ကျွန်ုပ်တို့ အကြံပြုပါသည်။

အဝေးမှ URL တစ်ခုကို ပေးမည်ဆိုပါက၊ အကြောင်းအရာသည် jQuery ၏နည်းလမ်းမှတစ်ဆင့် တစ်ကြိမ်တည်းတင်ပြီး div loadထဲသို့ ထိုးသွင်း မည်ဖြစ်သည်။ အကယ်၍ သင်သည် data-api ကို အသုံးပြုနေပါက၊ သင်သည် အဝေးထိန်း အရင်းအမြစ်ကို သတ်မှတ်ရန် ရည်ညွှန်းချက်ကို .modal-contentတစ်နည်းအားဖြင့် အသုံးပြုနိုင်သည် ။ hrefဤအရာ၏ ဥပမာကို အောက်တွင် ပြထားသည်။

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

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

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

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

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

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

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

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

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

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

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

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

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

အဲ့ဒါနဲ့

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

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

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.modal showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTargetပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။
show.bs.modal မော်ဒယ်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTargetပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။
hide.bs.modal hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.modal အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
loaded.bs.modal remoteရွေးချယ်စရာ ကို အသုံးပြု၍ 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()

data-toggle="dropdown"လိုအပ်နေပါသေးတယ်။

သင့် dropdown ကို JavaScript မှတဆင့် ခေါ်သည်ဖြစ်စေ သို့မဟုတ် data-api ကိုသုံးသည်ဖြစ်စေ ၊ data-toggle="dropdown"dropdown ၏ trigger element တွင် အမြဲရှိနေရန် လိုအပ်ပါသည်။

တစ်ခုမှ

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

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

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

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.dropdown show instance method ကို ခေါ်သောအခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင်ပါသည်။
show.bs.dropdown dropdown ကိုအသုံးပြုသူမြင်နိုင်စေရန်ပြုလုပ်သောအခါ (CSS အပြောင်းအရွှေ့များပြီးမြောက်ရန်စောင့်ဆိုင်းပါမည်)။
hide.bs.dropdown hide instance method ကို ခေါ်သောအခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖြုတ်သည်။
hidden.bs.dropdown dropdown ကို အသုံးပြုသူမှ ဝှက်ထားမှုပြီးသွားသောအခါ (CSS အပြောင်းအရွှေ့များ ပြီးဆုံးရန် စောင့်ပါမည်)။
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

navbar တွင်ဥပမာ

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

@ဖြိုး

ကြော်ငြာ leggings သော့တာ၊ နေ့လယ်စာ id အနုပညာပါတီ dolor အလုပ်သမား။ သူတို့ ရောင်းမကုန်ခင် ကောက်ဆွ yr enim lo-fi။ Tumblr လယ်မှ စားပွဲသို့ စက်ဘီးအခွင့်အရေး ဘာမဆို။ Anime keffiyeh carles cardigan။ Velit seitan mcsweeney ၏ ဓာတ်ပုံဆိုင် 3 wolf moon irure Cosby ဆွယ်တာ lomo jean ဘောင်းဘီတို၊ williamsburg hoodie minim qui နှင့် cardigan trust fund culpa biodiesel wes anderson aesthetic။ Nihil တက်တူးထိုးထားသော accusamus၊ အထေ့အငေါ့ရှိသော ဇီဝဒီဇယ် keffiyeh လက်မှုပညာရှင် ullamco ၏ အကျိုးဆက်။

@mdo

Veniam marfa နှုတ်ခမ်းမွှေးစကိတ်ဘုတ်၊ adipisicing fugiat velit မုတ်ဆိတ်မွေး Freegan မုတ်ဆိတ် aliqua cupidatat mcsweeney's vero Cupidatat လေးလုံး loko nisi, ea helvetica nulla carles။ တက်တူးထိုးထားတဲ့ cosby ဆွယ်တာ အစားအသောက်ထရပ်ကား၊ mcsweeney's quis non freegan လုပ်ထားပါတယ်။ Lo-fi wes anderson +1 sartorial။ Carles non aesthetic exercitation quis gentrify ။ Brooklyn adipisicing craft beer vice keytar deserunt

တစ်ခု

Occaecat commodo aliqua delectus ။ Fap craft beer deserunt စကိတ်ဘုတ် ea ။ Lomo စက်ဘီးအခွင့်အရေး adipisicing banh mi၊ velit ea sunt နောက်အဆင့်တွင် magna veniam တွင် တစ်ခုတည်းသော မူရင်းကော်ဖီကို ရှာဖွေပါ။ High life id ဗီနိုင်း၊ ပဲ့တင်သံပန်းခြံ consequat quis aliquip banh mi ကောက်ဆွ။ Vero VHS သည် adipisicing ဖြစ်သည်။ Consectetur nisi DIY minim messenger အိတ်။ ခိုင်မာသော၊ ရေရှည်တည်တံ့သော delectus consectetur fanny pack iphone ကို ယုံကြည်ပါ။

နှစ်ခု

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 ဘလော့ဂ်၊ culpa messenger bag marfa delectus food truck မှန်သမျှ။ Sapiente synth id assumenda ။ Locavore sed helvetica cliche အထေ့အငေါ့၊ ၎င်းတို့အကြောင်း သင်မကြားဖူးသော မိုးခြိမ်းသံများသည် hoodie gluten-free lo-fi fap aliquip ကို သက်ရောက်မှုရှိသည်။ မရောင်းမီ Labore elit placeat ၊ terry Richardson ၏ ထင်ရှားသော နေ့လည်စာ nesciunt quis cosby ဆွယ်တာအင်္ကျီ pariatur keffiyeh ut helvetica လက်မှုပညာရှင်။ Cardigan လက်ရာ ဘီယာ seitan readymade velit။ VHS chambray labouris tempor veniam။ တိရစ္ဆာန် mollit minim commodo ullamco မိုးကြိုးပစ်များ။

အသုံးပြုမှု

Bootstrap nav လိုအပ်သည်။

Scrollspy သည် လက်ရှိတွင် အသုံးပြုနေသော လင့်ခ်များကို သင့်လျော်စွာ မီးမောင်းထိုးပြရန်အတွက် Bootstrap nav အစိတ်အပိုင်း ကို အသုံးပြုရန်လိုအပ်ပါသည်။

ဖြေရှင်းနိုင်သော ID ပစ်မှတ်များ လိုအပ်သည်။

Navbar လင့်ခ်များတွင် ဖြေရှင်းနိုင်သော id ပစ်မှတ်များ ရှိရပါမည်။ ဥပမာအားဖြင့်၊ <a href="#home">home</a>DOM ကဲ့သို့သော အရာတစ်ခုနှင့် ကိုက်ညီရမည် <div id="home"></div>

ပစ်မှတ် မဟုတ်သော :visibleအရာများကို လျစ်လျူရှုထားသည်။

:visiblejQuery အရ မဟုတ်သော ပစ်မှတ်များကို လျစ်လျူရှုမည်ဖြစ်ပြီး ၎င်းတို့၏ သက်ဆိုင်ရာ nav ပစ္စည်းများကို မည်သည့်အခါမှ မီးမောင်းထိုးပြမည်မဟုတ်ပါ။

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

အကောင်အထည်ဖော်မှုနည်းလမ်းရှိပါစေ၊ 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=""

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
နှိမ်သည်။ နံပါတ် ၁၀ လှိမ့်မည့် အနေအထားကို တွက်ချက်သောအခါ အပေါ်မှ ထေမိရန် ပစ်ဆယ်များ။

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား ဖော်ပြချက်
activate.bs.scrollspy scrollspy မှ အရာအသစ်တစ်ခု စတင်သည့်အခါတိုင်း ဤဖြစ်ရပ်သည် မီးလောင်ပါသည်။
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

ဂျင်းဘောင်းဘီအစိမ်း Austin ဂျင်းဘောင်းဘီတိုကို သင် မကြားမိဖူးဘူး။ Nesciunt တို့ဟူးငုတ်တိုမြို့ aliqua၊ retro synth master cleanse။ နှုတ်ခမ်းမွှေး cliche tempor၊ Williamsburg carles vegan helvetica။ Reprehenderit butcher retro keffiyeh dreamcatcher synth။ Cosby ဆွယ်တာအင်္ကျီ eu banh mi၊ qui irure terry richardson ex ပြည်ကြီးငါး။ Aliquip placeat salvia cillum iphone။ Seitan aliquip quis cardigan အမေရိကန်အ၀တ်အထည်၊ သားသတ်သမား 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.

တဘ်ထည့်ထားသော လမ်းကြောင်းကို တိုးချဲ့သည်။

ဤပလပ်အင်သည် တက်ဘ် လုပ်ထားသော လမ်းကြောင်းပြမှု အစိတ်အပိုင်း ကို tabbable ဧရိယာများထည့်ရန် တိုးချဲ့သည်။

အသုံးပြုမှု

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အစီအစဉ်များကို အလုပ်ဖြုတ်မည်မဟုတ်ပါ။

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.tab ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်၊ သို့သော် တက်ဘ်အသစ်ကို မပြသမီ။ အသုံးပြု event.targetနေ event.relatedTargetသည့် တက်ဘ်နှင့် ယခင်အသုံးပြုနေသည့် တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ်ထားရန် အသုံးပြုပါ။
ပြထားသည်.bs.tab တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ အသုံးပြု event.targetနေ event.relatedTargetသည့် တက်ဘ်နှင့် ယခင်အသုံးပြုနေသည့် တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ်ထားရန် အသုံးပြုပါ။
hide.bs.tab တက်ဘ်အသစ်တစ်ခုကို ပြသသည့်အခါ ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဖျောက်ထားရပါမည်)။ လက်ရှိ အသုံးပြု နေသည့် တက်ဘ်နှင့် မကြာမီ-စတော့မည့်-အသက်ဝင်မည့် တက်ဘ်အသစ်ကို အသီးသီး ပစ်မှတ်ထားပြီး event.targetအသုံးပြု ပါ။event.relatedTarget
hidden.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
})

Tooltips tooltip.js

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

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

ဥပမာများ

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

တင်းတင်းကျပ်ကျပ် ဘောင်းဘီနောက်ထပ် keffiyeh သူတို့အကြောင်း ကို သင် မကြားမိဖူးဘူး။ ဓါတ်ပုံဆိုင်တွင် မုတ်ဆိတ်စိမ်းစိမ်း denim letterpress vegan messenger bag ငုတ်တို။ Farm-to-table seitan၊ mcsweeney ၏ ရေရှည်တည်တံ့သော quinoa 8-bit အမေရိကန်အ၀တ်အထည် တွင် terry richardson vinyl chambray ပါရှိသည်။ မုတ်ဆိတ်ငုတ်တို၊ cardigans banh mi lomo မိုးကြိုးပစ်။ တို့ဟူး ဇီဝဒီဇယ် Williamsburg marfa၊ လေးလုံးသော loko mcsweeney ၏ သန့်စင်သော vegan chambray။ တကယ်ကို အထင်ကြီးစရာကောင်းတဲ့ သော့တာပဲဖြစ်ဖြစ်၊ လယ်ကွင်းကနေ စားပွဲပေါ်မှာ ဘဏ်လုပ်ငန်းဖြစ်တဲ့ Austin twitter က freegan cred denim တစ်ခုတည်း-မူရင်းကော်ဖီဗိုင်းရပ်စ်ကို ကိုင်တွယ် ပါတယ်

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>

ပါဝင်လုပ်ဆောင်နိုင်စွမ်း

စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက်၊ Tooltip နှင့် Popover data-apis တို့ကို ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် စတင်လုပ်ဆောင်ရမည်ဟု ဆိုလိုသည် ။

စာမျက်နှာတစ်ခုပေါ်ရှိ tooltips အားလုံးကို အစပြုရန် နည်းလမ်းတစ်ခုမှာ ၎င်းတို့၏ data-toggleအရည်အချင်းဖြင့် ၎င်းတို့ကို ရွေးချယ်ရန်ဖြစ်သည်-

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

လိုင်းမျိုးစုံလင့်ခ်များ

တစ်ခါတစ်ရံတွင် သင်သည် စာကြောင်းများစွာကို ခြုံလွှမ်းသည့် ဟိုက်ပါလင့်ခ်တစ်ခုသို့ ကိရိယာအကြံပြုချက်တစ်ခု ထည့်လိုသည်။ tooltip plugin ၏ မူရင်းအပြုအမူမှာ ၎င်းကို အလျားလိုက်နှင့် ဒေါင်လိုက်ဗဟိုပြုရန်ဖြစ်သည်။ white-space: nowrap;ဒါကိုရှောင်ရှားရန် သင်၏ကျောက်ဆူးများ ထဲသို့ ထည့်ပါ ။

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

တစ်ခု .btn-groupသို့မဟုတ် တစ်ခုအတွင်း ဒြပ်စင်များ .input-group၊ သို့မဟုတ် ဇယားဆက်စပ်ဒြပ်စင်များ ( <td>, <th>, , <tr>, <thead>, , <tbody>, <tfoot>) ကို container: 'body'အသုံးပြုသည့်အခါ မလိုလားအပ်သော ဘေးထွက်ဆိုးကျိုးများ (ဥပမာ- ဒြပ်စင်သည် ပိုမိုကျယ်ပြန့်လာပြီး/ ကဲ့သို့ ကျယ်ပြန့်လာသည်နှင့်/ သို့မဟုတ် tooltip ကို အစပျိုးသောအခါ ၎င်း၏ လုံးဝန်းသောထောင့်များ ဆုံးရှုံးခြင်း)။

ဝှက်ထားသောဒြပ်စင်များပေါ်တွင် tooltips ပြရန်မကြိုးစားပါနှင့်

$(...).tooltip('show')ပစ်မှတ်ဒြပ်စင်ဖြစ်သည့်အခါ ခေါ်ဆို ခြင်းသည် ကိရိယာအကြံပြုချက် display: none;ကို မှားယွင်းစွာ နေရာချထားခြင်း ဖြစ်စေသည်။

ကီးဘုတ်နှင့် အထောက်အကူပြု နည်းပညာအသုံးပြုသူများအတွက် အသုံးပြုနိုင်သော ကိရိယာအကြံပြုချက်များ

ကီးဘုတ်ဖြင့် သွားလာနေသော အသုံးပြုသူများနှင့် အထောက်အကူပြု နည်းပညာအသုံးပြုသူများ အထူးသဖြင့် လင့်ခ်များ၊ ဖောင်ပုံစံ ထိန်းချုပ်မှုများ သို့မဟုတ် ရည်ညွှန်းချက်ဖြင့် မထင်မှတ်ထားသော ဒြပ်စင်များကဲ့သို့ ကီးဘုတ်-အာရုံစိုက်နိုင်သော အစိတ်အပိုင်းများသို့ ကိရိယာအကြံပြုချက်များကိုသာ ထည့်သွင်းသင့်သည် tabindex="0"

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

disabledကိရိယာတစ်ခု သို့မဟုတ် ဒြပ်စင်တစ်ခုသို့ ကိရိယာတစ်ခု သို့မဟုတ် .disabledဒြပ်စင် တစ်ခုကို ထည့်ရန် ၊ အစိတ်အပိုင်းတစ်ခု၏အတွင်း၌ အစိတ်အပိုင်းကို ထည့်သွင်းပြီး ယင်းအစား <div>ကိရိယာအကြံပြုချက်ကို ၎င်းတွင် <div>အသုံးပြုပါ။

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

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

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ tooltip သို့ CSS မှိန်သောအကူးအပြောင်းကိုသုံးပါ။
ကွန်တိန်နာ string | အတုအယောင် အတုအယောင်

ကိရိယာအကြံဉာဏ်ကို သီးခြားဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်သည်။ ဥပမာ- container: 'body'။ ဤရွေးချယ်မှုသည် အထူးအသုံးဝင်သည် - ၎င်းသည် အစပျိုးသည့်ဒြပ်စင်အနီး စာရွက်စာတမ်း၏စီးဆင်းမှုတွင် tooltip ကို ဝင်းဒိုးအရွယ်အစားပြောင်းလဲနေစဉ်အတွင်း tooltip အား လွှင့်ထုတ်ခြင်းဒြပ်စင်မှ ဝေးကွာသွားခြင်းမှ ကာကွယ်နိုင်သောကြောင့် ၎င်းသည် အထူးအသုံးဝင်သည်။

နှောင့်နှေးခြင်း။ နံပါတ် | အရာဝတ္ထု ၀ယ်တယ်။

ကိရိယာအကြံပြုချက် (ms) ပြသခြင်းနှင့် ဖုံးကွယ်ခြင်း နှောင့်နှေးခြင်း - လက်စွဲခလုတ် အမျိုးအစားနှင့် မသက်ဆိုင်ပါ။

နံပါတ်တစ်ခုကို ပေးဆောင်ပါက၊ ဝှက်ထား/ရှိုးနှစ်ခုစလုံးအတွက် နှောင့်နှေးမှုကို သက်ရောက်သည်။

အရာဝတ္ထုဖွဲ့စည်းပုံမှာ-delay: { "show": 500, "hide": 100 }

html ဘူလီယံ အတုအယောင် HTML ကို tooltip တွင်ထည့်ပါ။ မှားယွင်းပါက၊ jQuery ၏ textနည်းလမ်းကို DOM ထဲသို့ အကြောင်းအရာထည့်သွင်းရန် အသုံးပြုမည်ဖြစ်သည်။ XSS တိုက်ခိုက်မှုအတွက် သင်စိုးရိမ်ပါက စာသားကို အသုံးပြုပါ။
နေရာချထားခြင်း။ string | လုပ်ဆောင်ချက် 'ထိပ်'

tooltip - top | နေရာချနည်း အောက်ခြေ | ဘယ်ဘက် | မှန် | အော်တို။
"အော်တို" ကို သတ်မှတ်သောအခါ၊ ၎င်းသည် ကိရိယာအကြံပြုချက်အား ဒိုင်းနမစ်ဖြင့် ပြန်ပြောင်းပေးလိမ့်မည်။ ဥပမာအားဖြင့်၊ နေရာချထားမှုသည် "အလိုအလျောက်ဘယ်ဘက်" ဖြစ်ပါက၊ ဖြစ်နိုင်လျှင် tooltip သည် ဘယ်ဘက်သို့ပြသမည်ဖြစ်ပြီး၊ သို့မဟုတ်ပါက ၎င်းသည် ညာဘက်သို့ပြသမည်ဖြစ်သည်။

နေရာချထားမှုကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် tooltip DOM node ဖြင့် ခေါ်ပြီး ၎င်း၏ဒုတိယအဖြစ် အစပျိုးသည့်ဒြပ်စင် DOM node ကို ခေါ်သည်။ အကြောင်းအရာကို thistooltip instance အဖြစ် သတ်မှတ်ထားသည်။

ရွေးချယ်မှု ကြိုးတစ်ချောင်း အတုအယောင် ရွေးချယ်သူအား ပံ့ပိုးပေးမည်ဆိုပါက၊ ကိရိယာအကြံပြုချက် အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်မည်ဖြစ်သည်။ လက်တွေ့တွင်၊ tooltips များထည့်သွင်းရန် dynamic HTML အကြောင်းအရာကိုဖွင့်ရန် ၎င်းကိုအသုံးပြုသည်။ ဒါကို ကြည့် ပြီး ဗဟုသုတရဖွယ် ဥပမာတစ်ခုကို ကြည့်ပါ ။
ပုံစံခွက် ကြိုးတစ်ချောင်း '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ကိရိယာအကြံပြုချက်ကို ဖန်တီးသည့်အခါ အသုံးပြုရန် HTML ကို အခြေခံပါ။

tooltips titleများကို အထဲသို့ ထိုးသွင်းပါမည် .tooltip-inner

.tooltip-arrowtooltip ၏မြှားဖြစ်လာလိမ့်မည်။

အပြင်ဘက်ဆုံး wrapper element တွင် .tooltipclass ရှိသင့်သည်။

ခေါင်းစဥ် string | လုပ်ဆောင်ချက် ''

ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး title

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

အစပျိုး ကြိုးတစ်ချောင်း 'အာရုံစူးစိုက်မှု' ကိရိယာအကြံပြုချက်ကို စတင်လုပ်ဆောင်ပုံ - ကလစ် | ပျံဝဲ | အာရုံ | လက်စွဲ။ သင်သည် အစပျိုးမှုများစွာကို ကျော်ဖြတ်နိုင်သည်။ သူတို့ကို နေရာလွတ်တစ်ခုနဲ့ ခွဲလိုက်ပါ။ manualတခြား trigger တွေနဲ့ ပေါင်းစပ်လို့မရပါဘူး။
မြင်ကွင်း string | အရာဝတ္ထု | လုပ်ဆောင်ချက် { ရွေးချယ်မှု- 'ကိုယ်ထည်'၊ အကွက်- 0 }

ကိရိယာအကြံဉာဏ်ကို ဤဒြပ်စင်၏ဘောင်များအတွင်း ထားရှိပါ။ ဥပမာ- viewport: '#viewport'သို့မဟုတ်{ "selector": "#viewport", "padding": 0 }

လုပ်ဆောင်ချက်တစ်ခုအား ပေးမည်ဆိုပါက၊ ၎င်းကို ၎င်း၏တစ်ခုတည်းသော အကြောင်းပြချက်အဖြစ် ဒြပ်စင် DOM node ဖြင့် ခေါ်သည်။ အကြောင်းအရာကို thistooltip instance အဖြစ် သတ်မှတ်ထားသည်။

ကိရိယာတစ်ခုချင်းစီအတွက် ဒေတာရည်ညွှန်းချက်များ

အထက်တွင်ရှင်းပြထားသည့်အတိုင်း ဒေတာ attributes များကိုအသုံးပြုခြင်းအားဖြင့် တစ်ဦးချင်းစီ tooltips အတွက် ရွေးချယ်စရာများကို တနည်းအားဖြင့် သတ်မှတ်နိုင်ပါသည်။

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

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

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.tooltip showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
show.bs.tooltip ကိရိယာအကြံပြုချက်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
hide.bs.tooltip hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.tooltip ကိရိယာအကြံပြုချက်သည် အသုံးပြုသူထံမှ ဝှက်ထားမှုပြီးသွားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
inserted.bs.tooltip show.bs.tooltipကိရိယာအကြံပြုချက် နမူနာပုံစံကို DOM သို့ ထည့်လိုက်သောအခါ ဤဖြစ်ရပ်ကို ဖယ်ရှားလိုက်ပါသည်။
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

ပလပ်အင် မှီခိုမှု

Popovers သည် သင်၏ Bootstrap ဗားရှင်းတွင် tooltip plugin ကို လိုအပ်ပါသည်။

ပါဝင်လုပ်ဆောင်နိုင်စွမ်း

စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက်၊ Tooltip နှင့် Popover data-apis တို့ကို ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် စတင်လုပ်ဆောင်ရမည်ဟု ဆိုလိုသည် ။

စာမျက်နှာတစ်ခုပေါ်ရှိ popover အားလုံးကို အစပြုရန် နည်းလမ်းတစ်ခုမှာ ၎င်းတို့၏ data-toggleအရည်အချင်းဖြင့် ၎င်းတို့ကို ရွေးချယ်ရန်ဖြစ်သည်-

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

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

.btn-groupတစ်ခု သို့မဟုတ် တစ်ခုအတွင်း ဒြပ်စင်များပေါ်တွင် popovers ကိုအသုံးပြုသောအခါ .input-groupသို့မဟုတ် ဇယားဆက်စပ်ဒြပ်စင်များ ( <td>, <th>, , <tr>, <thead>, , <tbody>, <tfoot>) ကို container: 'body'အသုံးပြုသည့်အခါ မလိုလားအပ်သောဘေးထွက်ဆိုးကျိုးများ (ဥပမာ- ဒြပ်စင်သည် ပိုမိုကျယ်ပြန့်လာပြီး/ ကဲ့သို့သော ဒြပ်စင်များကဲ့သို့ ကျယ်ပြန့်လာသည်နှင့်/ သို့မဟုတ် popover စတင်သောအခါ ၎င်း၏ လုံးဝန်းသောထောင့်များ ဆုံးရှုံးသွားခြင်း)။

လျှို့ဝှက်ဒြပ်စင်များပေါ်တွင် popovers ပြရန်မကြိုးစားပါနှင့်

$(...).popover('show')ပစ်မှတ်ဒြပ်စင်ကို ခေါ်ဆိုသောအခါတွင် ပေါ် ဗာ display: none;ကို မှားယွင်းစွာ နေရာချထားခြင်း ဖြစ်စေသည်။

မသန်စွမ်းဒြပ်စင်များပေါ်တွင် ပေါ်လာသော ထုပ်ပိုးသည့်ဒြပ်စင်များ လိုအပ်သည်။

disabledတစ်ခု သို့မဟုတ် ဒြပ်စင် တစ်ခုသို့ popover တစ်ခုထည့်ရန် .disabled၊ a အတွင်းရှိ element ကိုထည့်ကာ ထို အစား <div>popover ကို အသုံးပြုပါ။<div>

လိုင်းမျိုးစုံလင့်ခ်များ

တစ်ခါတစ်ရံတွင် သင်သည် စာကြောင်းများစွာကို ဖုံးအုပ်ထားသော ဟိုက်ပါလင့်ခ်တစ်ခုသို့ ပေါ့ဗာတစ်ခုကို ထည့်လိုသည်။ popover plugin ၏ မူရင်းအပြုအမူမှာ ၎င်းကို အလျားလိုက်နှင့် ဒေါင်လိုက် အလယ်ဗဟိုထားရန်ဖြစ်သည်။ white-space: nowrap;ဒါကိုရှောင်ရှားရန် သင်၏ကျောက်ဆူးများ ထဲသို့ ထည့်ပါ ။

ဥပမာများ

Static popover

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

Popover ထိပ်တန်း

lobortis တွင် Sed posuere consectetur est. Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။

Popover မဟုတ်လား။

lobortis တွင် Sed posuere consectetur est. Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။

Popover အောက်ခြေ

lobortis တွင် Sed posuere consectetur est. Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။

Popover ကျန်တယ်။

lobortis တွင် Sed posuere consectetur est. Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။

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

<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 ကိုသုံးပါ။

dismiss-on-next-click အတွက် သီးခြား markup လိုအပ်သည်။

သင့်လျော်သော-ဘရောက်ဇာနှင့် ဖြတ်ကျော်-ပလပ်ဖောင်း အပြုအမူအတွက်၊ သင်သည် တဂ်ကို အသုံးပြုရမည်ဖြစ်ပြီး တဂ် ကို <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>

အသုံးပြုမှု

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

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

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

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

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ CSS မှိန်သောအကူးအပြောင်းကို popover သို့အသုံးပြုပါ။
ကွန်တိန်နာ string | အတုအယောင် အတုအယောင်

Popover ကို သီးခြားဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်သည်။ ဥပမာ- container: 'body'။ ဤရွေးချယ်မှုသည် အထူးအသုံးဝင်သည် - ၎င်းသည် စတင်အသုံးပြုသည့်ဒြပ်စင်အနီးရှိ စာရွက်စာတမ်းစီးဆင်းမှုတွင် popover ကို နေရာချနိုင်စေရန်အတွက် အထူးအသုံးဝင်သည် - ၎င်းသည် window အရွယ်အစားပြောင်းလဲစဉ်အတွင်း popover အား လွှင့်ထုတ်သည့်ဒြပ်စင်မှ ဝေးရာသို့လွင့်သွားခြင်းမှကာကွယ်ပေးသည်။

အကြောင်းအရာ string | လုပ်ဆောင်ချက် ''

data-contentရည်ညွှန်းချက် မရှိပါက မူရင်းအကြောင်းအရာတန်ဖိုး ။

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

နှောင့်နှေးခြင်း။ နံပါတ် | အရာဝတ္ထု ၀ယ်တယ်။

popover (ms) ကို ပြသခြင်းနှင့် ဖုံးကွယ်ခြင်း နှောင့်နှေးခြင်း - manual trigger အမျိုးအစားနှင့် မသက်ဆိုင်ပါ။

နံပါတ်တစ်ခုကို ပေးဆောင်ပါက၊ ဝှက်ထား/ရှိုးနှစ်ခုစလုံးအတွက် နှောင့်နှေးမှုကို သက်ရောက်သည်။

အရာဝတ္ထုဖွဲ့စည်းပုံမှာ-delay: { "show": 500, "hide": 100 }

html ဘူလီယံ အတုအယောင် HTML ကို popover တွင်ထည့်ပါ။ မှားယွင်းပါက၊ jQuery ၏ textနည်းလမ်းကို DOM ထဲသို့ အကြောင်းအရာထည့်သွင်းရန် အသုံးပြုမည်ဖြစ်သည်။ XSS တိုက်ခိုက်မှုအတွက် သင်စိုးရိမ်ပါက စာသားကို အသုံးပြုပါ။
နေရာချထားခြင်း။ string | လုပ်ဆောင်ချက် 'မှန်တယ်'

popover - ထိပ်တန်း | အောက်ခြေ | ဘယ်ဘက် | မှန် | အော်တို။
"အော်တို" ကို သတ်မှတ်သောအခါ၊ ၎င်းသည် popover ကို dynamically reorient လုပ်လိမ့်မည်။ ဥပမာအားဖြင့်၊ နေရာချထားမှုသည် "အလိုအလျောက်ဘယ်ဘက်" ဖြစ်ပါက၊ ဖြစ်နိုင်လျှင် popover သည် ဘယ်ဘက်သို့ပြသမည်ဖြစ်ပြီး၊ မဟုတ်ပါက ၎င်းသည် ညာဘက်သို့ပြသမည်ဖြစ်သည်။

နေရာချထားမှုကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် popover DOM node ဖြင့် ခေါ်ပြီး ၎င်းကို ၎င်း၏ဒုတိယအဖြစ် အစပျိုးသည့်ဒြပ်စင် DOM node ကို ခေါ်သည်။ အကြောင်းအရာကို thispopover ဥပမာအဖြစ် သတ်မှတ်ထားသည်။

ရွေးချယ်မှု ကြိုးတစ်ချောင်း အတုအယောင် ရွေးချယ်သူကို ပံ့ပိုးပေးမည်ဆိုပါက popover အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်မည်ဖြစ်သည်။ လက်တွေ့တွင်၊ popover များထည့်ရန် dynamic HTML အကြောင်းအရာကို ဖွင့်ရန် ၎င်းကို အသုံးပြုသည်။ ဒါကို ကြည့် ပြီး ဗဟုသုတရဖွယ် ဥပမာတစ်ခုကို ကြည့်ပါ ။
ပုံစံခွက် ကြိုးတစ်ချောင်း '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Popover ကိုဖန်တီးရာတွင် အသုံးပြုရန် HTML ကို အခြေခံပါ။

Popover titleများ အတွင်းသို့ ထိုးသွင်းသွားပါမည် .popover-title

Popover contentများ အတွင်းသို့ ထိုးသွင်းသွားပါမည် .popover-content

.arrowpopover ၏မြှားဖြစ်လာလိမ့်မည်။

အပြင်ဘက်ဆုံး wrapper element တွင် .popoverclass ရှိသင့်သည်။

ခေါင်းစဥ် string | လုပ်ဆောင်ချက် ''

ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး title

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

အစပျိုး ကြိုးတစ်ချောင်း 'ကလစ်' Popover စတင်ဖြစ်ပေါ်ပုံ - ကလစ် | ပျံဝဲ | အာရုံ | လက်စွဲ။ သင်သည် အစပျိုးမှုများစွာကို ကျော်ဖြတ်နိုင်သည်။ သူတို့ကို နေရာလွတ်တစ်ခုနဲ့ ခွဲလိုက်ပါ။ manualတခြား trigger တွေနဲ့ ပေါင်းစပ်လို့မရပါဘူး။
မြင်ကွင်း string | အရာဝတ္ထု | လုပ်ဆောင်ချက် { ရွေးချယ်မှု- 'ကိုယ်ထည်'၊ အကွက်- 0 }

ဤဒြပ်စင်၏ဘောင်များအတွင်း popover ကိုထားပါ။ ဥပမာ- viewport: '#viewport'သို့မဟုတ်{ "selector": "#viewport", "padding": 0 }

လုပ်ဆောင်ချက်တစ်ခုအား ပေးမည်ဆိုပါက၊ ၎င်းကို ၎င်း၏တစ်ခုတည်းသော အကြောင်းပြချက်အဖြစ် ဒြပ်စင် DOM node ဖြင့် ခေါ်သည်။ အကြောင်းအရာကို thispopover ဥပမာအဖြစ် သတ်မှတ်ထားသည်။

လူတစ်ဦးချင်းစီအတွက် ဒေတာရည်ညွှန်းချက်များ

အထက်တွင်ရှင်းပြထားသည့်အတိုင်း ဒေတာ attributes များအသုံးပြုခြင်းအားဖြင့် တစ်ဦးချင်းစီ popovers အတွက် ရွေးချယ်စရာများကို တနည်းအားဖြင့် သတ်မှတ်နိုင်ပါသည်။

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

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

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.popover showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြထားသည်.bs.popover Popover ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
hide.bs.popover hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.popover အသုံးပြုသူထံမှ popover ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
inserted.bs.popover show.bs.popoverPopover ပုံစံကို 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"။ (ဒေတာ-api ၏ အလိုအလျောက်စတင်ခြင်းအား အသုံးပြုသည့်အခါ မလိုအပ်ပါ။)

$().alert('close')

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

အဲ့ဒါနဲ့

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

ပွဲအမျိုးအစား ဖော်ပြချက်
close.bs.သတိပေးချက် closeသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
closed.bs. သတိပေးချက် သတိပေးချက်ကို ပိတ်လိုက်သောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်လိုက်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

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

ဘရောင်ဇာ ဖြတ်ကျော် လိုက်ဖက်မှု

Firefox သည် စာမျက်နှာ loads များတစ်လျှောက် ထိန်းချုပ်မှုအခြေအနေများ (မသန်စွမ်းမှုနှင့် စစ်ဆေးမှု) ပုံစံ ဆက်လက်ရှိနေပါသည် ။ ဒီအတွက် ဖြေရှင်းနည်းက သုံးဖို့ autocomplete="off"ပါ။ Mozilla bug #654072 ကိုကြည့်ပါ ။

တင်းမာသော

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

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

Pre-toggled ခလုတ်များ .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သင်ကိုယ်တိုင် ထည့်ရပါမည်။

Visual checked state ကို ကလစ်ဖြင့်သာ အပ်ဒိတ်လုပ်ထားသည်။

အမှန်ခြစ်ဘောက်စ်တစ်ခု၏ ခလုတ်တစ်ခု၏ အခြေအနေအား clickခလုတ်ပေါ်ရှိ ဖြစ်ရပ်တစ်ခုအား မပစ်ဘဲ အပ်ဒိတ်လုပ်ပါက (ဥပမာ- ထည့်သွင်းမှု၏ပိုင်ဆိုင်မှု <input type="reset">ကို ဆက်တင်မှတစ်ဆင့် သို့မဟုတ် )၊ သင် ထည့်သွင်းမှု၏ အတန်းကို သင်ကိုယ်တိုင်ပြောင်းရန် လိုအပ်မည်ဖြစ်သည်။checked.activelabel

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

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

ပလပ်အင် မှီခိုမှု

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

ဥပမာ

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

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

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

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 high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat စကိတ်စီးခြင်း dolor နေ့လည်စာ။ အစားအစာထရပ်ကား quinoa nesciunt lab eiusmod နေ့လယ်စာ 3 wolf moon tempor, sunt aliqua သည် ငှက်တစ်ကောင်ကို ၎င်းပေါ်တွင် ပြည်ကြီးငါး တစ်ခုတည်း-မူရင်း ကော်ဖီ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica၊ craft beer အလုပ်သမား wes anderson cred nesciunt sapiente ea proident။ ကြော်ငြာ vegan excepteur အသားသတ်သမား ဒု lomo။ Leggings occaecat လက်လုပ်လက်စား ဘီယာခင်းမှ စားပွဲသို့ ဂျင်းစိမ်း အနုသယ ပေါင်းစပ်ထားသော nesciunt သည် ၎င်းတို့ accusamus သည် ရေရှည်တည်တံ့ခိုင်မြဲသော VHS အလုပ်လုပ်သည်ကို သင် မကြားဖူးပေ။
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat စကိတ်စီးခြင်း dolor နေ့လည်စာ။ အစားအစာထရပ်ကား quinoa nesciunt lab eiusmod နေ့လယ်စာ 3 wolf moon tempor, sunt aliqua သည် ငှက်တစ်ကောင်ကို ၎င်းပေါ်တွင် ပြည်ကြီးငါး တစ်ခုတည်း-မူရင်း ကော်ဖီ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica၊ craft beer အလုပ်သမား wes anderson cred nesciunt sapiente ea proident။ ကြော်ငြာ vegan excepteur အသားသတ်သမား ဒု lomo။ Leggings occaecat လက်လုပ်လက်စား ဘီယာခင်းမှ စားပွဲသို့ ဂျင်းစိမ်း အနုသယ ပေါင်းစပ်ထားသော nesciunt သည် ၎င်းတို့ accusamus သည် ရေရှည်တည်တံ့ခိုင်မြဲသော VHS အလုပ်လုပ်သည်ကို သင် မကြားဖူးပေ။
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat စကိတ်စီးခြင်း dolor နေ့လည်စာ။ အစားအစာထရပ်ကား quinoa nesciunt lab eiusmod နေ့လယ်စာ 3 wolf moon tempor, sunt aliqua သည် ငှက်တစ်ကောင်ကို ၎င်းပေါ်တွင် ပြည်ကြီးငါး တစ်ခုတည်း-မူရင်း ကော်ဖီ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica၊ craft beer အလုပ်သမား wes anderson cred nesciunt sapiente ea proident။ ကြော်ငြာ vegan excepteur အသားသတ်သမား ဒု lomo။ Leggings occaecat လက်လုပ်လက်စား ဘီယာခင်းမှ စားပွဲသို့ ဂျင်းစိမ်း အနုသယ ပေါင်းစပ်ထားသော nesciunt သည် ၎င်းတို့ accusamus သည် ရေရှည်တည်တံ့ခိုင်မြဲသော 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 ကို s နှင့် လဲလှယ်ရန်လည်း ဖြစ်နိုင်သည် .list-group

  • bootply
  • itmus ac facilin တစ်မျိုး
  • ဒုတိယ eros

ချဲ့ထွင်ခြင်း/ခေါက်သိမ်းခြင်း ထိန်းချုပ်မှုများကို အသုံးပြုခွင့်ရအောင်လုပ်ပါ။

aria-expandedထိန်းချုပ်မှုဒြပ်စင် သို့ထည့်ရန်သေချာပါစေ ။ ဤရည်ညွှန်းချက်သည် စခရင်ဖတ်သူများနှင့် အလားတူ အထောက်အကူပြုနည်းပညာများအတွက် ပြိုလဲနိုင်သော ဒြပ်စင်၏ လက်ရှိအခြေအနေကို အတိအလင်း သတ်မှတ်ဖော်ပြပါသည်။ ခေါက်သိမ်းနိုင်သော ဒြပ်စင်ကို မူရင်းအတိုင်း ပိတ်ပါက၊ ၎င်းတွင် တန်ဖိုးတစ်ခု ရှိသင့်သည် aria-expanded="false"inအကယ်၍ သင်သည် အတန်း ကို အသုံးပြု၍ ခေါက်သိမ်းနိုင်သော ဒြပ်စင်အား ပုံသေဖွင့်ရန် သတ်မှတ်ပြီးပါက သတ်မှတ်ပါ။aria-expanded="true" အစား ထိန်းချုပ်မှုကို သတ်မှတ်ပါ။ ခေါက်သိမ်းနိုင်သော ဒြပ်စင်ကို ဖွင့်ခြင်း သို့မဟုတ် ပိတ်ခြင်း ရှိ၊ မရှိအပေါ် အခြေခံ၍ ပလပ်အင်သည် ဤအရည်အချင်းကို အလိုအလျောက် ပြောင်းပေးပါမည်။

ထို့အပြင်၊ သင်၏ထိန်းချုပ်မှုဒြပ်စင်သည် ပြိုကျနိုင်သောဒြပ်စင်တစ်ခုအား ပစ်မှတ်ထားနေပါက၊ ရည်ညွှန်းချက်မှာ ရွေးချယ် data-targetကိရိယာတစ်ခုသို့ ညွှန်ပြနေ ပါက၊ ပြိုလဲနိုင်သောဒြပ်စင် ပါရှိသော ထိန်းချုပ်မှုဒြပ်စင်သို့ နောက်ထပ် attribute တစ်ခုထပ်ထည့်နိုင်သည်။ ခေတ်မီဖန်သားပြင်စာဖတ်သူများနှင့် အလားတူအကူအညီနည်းပညာများသည် အသုံးပြုသူများအား ခေါက်သိမ်းနိုင်သောဒြပ်စင်သို့ တိုက်ရိုက်သွားလာရန် နောက်ထပ်ဖြတ်လမ်းများပေးဆောင်ရန် ဤရည်ညွှန်းချက်ကို အသုံးပြုသည်။idaria-controlsid

အသုံးပြုမှု

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

  • .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=""

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
မိဘ ရွေးချယ်မှု အတုအယောင် အကယ်၍ ရွေးချယ်ကိရိယာကို ပံ့ပိုးပေးမည်ဆိုပါက၊ သတ်မှတ်ထားသော အုပ်ထိန်းမှုအောက်ရှိ ပြိုကျနိုင်သော အစိတ်အပိုင်းအားလုံးကို ဤအရာအား ပြသသည့်အခါ ပိတ်သွားပါမည်။ panel(ရိုးရာအကော်ဒီယံအမူအကျင့်နှင့်ဆင်တူသည် - ၎င်းသည် လူတန်းစား အပေါ် မူတည်သည် )
ပြောင်းရန် ဘူလီယံ မှန်ပါတယ်။ ခေါ်ဆိုမှုတွင် တွဲနိုင်သော အစိတ်အပိုင်းကို ပြောင်းပေးသည်။

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

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

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.ပြိုကျသည်။ showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြထားသည်.bs.ပြိုကျသည်။ ပြိုကျသည့်ဒြပ်စင်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
hide.bs.ပြိုကျသည်။ hideနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖယ်ရှားသည်။
hidden.bs.collapse အသုံးပြုသူမှ ပြိုကျသည့်ဒြပ်စင်ကို ဝှက်ထားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
$('#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 တစ်ခုခုကို ထိုနေရာတွင် ထားလိုက်ပါက ၎င်းကို အလိုအလျောက် ညှိပြီး ဖော်မတ်လုပ်မည်ဖြစ်သည်။

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

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
ကြားကာလ နံပါတ် ၅၀၀၀ ပစ္စည်းတစ်ခု အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် နှောင့်နှေးရမည့် အချိန်ပမာဏ။ မှားယွင်းပါက အဝိုင်းလေးသည် အလိုအလျောက် လည်ပတ်မည်မဟုတ်ပါ။
ခေတ္တရပ်ပါ။ string | null "ပျံဝဲ" သတ်မှတ်ထားပါက "hover"အဝိုင်းလေး၏ စက်ဘီးစီးခြင်းကို ခေတ္တရပ်ပြီး စက်ဘီးဝိုင်းလေးတွင် mouseenterစက်ဘီးစီးခြင်းကို ပြန်လည်စတင်ပါ mouseleave။ သတ်မှတ်ထားပါက null၊ အဝိုင်းလေးပေါ်တွင် ပျံဝဲနေပါက ၎င်းကို ခေတ္တရပ်မည်မဟုတ်ပါ။
ခြုံ ဘူလီယံ မှန်ပါတယ်။ ဝိုင်းလေးသည် အဆက်မပြတ် လည်ပတ်သင့်သည်ဖြစ်စေ သို့မဟုတ် ရပ်တန့်ရန်ခက်ခဲသည်ဖြစ်စေ။
ကီးဘုတ် ဘူလီယံ မှန်ပါတယ်။ အဝိုင်းလေးသည် ကီးဘုတ်ဖြစ်ရပ်များကို တုံ့ပြန်သင့်သလား။

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

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

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

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

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

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

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

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

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

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

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

ပွဲအမျိုးအစား ဖော်ပြချက်
slide.bs.carousel slideသာဓကနည်းလမ်းကို ခေါ်ဆို သောအခါ ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
slide.bs.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"

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
နှိမ်သည်။ နံပါတ် | function | အရာဝတ္ထု ၁၀ scroll အနေအထားကို တွက်ချက်သည့်အခါ စခရင်မှ ထေမိရန် pixels များ။ နံပါတ်တစ်ခုတည်းကို ပေးထားပါက၊ အော့ဖ်ဆက်ကို အပေါ်နှင့်အောက် လမ်းကြောင်းနှစ်ခုစလုံးတွင် အသုံးပြုမည်ဖြစ်သည်။ ထူးခြားသော၊ အောက်ခြေနှင့် ထိပ်ပိုင်း အော့ဖ်ဆက်ကို ပေးဆောင်ရန် အရာဝတ္ထုတစ်ခု offset: { top: 10 }သို့မဟုတ် offset: { top: 10, bottom: 5 }. အော့ဖ်ဆက်တစ်ခုကို ဒိုင်းနမစ်ဖြင့် တွက်ချက်ရန် လိုအပ်သည့်အခါ လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုပါ။
ပစ်မှတ် ရွေးချယ်သူ | node | jQuery ဒြပ်စင် windowရာဝတ္ထု affix ၏ ပစ်မှတ်ကို သတ်မှတ်သည်။

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

.affix(options)

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

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

.affix('checkPosition')

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

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

အဲ့ဒါနဲ့

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

ပွဲအမျိုးအစား ဖော်ပြချက်
affix.bs.affix ဒြပ်စင်ကို မဖြေရှင်းမီ ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင်ပါသည်။
affixed.bs.affix ဒြပ်စင်ကို ထည့်သွင်းပြီးနောက် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည်။
affix-top.bs.affix ဒြပ်စင်ကို ထိပ်ပိုင်းမတင်မီ ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင်ပါသည်။
affixed-top.bs.affix ဒြပ်စင်ကို အပေါ်မှ ကပ်ထားပြီးနောက် ဤဖြစ်ရပ်ကို အလုပ်ထုတ်သည်။
affix-bottom.bs.affix ဒြပ်စင်ကို အောက်ခြေမကပ်မီ ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင်ပါသည်။
affixed-bottom.bs.affix အစိတ်အပိုင်းကို အောက်ခြေတွင် ကပ်ထားပြီးနောက် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည်။