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 များကိုဝှက်ထားရပါမည်။

ဥပမာအချို့နှင့်အတူ 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)

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

ရွေးချယ်မှုများကို 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 ကို ဘယ်လိုနေရာချမလဲ - auto | ထိပ်တန်း | အောက်ခြေ | ဘယ်ဘက် | မှန်တယ်
သတ်မှတ်ထား သည့်အချိန်တွင် auto၊ ၎င်းသည် popover ကို dynamically reorient လုပ်လိမ့်မည်။

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

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

အပြင်ဘက်ဆုံး wrapper element တွင် .popoverclass ရှိသင့်သည်။
ခေါင်းစဥ် 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 ကို ကိုးကားပါ ။

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

အထက်တွင်ရှင်းပြထားသည့်အတိုင်း ဒေတာ 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 အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
ထည့်သွင်း.bs.popover show.bs.popoverPopover ပုံစံကို DOM သို့ ထည့်လိုက်သောအခါ ဤဖြစ်ရပ်ကို ဖယ်ရှားလိုက်ပါသည်။ 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})