Bootstrap Popover Plugin
Popover ပလပ်အင်
Popover plugin သည် tooltips များနှင့်ဆင်တူသည်။ အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါတွင် ၎င်းသည် ပေါ်လာသော ပေါ်လာသောဘောက်စ်တစ်ခုဖြစ်သည်။ ကွာခြားချက်မှာ Popover တွင် အကြောင်းအရာများစွာ ပါဝင်နိုင်ခြင်းကြောင့် ဖြစ်သည်။
အကြံပြုချက်- ပလပ်အင်များကို တစ်ဦးချင်းထည့်သွင်းနိုင်သည် (Bootstrap ၏တစ်ဦးချင်းစီ "popover.js" ဖိုင်ကို အသုံးပြု၍) သို့မဟုတ် အားလုံးကို တစ်ပြိုင်နက် ("bootstrap.js" သို့မဟုတ် "bootstrap.min.js" ကို အသုံးပြု၍)။
Popover ဖန်တီးနည်း
popover တစ်ခုဖန်တီးရန်၊ data-toggle="popover"
ရည်ညွှန်းချက်ကို ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။
titlepopover ၏ခေါင်းစီးစာသားကိုသတ်မှတ်ရန် attribute ကိုသုံးပါ၊ နှင့် popover data-content၏ကိုယ်ထည်အတွင်းတွင်ပြသသင့်သောစာသားကိုသတ်မှတ်ရန် attribute ကိုအသုံးပြုပါ။
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
မှတ်ချက်- Popovers များကို jQuery ဖြင့် အစပြုရပါမည် popover()။
အောက်ပါကုဒ်သည် စာရွက်စာတမ်းရှိ popover အားလုံးကို ဖွင့်ပေးလိမ့်မည်-
ဥပမာ
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popovers နေရာချထားခြင်း။
ပုံမှန်အားဖြင့်၊ ပေါ့ပ်ဗာသည် ဒြပ်စင်၏ညာဘက်ခြမ်းတွင် ပေါ်လာလိမ့်မည်။
data-placementဒြပ်စင်၏အပေါ်၊ အောက်ခြေ၊ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ခြမ်းရှိ popover ၏ အနေအထားကို သတ်မှတ်ရန် ရည်ညွှန်းချက်ကို အသုံးပြု ပါ။
ဥပမာ
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
အကြံပြုချက်- browser သည် popover ၏ အနေအထားကို ဆုံးဖြတ်နိုင်စေမည့် "auto" တန်ဖိုးဖြင့် data-placement attribute ကိုလည်း အသုံးပြုနိုင်ပါသည်။ ဥပမာအားဖြင့်၊ တန်ဖိုးသည် "အော်တိုဘယ်ဘက်" ဖြစ်ပါက၊ သို့မဟုတ်ပါက ညာဘက်တွင် ဖြစ်နိုင်သည့်အခါတွင် ပေါ့ပ်ဗာသည် ဘယ်ဘက်ခြမ်းတွင် ပြသမည်ဖြစ်သည်။
Popovers ပိတ်ခြင်း။
မူလအားဖြင့်၊ သင်ဒြပ်စင်ကို ထပ်မံနှိပ်လိုက်သောအခါတွင် ပေါ့ပ်ဗာသည် ပိတ်သွားမည်ဖြစ်သည်။ data-trigger="focus"သို့သော်၊ ဒြပ်စင်အပြင်ဘက်တွင် နှိပ်သည့်အခါ popover ကိုပိတ်မည့် attribute ကို သင်အသုံးပြုနိုင်သည် -
ဥပမာ
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
အကြံပြုချက်- မောက်စ်ညွှန်ပြချက်ကို ဒြပ်စင်ပေါ်မှ ရွှေ့သည့်အခါ popover ကို ပြသလိုပါက၊ data-trigger"hover" တန်ဖိုးဖြင့် အရည်အချင်းကို အသုံးပြုပါ-
ဥပမာ
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Bootstrap Popover ကိုးကားချက်ကို အပြီးသတ်ပါ။
Popover ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Popover Reference သို့ သွားပါ ။