Bootstrap အတွက် Javascript

စိတ်ကြိုက် jQuery ပလပ်အင် ၁၂ ခုဖြင့် Bootstrap ၏ အစိတ်အပိုင်းများကို အသက်ဝင်စေ ပါသည်။

မော်ဒယ်များ

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

ဆွဲချမှုများ

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

Scrollspy

scrollspy ကိုသုံး၍ သင်၏ navbar ရှိ လင့်ခ်များကို အလိုအလျောက် အပ်ဒိတ်လုပ်ရန် လက်ရှိ အသုံးပြုနေသော လင့်ခ်ကို scroll position ကို အခြေခံ၍ ပြသပါ။

ပြောင်းနိုင်သော တက်ဘ်များ

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

Tooltips

jQuery Tipsy ပလပ်အင်ကို အသုံးပြုမှုအသစ်တစ်ခု၊ Tooltips သည် ရုပ်ပုံများအပေါ်တွင် အားမကိုးပါ — ၎င်းတို့သည် ဒေသဆိုင်ရာ ခေါင်းစဉ်သိုလှောင်မှုအတွက် ကာတွန်းနှင့် ဒေတာ-အရည်အချင်းများအတွက် CSS3 ကို အသုံးပြုသည်။

Popovers *

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

* ပါဝင်ရန် Tooltips လိုအပ်သည် ။

သတိပေးစာများ

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

ခလုတ်များ

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

ပြိုကျသည်။

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

ဝိုင်းလေး

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

စာရိုက်ပါ။

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

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

ရိုးရှင်းသောအကူးအပြောင်းအကျိုးသက်ရောက်မှုများအတွက်၊ bootstrap-transition.js ကို modals တွင်လျှောချရန် သို့မဟုတ် သတိပေးချက်များမှိန်သွားစေရန် တစ်ကြိမ်ပါဝင်ပါ။

* ပလပ်အင်များတွင် ကာတွန်းအတွက် လိုအပ်သည်။

ကြိုတင်အသိပေးသည်! javascript ပလပ်အင်များအားလုံးသည် jQuery ၏နောက်ဆုံးထွက်ဗားရှင်း လိုအပ်ပါသည်။

မော်ဒယ်များအကြောင်း

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

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

အငြိမ်ဥပမာ

အောက်တွင် ကိန်းသေပုံစံဖြင့် ပြန်ဆိုထားသည်။

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

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

သရုပ်ပြပုံစံကို ဖွင့်ပါ။

bootstrap-modal ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် modal ကိုခေါ်ဆိုပါ-

  1. $ ( '#myModal' )။ ပုံစံ ( ရွေးချယ်စရာများ )

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

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

သေား

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

ထို့အပြင်၊ သင်၏ modal instance တွင် ရွေးချယ်စရာများထည့်ရန်၊ ၎င်းတို့ကို control element သို့မဟုတ် modal markup ကိုယ်တိုင်တွင် အပိုဒေတာ attributes အဖြစ် ထည့်သွင်းပါ။

  1. <a class="btn" data-toggle="modal" href="#myModal"> ပစ်လွှတ် သည့် ပုံစံ </a> _ _ _ _ _
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modal ခေါင်းစီး </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> တစ်ကိုယ်ကောင်း... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href="#" class="btn" data-dismiss="modal"> ပိတ် </a> _ _ _ _ _ _ _
  11. <a href="#" class="btn btn-primary"> ပြောင်းလဲမှုများကို သိမ်းဆည်း ပါ </a> _ _
  12. </div>
  13. </div>
ကြိုတင်အသိပေးသည်! သင့် modal သည် အဝင်အထွက် လှုပ်ရှားလိုပါက၊ element ထဲသို့ .fadeအတန်း တစ်ခုကို ပေါင်းထည့်ရုံသာ .modalဖြစ်သည် (လုပ်ဆောင်ချက်တွင် ၎င်းကိုမြင်ရန် ဒီမိုကို ကိုးကားပါ) နှင့် bootstrap-transition.js ပါဝင်သည်။

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

.modal(ရွေးချယ်စရာများ)

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

  1. $ ( '#myModal' )။ ပုံစံ ({
  2. ကီးဘုတ် : အမှား
  3. })

.modal('toggle')

ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။

  1. $ ( '#myModal' )။ မော်ဒယ် ( 'ခလုတ်' )

.modal('ရှိုး')

မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်သည်။

  1. $ ( '#myModal' )။ မော်ဒယ် ( 'ရှိုး' )

.modal('ဝှက်')

ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။

  1. $ ( '#myModal' )။ modal ( 'ဝှက်' )

အဲ့ဒါနဲ့

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

ပွဲ ဖော်ပြချက်
ရှိုး showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြသထားသည်။ modal ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (css အကူးအပြောင်းများပြီးဆုံးရန်စောင့်ဆိုင်းပါမည်)။
ပုန်း hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
ဝှက်ထားသည်။ အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ထုတ်သည် (css အကူးအပြောင်းများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
  1. $ ( '#myModal' )။ on ( 'hidden' function () {
  2. // တစ်ခုခုလုပ်...
  3. })

ScrollSpy ပလပ်အင်သည် scroll position ကိုအခြေခံ၍ nav ပစ်မှတ်များကို အလိုအလျောက် update လုပ်ရန်အတွက်ဖြစ်သည်။

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

scrollspy ဖြင့် နမူနာ 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-scrollspy.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် scrollspy ကိုခေါ်ဆိုပါ-

  1. $ ( '#navbar' )။ scrollspy ()

သေား

သင်၏ topbar လမ်းညွှန်မှုတွင် scrollspy အပြုအမူကို လွယ်ကူစွာထည့်ရန်၊ data-spy="scroll"သင်စူးစမ်းလိုသောဒြပ်စင်သို့ထည့်ရုံသာဖြစ်သည် (ပုံမှန်အားဖြင့် ၎င်းသည် ကိုယ်ထည်ဖြစ်သည်)။

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

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

.scrollspy('refresh')

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

  1. $ ( '[data-spy="scroll"]' )။ တစ်ခုချင်းစီ ( function () {
  2. var $spy = $ ( ဒါ )။ scrollspy ( 'ပြန်လည်စတင်ခြင်း' )
  3. });

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

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

အဲ့ဒါနဲ့

ပွဲ ဖော်ပြချက်
အသက်သွင်းပါ။ scrollspy မှ အကြောင်းအရာအသစ်တစ်ခု စတင်သည့်အခါတိုင်း ဤဖြစ်ရပ်သည် မီးလောင်ပါသည်။

ဤပလပ်အင်သည် ဒေသတွင်းအကြောင်းအရာမှတစ်ဆင့် ကူးပြောင်းရန်အတွက် အမြန်၊ တက်ကြွသောတက်ဘ်နှင့် ဆေးပြားလုပ်ဆောင်နိုင်စွမ်းကို ပေါင်းထည့်သည်။

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

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

dropdown menus များမှတစ်ဆင့် လျှို့ဝှက်အကန့်များကြားပြောင်းရန် အောက်ဖော်ပြပါတဘ်များကို နှိပ်ပါ။

ဂျင်းဘောင်းဘီအစိမ်း 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.


bootstrap-tab.js ကို အသုံးပြုခြင်း။

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

  1. $ ( '#myTab a' )။ နှိပ်ပါ ( function ( ) {
  2. _ PreventDefault ();
  3. $ ( ဒါ )။ tab ( 'ရှိုး' );
  4. })

တစ်ဘ်ချင်းစီကို နည်းလမ်းများစွာဖြင့် အသက်သွင်းနိုင်သည်-

  1. $ ( '#myTab a[href="#profile"]' )။ tab ( 'ရှိုး' ); // အမည်ဖြင့် tab ကိုရွေးချယ်ပါ။
  2. $ ( '#myTab a:first' )။ tab ( 'ရှိုး' ); // ပထမ tab ကိုရွေးချယ်ပါ။
  3. $ ( '#myTab a:last' )။ tab ( 'ရှိုး' ); // နောက်ဆုံး tab ကို ရွေးပါ။
  4. $ ( '#myTab li:eq(2) a' )။ tab ( 'ရှိုး' ); // တတိယတဘ်ကို ရွေးပါ (0-အညွှန်းပြုထားသည်)

သေား

မည်သည့် javascript ကိုမျှ မရေးဘဲ တဘ် သို့မဟုတ် ဆေးပြား လမ်းညွှန်ချက် ကို ရိုးရှင်းစွာ သတ်မှတ်ခြင်း data-toggle="tab"သို့မဟုတ် data-toggle="pill"ဒြပ်စင်တစ်ခုပေါ်တွင် သင် အသက်သွင်းနိုင်သည်။ navတက်ဘ်သို့ အတန်းများ နှင့် nav-tabsအတန်းများကို ပေါင်းထည့်ခြင်းသည် ulbootstrap တက်ဘ်ပုံစံကို သက်ရောက်စေမည်ဖြစ်သည်။

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> ပင်မ </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> ပရိုဖိုင် </a></li >
  4. <li><a href = "#messages" data-toggle = "tab"> မက်ဆေ့ချ်များ </a></li >
  5. <li><a href = "#settings" data-toggle = "tab"> ဆက် တင်များ </a></li>
  6. </ul>

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

$().တက်ဘ်

တက်ဘ်ဒြပ်စင်နှင့် အကြောင်းအရာကွန်တိန်နာကို အသက်သွင်းသည်။ တဘ် တွင် DOM တွင် ကွန်တိန်နာ node တစ်ခု data-targetသို့မဟုတ် ပစ်မှတ်တစ်ခု ရှိသင့်သည်။href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" > <a href="#home"> အိမ် </a> </li >
  3. <li><a href="#profile"> ပရိုဖိုင် </a> < /li >
  4. <li><a href="#messages"> မက်ဆေ့ချ် များ </a> </li >
  5. <li><a href="#settings"> ဆက် တင်များ </a> </li >
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "ဆက်တင်များ" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a:last' )။ tab ( 'ရှိုး' );
  18. })
  19. </script>

အဲ့ဒါနဲ့

ပွဲ ဖော်ပြချက်
ရှိုး ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်၊ သို့သော် တက်ဘ်အသစ်ကို မပြသမီ။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.targetကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget
ပြသထားသည်။ တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.targetကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' )။ on ( 'ပြသထားသည်' function ( e ) {
  2. _ ပစ်မှတ် // activated တက်ဘ်
  3. _ ဆက်စပ်ပစ်မှတ် // ယခင်တက်ဘ ်
  4. })

Tooltips အကြောင်း

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

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

Tooltips အသုံးပြုပုံ ဥပမာ

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

တင်းတင်းကျပ်ကျပ် ဘောင်းဘီနောက်ထပ် keffiyeh သူတို့အကြောင်း ကို သင် မကြားမိဖူးဘူး။ ဓာတ်ပုံ booth မုတ်ဆိတ်စိမ်း 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 တစ်ခုတည်း-မူရင်းကော်ဖီဗိုင်းရပ်စ်ကို ကိုင်တွယ် ပါတယ်


bootstrap-tooltip.js ကိုအသုံးပြုခြင်း။

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

  1. $ ( '#example' )။ ကိရိယာအကြံပြုချက် ( ရွေးချယ်စရာများ )

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

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ tooltip သို့ css မှိန်သောအကူးအပြောင်းကိုသုံးပါ။
နေရာချထားခြင်း။ string|လုပ်ဆောင်ချက် 'ထိပ်' tooltip - top | ဘယ်လိုနေရာချမလဲ။ အောက်ခြေ | ဘယ်ဘက် | မှန်တယ်
ရွေးချယ်မှု ကြိုးတစ်ချောင်း အတုအယောင် ရွေးချယ်သူအား ပံ့ပိုးပေးမည်ဆိုပါက၊ ကိရိယာအကြံပြုချက် အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်မည်ဖြစ်သည်။
ခေါင်းစဥ် string | လုပ်ဆောင်ချက် '' `title` တဂ်မရှိလျှင် မူရင်းခေါင်းစဉ်တန်ဖိုး
အစပျိုး ကြိုးတစ်ချောင်း 'ပျံဝဲ' ကိရိယာအကြံပြုချက်ကို မည်သို့စတင်လုပ်ဆောင်သည် - ခလုတ်ခုံ | အာရုံ | လက်စွဲ
နှောင့်နှေးခြင်း။ နံပါတ် | အရာဝတ္ထု ၀ယ်တယ်။

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

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

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

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

သေား

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

  1. <a href="#" rel="tooltip" title="ပထမ ကိရိယာ အကြံပြုချက်"> ကျွန်ုပ် အပေါ်တွင် ရွှေ့ ပါ </a> _ _

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

$().tooltip(ရွေးချယ်စရာများ)

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

.tooltip('ရှိုး')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပေးချက်ကို ထုတ်ပြသည်။

  1. $ ( '#element' )။ tooltip ( 'ရှိုး' )

.tooltip('ဝှက်')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဝှက်ထားသည်။

  1. $ ( '#element' )။ ကိရိယာအကြံပြုချက် ( 'ဝှက်' )

.tooltip('toggle')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံဉာဏ်ကို ပြောင်းရန်။

  1. $ ( '#element' )။ ကိရိယာအကြံပြုချက် ( 'ပြောင်းရန်' )

popover များအကြောင်း

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

* Tooltip ပါဝင်ရန် လိုအပ်သည် ။

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

ဥပမာ ခုန်ပျံကျော်လွှား

Popover ကိုစတင်ရန် ခလုတ်ကို နှိပ်ပါ။


bootstrap-popover.js ကိုအသုံးပြုခြင်း။

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

  1. $ ( '#example' )။ popover ( ရွေးချယ်စရာများ )

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

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ tooltip သို့ css မှိန်သောအကူးအပြောင်းကိုသုံးပါ။
နေရာချထားခြင်း။ string|လုပ်ဆောင်ချက် 'မှန်တယ်' popover - ထိပ်တန်း | အောက်ခြေ | ဘယ်ဘက် | မှန်တယ်
ရွေးချယ်မှု ကြိုးတစ်ချောင်း အတုအယောင် ရွေးချယ်သူအား ပံ့ပိုးပေးမည်ဆိုပါက၊ tooltip အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်ပေးမည်ဖြစ်သည်။
အစပျိုး ကြိုးတစ်ချောင်း 'ပျံဝဲ' ကိရိယာအကြံပြုချက်ကို မည်သို့စတင်လုပ်ဆောင်သည် - ခလုတ်ခုံ | အာရုံ | လက်စွဲ
ခေါင်းစဥ် string | လုပ်ဆောင်ချက် '' `title` ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး
အကြောင်းအရာ string | လုပ်ဆောင်ချက် '' `data-content` ရည်ညွှန်းချက် မရှိပါက မူရင်းအကြောင်းအရာတန်ဖိုး
နှောင့်နှေးခြင်း။ နံပါတ် | အရာဝတ္ထု ၀ယ်တယ်။

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

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

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

ကြိုတင်အသိပေးသည်! တစ်သီးပုဂ္ဂလ popover များအတွက် ရွေးချယ်စရာများကို ဒေတာ attribute များအသုံးပြုခြင်းအားဖြင့် တနည်းအားဖြင့် သတ်မှတ်နိုင်ပါသည်။

သေား

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

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

$().popover(ရွေးချယ်စရာများ)

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

.popover('ရှိုး')

ဒြပ်စင်တစ်ခုပေါ်လာသည်။

  1. $ ( '#element' )။ popover ( 'ရှိုး' )

.popover('ဝှက်')

ဒြပ်စင်များ ပေါ်လာခြင်းကို ဝှက်ထားသည်။

  1. $ ( '#element' )။ popover ( 'ဝှက်' )

.popover('toggle')

ဒြပ်စင်တစ်ခုပေါ်လာသည်

  1. $ ( '#element' )။ popover ( 'ပြောင်းရန်' )

သတိပေးချက်များအကြောင်း

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

ဒေါင်းလုဒ်လုပ်ပါ။

နမူနာသတိပေးချက်များ

သတိပေးချက်ပလပ်အင်သည် ပုံမှန်သတိပေးချက်မက်ဆေ့ဂျ်များနှင့် မက်ဆေ့ချ်များကို ပိတ်ဆို့နိုင်သည်။

သန့်ရှင်းသော guacamole သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင်အရမ်းကြည့်ကောင်းနေမှာမဟုတ်ပါဘူး။

အိုး! မင်းမှာ အမှားတစ်ခု ရှိတယ်။

အဲဒါကို ပြောင်းပြီး ထပ်စမ်းကြည့်ပါ။ Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula၊ eget lacinia odio sem nec elit။ Cras mattis consectetur purus ထိုင် amet fermentum ။

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။


bootstrap-alert.js ကိုအသုံးပြုခြင်း။

javascript မှတစ်ဆင့် သတိပေးချက်ကို ထုတ်ပယ်ခြင်းကို ဖွင့်ပါ-

  1. $ ( ". သတိပေးချက်" )။ သတိပေးချက် ()

သေား

data-dismiss="alert"အနီးကပ်သတိပေးချက် အလိုအလျောက် ပေးစွမ်းနိုင်စေရန် အနီးကပ် ခလုတ်ကို ထည့် လိုက်ရုံပါပဲ။

  1. <a class="close" data-dismiss="alert" href="#" > & times ; _ _ _ _ </a>

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

$().သတိပေးချက်()

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

သတိပေးချက်('ပိတ်')

သတိပေးချက်ကို ပိတ်သည်။

  1. $ ( ". သတိပေးချက်" )။ သတိပေးချက် ( 'ပိတ်' )

အဲ့ဒါနဲ့

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

ပွဲ ဖော်ပြချက်
အနီးကပ် closeသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပိတ်သိမ်း သတိပေးချက်ကို ပိတ်လိုက်သောအခါတွင် ဤအစီအစဉ်ကို အလုပ်ဖြုတ်လိုက်သည် (css ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
  1. $ ( '#my-alert' )။ bind ( 'အပိတ်' function () {
  2. // တစ်ခုခုလုပ်...
  3. })

အကြောင်း

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

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

နမူနာအသုံးပြုမှုများ

ပြည်နယ်များနှင့် အဖွင့်အပိတ်များအတွက် ခလုတ်များကို အသုံးပြုပါ။

တင်းမာသော
တစ်ခုတည်း ခလုတ်
အမှန်ခြစ်ပါ။
ရေဒီယို

bootstrap-button.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် ခလုတ်များကို ဖွင့်ပါ-

  1. $ ( '.nav-tabs' )။ ခလုတ် ()

သေား

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

  1. <!-- Add data-toggle="button" ကို ခလုတ်တစ်ခုတည်းတွင် ခလုတ်ဖွင့်ခြင်းကို စတင်ရန် -->
  2. <button class = "btn" data-toggle = "button" > တစ်ခုတည်းပြောင်းရန် </button>
  3.  
  4. btn-group တွင် checkbox ပုံစံပြောင်းရန်အတွက် <!-- Add data-toggle="buttons-checkbox"
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > ဘယ်ဘက် </button>
  7. <button class = "btn" > အလယ် </button>
  8. <button class = "btn" > ညာဘက် </button>
  9. </div>
  10.  
  11. btn-group တွင် ရေဒီယိုပုံစံပြောင်းရန် <!-- Add data-toggle="buttons-radio" -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > ဘယ်ဘက် </button>
  14. <button class = "btn" > အလယ် </button>
  15. <button class = "btn" > ညာဘက် </button>
  16. </div>

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

$().ခလုတ်('toggle')

တွန်းသည့်အခြေအနေသို့ ပြောင်းရန်။ ခလုတ်ကို စဖွင့်ပြီးကြောင်း အသွင်အပြင်ကို ပေးသည်။

ကြိုတင်အသိပေးသည်! data-toggleရည်ညွှန်း ချက်ကို အသုံးပြု၍ ခလုတ်တစ်ခု၏ အလိုအလျောက်ခလုတ်ဖွင့်ခြင်းကို သင်ဖွင့်နိုင်သည် ။
  1. <button class = "btn" data-toggle = "button" > </button>

$().ခလုတ်('Loading')

ခလုတ်ကို ဖွင့်ခြင်းအဖြစ် သတ်မှတ်သည် - ခလုတ်ကို ပိတ်ပြီး စာသားကို စာသားတင်ခြင်းသို့ လဲလှယ်ပေးသည်။ ဒေတာ attribute ကို အသုံးပြု၍ စာသားအား တင်ခြင်းအား ခလုတ်ဒြပ်စင်ပေါ်တွင် သတ်မှတ်ရပါမည် data-loading-text

  1. <button class = "btn" data-loading-text = "အရာများကို ဖွင့်နေသည်..." > ... </button>
ကြိုတင်အသိပေးသည်! Firefox သည် စာမျက်နှာဖွင့်ခြင်းများတွင် မသန်စွမ်းသောအခြေအနေကို ဆက်လက်ရှိနေစေသည် ။ ဒီအတွက် ဖြေရှင်းနည်းက သုံးဖို့ autocomplete="off"ပါ။

$().button('reset')

ခလုတ်အခြေအနေကို ပြန်လည်သတ်မှတ်သည် - စာသားကို မူရင်းစာသားသို့ ပြောင်းသည်။

$().ခလုတ်(string)

ခလုတ်အခြေအနေကို ပြန်လည်သတ်မှတ်သည် - မည်သည့်ဒေတာကိုမဆို သတ်မှတ်ထားသော စာသားအခြေအနေသို့ စာသားကို ဖလှယ်သည်။

  1. <button class = "btn" data-complete-text = "ပြီးပြီ!" > ... </button>
  2. <script>
  3. $ ( '.btn' )။ ခလုတ် ( 'ပြီးပါပြီ' )
  4. </script>

အကြောင်း

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

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

* Transitions plugin ပါ၀င်ရန် လိုအပ်သည်။

ဥပမာ ဘာဂျာ

ပြိုကျသည့်ပလပ်အင်ကို အသုံးပြု၍ ကျွန်ုပ်တို့သည် ရိုးရှင်းသော ကော်ဒီယန်စတိုင်ဝစ်ဂျက်တစ်ခုကို တည်ဆောက်ခဲ့သည်-

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 အလုပ်လုပ်သည်ကို သင်မကြားဖူးပေ။

bootstrap-collapse.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့်ဖွင့်ပါ-

  1. $ ( ".collapse" )။ ပြိုကျခြင်း ()

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

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

သေား

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

  1. <button class = "btn btn-danger" data-toggle = "ပြိုကျသည်" data-target = "#demo" >
  2. ရိုးရှင်းသော အထူးပင်
  3. </button>
  4.  
  5. <div id = "သရုပ်ပြ" class = "ပြိုကျခြင်း" > </div>
ကြိုတင်အသိပေးသည်! အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ထိန်းချုပ်မှုတစ်ခုသို့ ထည့်ရန်၊ ဒေတာရည်ညွှန်းချက်ကို ထည့်ပါ data-parent="#selector"။ လုပ်ဆောင်ချက်ကို ကြည့်ရန် ဒီမိုကို ကိုးကားပါ။

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

.collapse(ရွေးချယ်စရာများ)

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

  1. $ ( '#myCollapsible' )။ ပြိုကျခြင်း ({
  2. toggle : အမှား
  3. })

.collapse('toggle')

ပြရန် သို့မဟုတ် ဝှက်ထားရန် ခေါက်နိုင်သော အစိတ်အပိုင်းတစ်ခုကို ပြောင်းရန်။

.collapse('ရှိုး')

တွဲနိုင်သောဒြပ်စင်ကိုပြသသည်။

.collapse('ဝှက်')

တွဲနိုင်သောဒြပ်စင်ကို ဝှက်ထားသည်။

အဲ့ဒါနဲ့

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

ပွဲ ဖော်ပြချက်
ရှိုး showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြသထားသည်။ ပြိုကျသည့်ဒြပ်စင်ကို အသုံးပြုသူမြင်နိုင်စေရန် ပြုလုပ်သောအခါ (css ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
ပုန်း hideနည်းလမ်းကို ခေါ်လိုက် သောအခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖယ်ရှားသည်။
ဝှက်ထားသည်။ အသုံးပြုသူမှ ပြိုကျသည့်ဒြပ်စင်ကို ဝှက်ထားသောအခါ (css အကူးအပြောင်းများ အပြီးသတ်ရန် စောင့်ပါမည်)။
  1. $ ( '#myCollapsible' )။ on ( 'hidden' function () {
  2. // တစ်ခုခုလုပ်...
  3. })

အကြောင်း

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

ဖိုင်ကိုဒေါင်းလုဒ်လုပ်ပါ။

ဥပမာ

စာရိုက်ခြင်းရလဒ်များကိုပြသရန် အောက်ပါအကွက်တွင် စာရိုက်ပါ။


bootstrap-typeahead.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် typeahead ကိုခေါ်ပါ

  1. $ ( '.typeahead' )။ စာစီစာရိုက် ()

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

နာမည် အမျိုးအစား ပုံသေ ဖော်ပြချက်
အရင်းအမြစ် ဇွတ် [ ] စုံစမ်းမေးမြန်းရန် ဒေတာအရင်းအမြစ်။
ပစ္စည်းများ နံပါတ် dropdown တွင်ပြသရန်အများဆုံးပစ္စည်းအရေအတွက်။
တိုက်ဆိုင်သူ လုပ်ဆောင်ချက် case insensitive မေးခွန်းတစ်ခုသည် အကြောင်းအရာတစ်ခုနှင့် ကိုက်ညီမှုရှိမရှိ ဆုံးဖြတ်ရန် အသုံးပြုသည့်နည်းလမ်း။ itemမေးခွန်းကို စမ်းသပ်ရန် ငြင်းခုံချက်တစ်ခုအား လက်ခံသည် ။ လက်ရှိမေးမြန်းချက်ကို ရယူပါ this.querytruequery သည် ကိုက်ညီပါက boolean ကို ပြန်ပေးပါ ။
အစီအစဥ် လုပ်ဆောင်ချက် အတိအကျကိုက်ညီမှု၊
အသေးအဖွဲ၊
အသေးအဖွဲ
အလိုအလျောက်ဖြည့်စွက်ရလဒ်များကို စီရန်အသုံးပြုသည့်နည်းလမ်း။ အငြင်းအခုံတစ်ခုတည်း itemsကို လက်ခံပြီး စာရိုက်ရှေ့ဥပမာ၏ နယ်ပယ်ရှိသည်။ လက်ရှိမေးမြန်းချက်ကို ကိုးကားပါ this.query
highlighter လုပ်ဆောင်ချက် မူရင်းကိုက်ညီမှုအားလုံးကို မီးမောင်းထိုးပြသည်။ အလိုအလျောက်ဖြည့်စွက်မှုရလဒ်များကို မီးမောင်းထိုးပြရန် အသုံးပြုသည့်နည်းလမ်း။ အငြင်းအခုံတစ်ခုတည်း itemကို လက်ခံပြီး စာရိုက်ရှေ့ဥပမာ၏ နယ်ပယ်ရှိသည်။ html ပြန်သင့်တယ်။

သေား

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

  1. <input type = "text" data- provide = "typeahead" >

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

.typeahead(ရွေးချယ်စရာများ)

စာရိုက်ခေါင်းဖြင့် ထည့်သွင်းမှုကို စတင်သည်။