Source

Popovers

iOS တွင်တွေ့ရှိရသည့်အရာများကဲ့သို့ Bootstrap popovers များထည့်ခြင်းအတွက် စာရွက်စာတမ်းများနှင့် ဥပမာများ၊ သင့်ဆိုက်ရှိ မည်သည့်ဒြပ်စင်သို့မဆို။

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

popover ပလပ်အင်ကို အသုံးပြုသည့်အခါ သိထားရမည့်အချက်များ

Popovers များသည် နေရာချထားရန်အတွက် ပြင်ပ အဖွဲ့အစည်း Popper.js ကို အားကိုးသည် ။ bootstrap.js မတိုင်မီ popper.min.js ပါဝင်ရမည် သို့မဟုတ် Popper.js ပါရှိသော bootstrap.bundle.min.js/ bootstrap.bundle.jsကိုအသုံးပြု၍ popper များအလုပ်လုပ်နိုင်ရန်။
Popover များသည် မှီခိုမှုအဖြစ် tooltip plugin ကို လိုအပ်သည်။
အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။
Popovers များသည် စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက် ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် အစပြုရပါမည် ။
သုညအလျား titleနှင့် contentတန်ဖိုးများသည် ပေါ်ပြူလာကို ဘယ်သောအခါမှ ပြသမည်မဟုတ်ပါ။
ပိုမိုရှုပ်ထွေးသော အစိတ်အပိုင်းများတွင် တင်ဆက်ခြင်းပြဿနာများကို ရှောင်ရှားရန် ( ကျွန်ုပ်တို့၏ container: 'body'ထည့်သွင်းမှုအုပ်စုများ၊ ခလုတ်အဖွဲ့များ စသည်ဖြင့်) ကို ရှောင်ရှားရန် သတ်မှတ်ပါ။
လျှို့ဝှက်ဒြပ်စင်များပေါ်တွင် popover များကို အစပျိုးခြင်းသည် အလုပ်မဖြစ်ပါ။
ထုပ်ပိုးမှု ဒြပ်စင်တစ်ခုပေါ်တွင် ပေါ်လာသည့်အရာများ .disabledသို့မဟုတ် disabledဒြပ်စင်များကို အစပျိုးရပါမည်။
မျဥ်းများစွာကို ပတ်ထားသော ကျောက်ဆူးများမှ အစပျိုးသောအခါ၊ ကျောက်ဆူးများ၏ အကျယ်အဝန်းကြားတွင် ပေါ်လာသော အကွက်များကို ဗဟိုပြုပါမည်။ ဤအပြုအမူကိုရှောင်ရှားရန် .text-nowrapသင့်တွင် အသုံးပြု ပါ။<a>
၎င်းတို့၏သက်ဆိုင်ရာဒြပ်စင်များကို DOM မှဖယ်ရှားခြင်းမပြုမီ Popovers များကိုဝှက်ထားရပါမည်။
DOM အရိပ်အတွင်း ဒြပ်စင်တစ်ခုကြောင့် Popover များကို အစပျိုးနိုင်သည်။

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

ဥပမာအချို့နှင့်အတူ popover များအလုပ်လုပ်ပုံကိုကြည့်ရှုရန်ဆက်လက်ဖတ်ရှုပါ။

ဥပမာ- နေရာတိုင်းတွင် popovers ကိုဖွင့်ပါ။

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

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

ဥပမာ- `container`ရွေးချယ်ခွင့် ကို အသုံးပြုခြင်း။

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

ဥပမာ

<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-secondary" 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-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" 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-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

နောက်ကလစ်မှာ ဖြုတ်လိုက်ပါ။

ပြောင်း သုံးသည့် focusဒြပ်ထက် မတူညီသောဒြပ်စင်၏ နောက်ကလစ်တွင် အသုံးပြုသူ၏နောက်ထပ်ကလစ်တွင် popover များကိုပယ်ရန် trigger ကိုသုံးပါ။

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

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

$('.popover-dismiss').popover({
  trigger: 'focus'
})

မသန်စွမ်းတာတော့ မဟုတ်ပါဘူး။

ရည်ညွှန်းချက်ပါ သည့်ဒြပ်စင် disabledများသည် အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသောကြောင့် အသုံးပြုသူများသည် popover (သို့မဟုတ် ကိရိယာအကြံပြုချက်) ကို အစပျိုးရန် ၎င်းတို့ကို ပျံဝဲ သို့မဟုတ် ကလစ်နှိပ်၍ မရနိုင်ပါ။ ဖြေရှင်းနည်းတစ်ခုအနေဖြင့်၊ သင်သည် ထုပ်ပိုးမှုတစ်ခုမှ popover ကို အစပျိုးလိုခြင်း <div>သို့မဟုတ် မသန်စွမ်းသောဒြပ် စင်ပေါ်မှ <span>ထပ်ရေးလို မည်ဖြစ်သည်။pointer-events

disabled popover အစပျိုးမှုများအတွက်၊ popover သည် disabled element ကိုနှိပ်ရန်data-trigger="hover" မမျှော်လင့်နိုင်သောကြောင့် သင့်အသုံးပြုသူများအတွက် ချက်ချင်းမြင်သာသော တုံ့ပြန်ချက်အဖြစ် ပေါ်လာစေရန် သင်နှစ်သက်နိုင်သည်။

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

အသုံးပြုမှု

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

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

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

ကီးဘုတ်အသုံးပြုသူများအား သင်၏ popovers များကို အသက်သွင်းခွင့်ပြုရန်၊ ၎င်းတို့ကို ရိုးရာကီးဘုတ်-အာရုံစိုက်၍ အပြန်အလှန်အကျိုးပြုသည့် (လင့်ခ်များ သို့မဟုတ် ဖောင်ပုံစံထိန်းချုပ်မှုများကဲ့သို့သော) HTML အစိတ်အပိုင်းများသို့သာ ထည့်သွင်းသင့်သည်။ ရည်ညွှန်းချက်ထည့်ခြင်းဖြင့် မထင်မှတ်ထားသော HTML ဒြပ်စင်များ (များကဲ့သို့ <span>) ကို အာရုံစူးစိုက်နိုင်စေ tabindex="0"သော်လည်း၊ ၎င်းသည် ကီးဘုတ်အသုံးပြုသူများအတွက် အပြန်အလှန်တုံ့ပြန်မှုမရှိသော ဒြပ်စင်များပေါ်တွင် စိတ်အနှောက်အယှက်ဖြစ်နိုင်ချေရှိသော တက်ဘ်များကို ရပ်တန့်စေမည်ဖြစ်ပြီး အကူအညီပေးသောနည်းပညာအများစုသည် ယခုအခြေအနေတွင် popover ၏အကြောင်းအရာကို မကြေငြာပါ . ထို့အပြင်၊ hoverသင်၏ popovers အတွက် အစပျိုးမှုအဖြစ် တစ်ခုတည်းကိုသာ အားမကိုးပါနှင့်၊ ၎င်းသည် ကီးဘုတ်အသုံးပြုသူများအတွက် အစပျိုးရန် မဖြစ်နိုင်တော့ပါ။

ရွေးချယ်စရာများ ဖြင့် ကြွယ်ဝသော၊ ဖွဲ့စည်းတည်ဆောက်ထားသော HTML ကို popovers တွင် htmlသင်ထည့်သွင်းနိုင်သော်လည်း၊ အကြောင်းအရာများစွာကို အလွန်အကျွံထည့်ခြင်းမှ ရှောင်ကြဉ်ရန် ကျွန်ုပ်တို့ အလေးအနက် အကြံပြုအပ်ပါသည်။ လက်ရှိတွင် popover များအလုပ်လုပ်ပုံမှာ၊ ပြသပြီးသည်နှင့် ၎င်းတို့၏အကြောင်းအရာသည် aria-describedbyattribute ဖြင့် trigger element နှင့် ချိတ်ဆက်ထားသည်။ ရလဒ်အနေဖြင့်၊ popover ၏အကြောင်းအရာတစ်ခုလုံးကို ရှည်လျားပြီး အနှောက်အယှက်ကင်းသော ထုတ်လွှင့်မှုတစ်ခုအဖြစ် အထောက်အကူနည်းပညာအသုံးပြုသူများအတွက် ကြေငြာပါမည်။

ထို့အပြင်၊ သင်၏ popover (ပုံစံဒြပ်စင်များ သို့မဟုတ် လင့်ခ်များကဲ့သို့သော) အပြန်အလှန်အထိန်းအကွပ်များ (ဤဒြပ်စင်များ whiteListသို့မဟုတ် ခွင့်ပြုထားသော အရည်အချင်းများနှင့် တဂ်များသို့ပေါင်းထည့်ခြင်းဖြင့်)၊ လောလောဆယ်တွင် popover သည် ကီးဘုတ်အာရုံစူးစိုက်မှုအစီအစဥ်ကို မစီမံခန့်ခွဲကြောင်း သတိပြုပါ။ ကီးဘုတ်အသုံးပြုသူတစ်ဦးသည် popover ကိုဖွင့်သောအခါ၊ အစပျိုးသည့်ဒြပ်စင်ပေါ်တွင် အာရုံစူးစိုက်ထားဆဲဖြစ်ပြီး popover သည် များသောအားဖြင့် စာရွက်စာတမ်း၏ဖွဲ့စည်းပုံရှိ trigger ကိုချက်ချင်းမလိုက်နာသောကြောင့်၊ ရှေ့သို့ရွှေ့ခြင်း/နှိပ်ခြင်းအား အာမခံချက်မရှိပါ။TABကီးဘုတ်အသုံးပြုသူတစ်ဦးအား popover ကိုယ်တိုင်သို့ ရွှေ့ပါမည်။ အတိုချုပ်အားဖြင့်၊ popover တစ်ခုတွင် အပြန်အလှန်တုံ့ပြန်ထိန်းချုပ်မှုများကို ရိုးရှင်းစွာထည့်သွင်းခြင်းသည် ကီးဘုတ်အသုံးပြုသူများနှင့် အထောက်အကူပြုနည်းပညာအသုံးပြုသူများအတွက် ဤထိန်းချုပ်မှုများကို လက်လှမ်းမမီနိုင်/အသုံးမဝင်နိုင်စေရန်၊ သို့မဟုတ် အနည်းဆုံးအားဖြင့် ယုတ္တိမတန်သော အလုံးစုံအာရုံစိုက်မှုတစ်ခုအတွက် ပြုလုပ်နိုင်ဖွယ်ရှိသည်။ ဤကိစ္စများတွင်၊ အစား modal dialog ကိုသုံးရန်စဉ်းစားပါ။

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

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

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

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
ကာတွန်း	ဘူလီယံ	မှန်ပါတယ်။	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 ကို ဘယ်လို နေရာချမလဲ - auto \| ထိပ်တန်း \| အောက်ခြေ \| ဘယ်ဘက် \| မှန်တယ် သတ်မှတ်ထား သည့်အခါ `auto`၊ ၎င်းသည် popover ကို dynamically reorient လုပ်လိမ့်မည်။ နေရာချထားမှုကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် popover DOM node ဖြင့် ခေါ်ပြီး ၎င်းကို ၎င်း၏ဒုတိယအဖြစ် အစပျိုးသည့်ဒြပ်စင် DOM node ကို ခေါ်သည်။ အကြောင်းအရာကို `this`popover ဥပမာအဖြစ် သတ်မှတ်ထားသည်။
ရွေးချယ်မှု	string \| အတုအယောင်	အတုအယောင်	ရွေးချယ်သူကို ပံ့ပိုးပေးမည်ဆိုပါက popover အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်မည်ဖြစ်သည်။ လက်တွေ့တွင်၊ popover များထည့်ရန် dynamic HTML အကြောင်းအရာကို ဖွင့်ရန် ၎င်းကို အသုံးပြုသည်။ ဒါကို ကြည့် ပြီး ဗဟုသုတရဖွယ် ဥပမာတစ်ခုကို ကြည့်ပါ ။
ပုံစံခွက်	ကြိုးတစ်ချောင်း	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Popover ကိုဖန်တီးရာတွင် အသုံးပြုရန် HTML ကို အခြေခံပါ။ Popover `title`များ အတွင်းသို့ ထိုးသွင်းသွားပါမည် `.popover-header`။ Popover `content`များ အတွင်းသို့ ထိုးသွင်းသွားပါမည် `.popover-body`။ `.arrow`popover ၏မြှားဖြစ်လာလိမ့်မည်။ အပြင်ဘက်ဆုံး wrapper element တွင် `.popover`class ရှိသင့်သည်။
ခေါင်းစဥ်	string \| ဒြပ်စင် \| လုပ်ဆောင်ချက်	''	ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး `title`။ လုပ်ဆောင်ချက်တစ်ခုကို ပေးမည်ဆိုပါက `this`၊ popover နှင့်တွဲထားသည့် ဒြပ်စင်အတွက် ၎င်း၏ရည်ညွှန်းသတ်မှတ်မှုဖြင့် ၎င်းကို ခေါ်ပါမည်။
အစပျိုး	ကြိုးတစ်ချောင်း	'ကလစ်'	Popover စတင်ဖြစ်ပေါ်ပုံ - ကလစ် \| ပျံဝဲ \| အာရုံ \| လက်စွဲ။ သင်သည် အစပျိုးမှုများစွာကို ကျော်ဖြတ်နိုင်သည်။ သူတို့ကို နေရာလွတ်တစ်ခုနဲ့ ခွဲလိုက်ပါ။ `manual`တခြား trigger တွေနဲ့ ပေါင်းစပ်လို့မရပါဘူး။
နှိမ်သည်။	နံပါတ် \| ကြိုးတစ်ချောင်း	၀ယ်တယ်။	Popover ၏ အော့ဖ်ဆက်သည် ၎င်း၏ပစ်မှတ်နှင့် ဆက်စပ်နေသည်။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ offset docs ကို ကိုးကားပါ ။
နေရာချထားမှု	string \| ဇွတ်	'လှန်'	နောက်ကျောတွင် Popper အသုံးပြုမည့် အနေအထားကို သတ်မှတ်ခွင့်ပြုပါ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ အပြုအမူဆိုင်ရာစာရွက်စာတမ်းများ ကို ကိုးကားပါ။
နယ်နိမိတ်	string \| ဒြပ်စင်	'scrollParent'	popover ၏ ပြည့်လျှံကန့်သတ်ဘောင်။ `'viewport'`, `'window'`, `'scrollParent'`, သို့မဟုတ် HTMLElement အကိုးအကား (JavaScript သာ) ၏ တန်ဖိုးများကို လက်ခံသည် ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ PreventOverflow docs ကို ကိုးကားပါ ။
သန့်ရှင်းရေးလုပ်ပါ။	ဘူလီယံ	မှန်ပါတယ်။	သန့်ရှင်းရေးကို ဖွင့်ပါ သို့မဟုတ် ပိတ်ပါ။ activated ဖြစ်ပါက `'template'`၊ ရွေးချယ်စရာများ `'content'`ကို `'title'`သန့်စင်သွားပါမည်။
အဖြူရောင်စာရင်း	အရာဝတ္ထု	မူလတန်ဖိုး	ခွင့်ပြုထားသော အရည်အချင်းများနှင့် တဂ်များပါရှိသော အရာ
သန့်စင်ရန်	null \| လုပ်ဆောင်ချက်	null	ဤနေရာတွင် သင်သည် သင်၏ကိုယ်ပိုင် sanitize function ကို ပေးနိုင်သည်။ သန့်ရှင်းရေးလုပ်ဆောင်ရန် သီးခြားစာကြည့်တိုက်ကို အသုံးပြုလိုပါက ၎င်းသည် အသုံးဝင်နိုင်သည်။
popperConfig	null \| အရာဝတ္ထု	null	Bootstrap ၏ မူရင်း Popper.js config ကိုပြောင်းလဲရန် Popper.js ၏ဖွဲ့စည်းပုံ ကိုကြည့်ပါ

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

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

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

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်တွင် method call ကို လျစ်လျူရှု ပါမည်။

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

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

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

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

`.popover('enable')`

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန်စွမ်းရည်ကိုပေးသည်။ Popovers များကို မူရင်းအတိုင်း ဖွင့်ထားသည်။

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

`.popover('disable')`

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန်စွမ်းရည်ကို ဖယ်ရှားသည်။ ပြန်ဖွင့်ထားမှသာ ပေါ့ပ်ဗာကို ပြသနိုင်မည်ဖြစ်သည်။

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

`.popover('toggleEnabled')`

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန် သို့မဟုတ် ဝှက်ထားရန် စွမ်းရည်ကို ပြောင်းပေးသည်။

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

`.popover('update')`

ဒြပ်စင်တစ်ခု၏ popover အနေအထားကို အပ်ဒိတ်လုပ်သည်။

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

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား	ဖော်ပြချက်
show.bs.popover	`show`သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြထားသည်.bs.popover	Popover ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
hide.bs.popover	`hide`သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.popover	အသုံးပြုသူထံမှ popover ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
inserted.bs.popover	`show.bs.popover`Popover ပုံစံကို DOM သို့ ထည့်လိုက်သောအခါ ဤဖြစ်ရပ်ကို ဖယ်ရှားလိုက်ပါသည်။

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})