ກ່ຽວກັບ modals

ປັບປຸງ, ແຕ່ມີຄວາມຍືດຫຍຸ່ນ, ໃຊ້ plugin javascript modal ແບບດັ້ງເດີມໂດຍມີພຽງແຕ່ການທໍາງານທີ່ຕ້ອງການຕໍາ່ສຸດທີ່ແລະຄ່າເລີ່ມຕົ້ນທີ່ສະຫລາດ.

ຕົວຢ່າງຄົງທີ່

ຂ້າງລຸ່ມນີ້ແມ່ນ modal rendered statically.

ການສາທິດສົດ

ສະຫຼັບ modal ຜ່ານ javascript ໂດຍການຄລິກໃສ່ປຸ່ມຂ້າງລຸ່ມນີ້. ມັນຈະເລື່ອນລົງແລະຈາງລົງຈາກດ້ານເທິງຂອງຫນ້າ.

ໃຊ້ bootstrap-modal

ໂທຫາ modal ຜ່ານ javascript:

$ ( '#myModal' ). modal ( ທາງ​ເລືອກ ​)

ທາງເລືອກ

ມາກອັບ

ທ່ານສາມາດເປີດໃຊ້ modals ໃນຫນ້າຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍບໍ່ຈໍາເປັນຕ້ອງຂຽນ javascript ເສັ້ນດຽວ. ພຽງແຕ່ຕັ້ງ data-toggle="modal"ຢູ່ໃນອົງປະກອບຄວບຄຸມທີ່ມີ a data-target="#foo"ຫຼື href="#foo"ກົງກັບ id ອົງປະກອບ modal, ແລະເມື່ອຄລິກ, ມັນຈະເປີດຕົວ modal ຂອງທ່ານ.

ນອກຈາກນັ້ນ, ເພື່ອເພີ່ມທາງເລືອກໃນຕົວຢ່າງ modal ຂອງທ່ານ, ພຽງແຕ່ລວມເອົາພວກມັນເປັນຄຸນລັກສະນະຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບອົງປະກອບຄວບຄຸມຫຼື modal markup ຕົວຂອງມັນເອງ.

<a class="btn" data-toggle="modal" href="#myModal"> ເປີດ ຕົວ ໂມ ດູນ </a> _ _ _ _    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </button>  
    <h3> ສ່ວນຫົວໂມດູນ </h3>
  </div>
  <div class = "modal-body" > 
    <p> ຮ່າງກາຍອັນໜຶ່ງອັນດີ… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn"> ປິດ </a> _ _ _ _ _  
    <a href="#" class="btn btn-primary"> ບັນ ທຶກ ການ ປ່ຽນ ແປງ </a>  
  </div>
</div>

ວິທີການ

.modal(ທາງເລືອກ)

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນ modal. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

$ ( '#myModal' ). modal ({
  ແປ້ນພິມ : false 
})

.modal('ສະຫຼັບ')

ສະຫຼັບ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ສະຫຼັບ' )

.modal('ສະແດງ')

ເປີດ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ສະແດງ' )

.modal('ເຊື່ອງ')

ເຊື່ອງ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ເຊື່ອງ' )

ເຫດການ

ຫ້ອງຮຽນ modal ຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ modal.

$ ( '#myModal' ). on ( 'ເຊື່ອງໄວ້' , function () {   
  // ເຮັດຫຍັງ...
})

ກ່ຽວກັບການເລື່ອນລົງ

ເພີ່ມເມນູແບບເລື່ອນລົງເກືອບທຸກຢ່າງໃນ Bootstrap ດ້ວຍ plugin ງ່າຍໆນີ້. Bootstrap ມີການສະຫນັບສະຫນູນເມນູແບບເລື່ອນລົງຢ່າງເຕັມທີ່ຢູ່ໃນແຖບ navbar, ແຖບ, ແລະຢາ.

ຕົວຢ່າງ

ໃຫ້ຄລິກໃສ່ແຖບເລື່ອນລົງ nav ແຖບໃນແຖບ navbar ແລະຢາຂ້າງລຸ່ມນີ້ເພື່ອທົດສອບ dropdowns.

• ການເຊື່ອມຕໍ່ປົກກະຕິ
• ເລື່ອນລົງ
  • Action
  • Another action
  • Something else here
  • Separated link
• ເລື່ອນລົງ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ເລື່ອນລົງ 3
  • Action
  • Another action
  • Something else here
  • Separated link

ການໃຊ້ bootstrap-dropdown.js

ໂທຫາ dropdowns ຜ່ານ javascript:

$ ( '.dropdown-toggle' ). ເລື່ອນລົງ ()

ມາກອັບ

ເພື່ອເພີ່ມການທໍາງານແບບເລື່ອນລົງຢ່າງໄວວາໃຫ້ກັບອົງປະກອບໃດໆພຽງແຕ່ເພີ່ມ data-toggle="dropdown"ແລະເລື່ອນລົງ bootstrap ທີ່ຖືກຕ້ອງຈະຖືກເປີດໃຊ້ໂດຍອັດຕະໂນມັດ.

<ul class = "nav nav-pills" > 
  <li class = "active" > <a href="#"> ລິ້ງ ປົກກະຕິ </a></li >  
  <li class = "dropdown" id = "menu1" >  
    <a class="dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _ _ _   
      ເລື່ອນລົງ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#"> ປະຕິບັດ </a> </li> 
      <li><a href="#"> ການ ກະ ທຳອື່ນ </a> </li> 
      <li > <a href = "#"> ອັນ ອື່ນຢູ່ນີ້ </a></li> 
      <li class = "divider" ></li> 
      <li > <a href = "#"> ລິ້ງທີ່ ແຍກກັນ </a></li> 
    </ul>
  </li>
  ...
</ul>

ເພື່ອຮັກສາ URLs ໄວ້, ໃຫ້ໃຊ້ data-targetຄຸນສົມບັດແທນ href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class="dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _ _ _    
      ເລື່ອນລົງ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ວິທີການ

$().dropdown()

api ທີ່ເປັນໂປຼແກຼມສໍາລັບການເປີດໃຊ້ເມນູສໍາລັບ navbar ທີ່ກໍານົດໄວ້ຫຼືການນໍາທາງແຖບ.

plugin ScrollSpy ແມ່ນສໍາລັບການປັບປຸງອັດຕະໂນມັດເປົ້າຫມາຍ nav ໂດຍອີງໃສ່ຕໍາແຫນ່ງເລື່ອນ.

ຕົວຢ່າງ navbar ກັບ scrollspy

ເລື່ອນພື້ນທີ່ດ້ານລຸ່ມ ແລະເບິ່ງການອັບເດດການນໍາທາງ. ລາຍການຍ່ອຍແບບເລື່ອນລົງຈະຖືກເນັ້ນໃສ່ເຊັ່ນກັນ. ລອງ​ເບິ່ງ!

ການນໍາໃຊ້ bootstrap-scrollspy.js

ໂທຫາ scrollspy ຜ່ານ javascript:

$ ( '#navbar' ). scrollspy ()

ມາກອັບ

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ໃນ​ການ​ນໍາ​ທາງ topbar ຂອງ​ທ່ານ, ພຽງ​ແຕ່​ເພີ່ມ data-spy="scroll"​ໃສ່​ອົງ​ປະ​ກອບ​ທີ່​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ spy ກ່ຽວ​ກັບ (ໂດຍ​ທົ່ວ​ໄປ​ນີ້​ສ່ວນ​ຫຼາຍ​ຈະ​ເປັນ​ຮ່າງ​ກາຍ).

<body data-spy = "ເລື່ອນ" > ... </body>  

ວິທີການ

.scrollspy('ໂຫຼດຫນ້າຈໍຄືນ')

ເມື່ອໃຊ້ scrollspy ສົມທົບກັບການເພີ່ມຫຼືເອົາອົງປະກອບອອກຈາກ DOM, ທ່ານຈະຕ້ອງໂທຫາວິທີການໂຫຼດຫນ້າຈໍຄືນເຊັ່ນ:

$ ( '[data-spy="scroll"]' ). ແຕ່ລະ ( ຟັງຊັນ () {  
  var $spy = $ ( ນີ້ ). scrollspy ( 'ໂຫຼດຫນ້າຈໍຄືນ' )
});

ທາງເລືອກ

ເຫດການ

ປັ໊ກອິນນີ້ເພີ່ມແຖບໄວ, ແບບເຄື່ອນໄຫວແລະການທໍາງານຂອງຢາສໍາລັບການປ່ຽນຜ່ານເນື້ອຫາທ້ອງຖິ່ນ.

ແຖບຕົວຢ່າງ

ຄລິກແຖບລຸ່ມນີ້ເພື່ອສະຫຼັບລະຫວ່າງແຖບທີ່ເຊື່ອງໄວ້, ເຖິງແມ່ນວ່າຜ່ານເມນູແບບເລື່ອນລົງກໍຕາມ.

• ບ້ານ
• ໂປຣໄຟລ໌
• ເລື່ອນລົງ
  • @fat
  • @mdo

ໃຊ້ bootstrap-tab.js

ເປີດໃຊ້ tabbable tabs ຜ່ານ javascript (ແຕ່ລະແທັບຕ້ອງຖືກເປີດໃຊ້ແຕ່ລະອັນ):

$ ( '#myTab a' ). ຄລິກ ( ຟັງຊັນ ( e ) {  
  e . PreventDefault ();
  $ ( ນີ້ ). tab ( 'ສະແດງ' );
})

ທ່ານສາມາດເປີດໃຊ້ແທັບສ່ວນບຸກຄົນໄດ້ຫຼາຍວິທີ:

$ ( '#myTab a[href="#profile"]' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບໂດຍຊື່ 
$ ( '#myTab a:first' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບທໍາອິດ 
$ ( '#myTab a:last' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບສຸດທ້າຍ 
$ ( '#myTab li:eq(2) a' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບທີສາມ (0-indexed) 

ມາກອັບ

ທ່ານ​ສາ​ມາດ​ກະ​ຕຸ້ນ​ການ​ນໍາ​ທາງ​ແຖບ​ຫຼື​ຢາ​ໂດຍ​ບໍ່​ມີ​ການ​ຂຽນ javascript ໃດ​ໂດຍ​ການ​ພຽງ​ແຕ່​ລະ​ບຸ data-toggle="tab"​ຫຼື data-toggle="pill"​ໃນ​ອົງ​ປະ​ກອບ​. ການເພີ່ມ navແລະ nav-tabsຫ້ອງຮຽນໃສ່ແຖບ ulຈະນຳໃຊ້ການຈັດຮູບແບບແຖບ bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> ໜ້າ ຫຼັກ </a> </li>  
  <li><a href = "#profile" data-toggle = "tab">ໂປຣໄຟລ໌ </a> </li >  
  <li><a href = "#messages" data-toggle = "tab"> ຂໍ້ຄວາມ </a> </li>  
  <li><a href = "#settings" data-toggle = "tab"> ການ ຕັ້ງຄ່າ </a></li>  
</ul>

ວິທີການ

$().tab

ເປີດໃຊ້ອົງປະກອບແຖບ ແລະຕົວບັນຈຸເນື້ອຫາ. ແຖບຄວນຈະມີ data-targetຫຼືການ hrefກໍາຫນົດເປົ້າຫມາຍ node container ໃນ DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href="#home"> ເຮືອນ </a> </li >  
  <li><a href="#profile"> ໂປຣ ໄຟລ໌ </a> < /li> 
  <li > <a href = "#messages"> ຂໍ້ຄວາມ </a></li> 
  <li><a href = "#settings"> ການ ຕັ້ງຄ່າ </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "ຂໍ້ຄວາມ" > ... </div>  
  <div class = "tab-pane" id = "ການຕັ້ງຄ່າ" > ... </div>  
</div>
 
<script>
  $ ( ຟັງຊັນ () {  
    $ ( '#myTab a:last' ). tab ( 'ສະແດງ' );
  })
</script>

ເຫດການ

$ ( 'a[data-toggle="tab"]' ). on ( 'ສະແດງ' , function ( e ) {   
  e . ເປົ້າໝາຍ // ແຖບເປີດໃຊ້ງານ
  e . ເປົ້າໝາຍທີ່ກ່ຽວຂ້ອງ // ແຖບກ່ອນໜ້າ
})

ກ່ຽວກັບຄໍາແນະນໍາເຄື່ອງມື

ໄດ້ຮັບການດົນໃຈຈາກ plugin jQuery.tipsy ທີ່ດີເລີດທີ່ຂຽນໂດຍ Jason Frame; ຄໍາແນະນໍາເຄື່ອງມືແມ່ນສະບັບປັບປຸງ, ເຊິ່ງບໍ່ໄດ້ອີງໃສ່ຮູບພາບ, ໃຊ້ css3 ສໍາລັບພາບເຄື່ອນໄຫວ, ແລະຄຸນລັກສະນະຂໍ້ມູນສໍາລັບການເກັບຮັກສາຊື່ທ້ອງຖິ່ນ.

ຕົວຢ່າງການນໍາໃຊ້ຄໍາແນະນໍາ

ເລື່ອນໃສ່ລິ້ງດ້ານລຸ່ມເພື່ອເບິ່ງຄຳແນະນຳ:

ການໃຊ້ bootstrap-tooltip.js

ກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືຜ່ານ javascript:

$ ( '#ຕົວຢ່າງ' ). ຄຳແນະນຳ ( ຕົວເລືອກ )

ທາງເລືອກ

ມາກອັບ

ສໍາລັບເຫດຜົນດ້ານປະສິດທິພາບ, Tooltip ແລະ Popover data-apis ຈະຖືກເລືອກເຂົ້າ. ຖ້າທ່ານຕ້ອງການໃຊ້ພວກມັນພຽງແຕ່ລະບຸຕົວເລືອກຕົວເລືອກ.

<a href="#" rel="tooltip" title="ຄຳແນະນຳທຳອິດ"> ເລື່ອນ ໃສ່ ຂ້ອຍ </a> _ _ _ _ _   

ວິທີການ

$().tooltip(ທາງເລືອກ)

ແນບຕົວຈັບຄໍາແນະນໍາເຄື່ອງມືໃສ່ຄໍເລັກຊັນອົງປະກອບ.

.tooltip('show')

ເປີດເຜີຍຄໍາແນະນໍາຂອງອົງປະກອບ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ສະແດງ' )

.tooltip('ເຊື່ອງ')

ເຊື່ອງຄໍາແນະນໍາຂອງອົງປະກອບ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ເຊື່ອງ' )

.tooltip('ສະຫຼັບ')

ສະຫຼັບຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ສະຫຼັບ' )

ກ່ຽວກັບ popovers

ຕື່ມການຊ້ອນກັນເລັກນ້ອຍຂອງເນື້ອຫາ, ເຊັ່ນວ່າຢູ່ໃນ iPad, ອົງປະກອບໃດໆສໍາລັບຂໍ້ມູນຮອງທີ່ຢູ່ອາໄສ.

* ຕ້ອງ ການຄໍາແນະນໍາ ເຄື່ອງມື ທີ່ຈະລວມ

ຕົວຢ່າງ hover popover

ເລື່ອນເມົ້າໃສ່ປຸ່ມເພື່ອກະຕຸ້ນການປະກົດຕົວ.

ໃຊ້ bootstrap-popover.js

ເປີດໃຊ້ popovers ຜ່ານ javascript:

$ ( '#ຕົວຢ່າງ' ). popover ( ທາງເລືອກ )

ທາງເລືອກ

ມາກອັບ

ສໍາລັບເຫດຜົນດ້ານປະສິດທິພາບ, Tooltip ແລະ Popover data-apis ຈະຖືກເລືອກເຂົ້າ. ຖ້າທ່ານຕ້ອງການໃຊ້ພວກມັນພຽງແຕ່ລະບຸຕົວເລືອກຕົວເລືອກ.

ວິທີການ

$().popover(ຕົວເລືອກ)

ເລີ່ມຕົ້ນ popovers ສໍາລັບການເກັບກໍາອົງປະກອບ.

.popover('ສະແດງ')

ເປີດເຜີຍອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ສະແດງ' )

.popover('ເຊື່ອງ')

ເຊື່ອງອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ເຊື່ອງ' )

.popover('ສະຫຼັບ')

ສະຫຼັບອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ສະຫຼັບ' )

ກ່ຽວກັບການແຈ້ງເຕືອນ

ປັ໊ກອິນເຕືອນແມ່ນຫ້ອງຮຽນນ້ອຍໆສໍາລັບການເພີ່ມຫນ້າທີ່ໃກ້ຊິດກັບການແຈ້ງເຕືອນ.

ຕົວຢ່າງການແຈ້ງເຕືອນ

plugin ການແຈ້ງເຕືອນເຮັດວຽກກ່ຽວກັບຂໍ້ຄວາມແຈ້ງເຕືອນປົກກະຕິ, ແລະຂໍ້ຄວາມບລັອກ.

ການໃຊ້ bootstrap-alert.js

ເປີດໃຊ້ການຍົກເລີກການແຈ້ງເຕືອນຜ່ານ javascript:

$ ( ".alert" ). ເຕືອນ ()

ມາກອັບ

ພຽງແຕ່ເພີ່ມ data-dismiss="alert"ໃສ່ປຸ່ມປິດຂອງເຈົ້າເພື່ອໃຫ້ຟັງຊັນປິດການແຈ້ງເຕືອນໂດຍອັດຕະໂນມັດ.

<a class = "ປິດ" data-dismiss = "ເຕືອນ" href = "#" > × </a>   

ວິທີການ

$().alert()

ຫໍ່​ການ​ແຈ້ງ​ເຕືອນ​ທັງ​ຫມົດ​ທີ່​ມີ​ການ​ທໍາ​ງານ​ທີ່​ໃກ້​ຊິດ​. ເພື່ອໃຫ້ການແຈ້ງເຕືອນຂອງທ່ານມີການເຄື່ອນໄຫວອອກມາເມື່ອປິດ, ໃຫ້ແນ່ໃຈວ່າພວກມັນໄດ້ໃຊ້ .fadeແລະ .inຫ້ອງຮຽນແລ້ວ.

.alert('ປິດ')

ປິດການແຈ້ງເຕືອນ.

$ ( ".alert" ). ເຕືອນ ( 'ປິດ' )

ເຫດການ

ຫ້ອງຮຽນເຕືອນຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງການແຈ້ງເຕືອນ.

$ ( '#my-alert' ). bind ( 'ປິດ' , function () {   
  // ເຮັດຫຍັງ...
})

ກ່ຽວກັບ

ເຮັດໄດ້ຫຼາຍຂຶ້ນດ້ວຍປຸ່ມຕ່າງໆ. ປຸ່ມຄວບຄຸມສະຖານະ ຫຼືສ້າງກຸ່ມຂອງປຸ່ມຕ່າງໆສຳລັບອົງປະກອບເພີ່ມເຕີມເຊັ່ນແຖບເຄື່ອງມື.

ຕົວຢ່າງການນໍາໃຊ້

ໃຊ້ປັ໊ກອິນປຸ່ມສໍາລັບລັດແລະສະຫຼັບ.

ການໃຊ້ bootstrap-button.js

ເປີດໃຊ້ປຸ່ມຜ່ານ javascript:

$ ( '.nav-tabs' ). ປຸ່ມ ()

ມາກອັບ

ຄຸນລັກສະນະຂອງຂໍ້ມູນແມ່ນລວມເຂົ້າກັບ plugin ປຸ່ມ. ກວດເບິ່ງລະຫັດຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບປະເພດເຄື່ອງຫມາຍຕ່າງໆ.

<!-- Add data-toggle="button" ເພື່ອເປີດໃຊ້ການສະຫຼັບໃນປຸ່ມດຽວ -->
<button class = "btn" data-toggle = "button" > ປິດ/ເປີດອັນ ດຽວ </button>  
 
<!-- Add data-toggle="buttons-checkbox" ສຳລັບການສະຫຼັບຮູບແບບກ່ອງກາໝາຍຢູ່ໃນ btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ຊ້າຍ </button> 
  <button class = "btn" > ກາງ </button> 
  <button class = "btn" > ຂວາ </button> 
</div>
 
<!-- Add data-toggle="buttons-radio" ສຳລັບການສະຫຼັບຮູບແບບວິທະຍຸໃນ btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ຊ້າຍ </button> 
  <button class = "btn" > ກາງ </button> 
  <button class = "btn" > ຂວາ </button> 
</div>

ວິທີການ

$().button('toggle')

ສະຫຼັບສະຖານະ push. ໃຫ້ປຸ່ມປະກົດວ່າມັນຖືກເປີດໃຊ້ແລ້ວ.

<button class = "btn" data-toggle = "button" > … </button>   

$().button('loading')

ຕັ້ງສະຖານະປຸ່ມເປັນການໂຫຼດ - ປິດການໃຊ້ງານປຸ່ມ ແລະປ່ຽນຂໍ້ຄວາມເປັນການໂຫຼດຂໍ້ຄວາມ. ການໂຫຼດຂໍ້ຄວາມຄວນຖືກກໍານົດຢູ່ໃນອົງປະກອບຂອງປຸ່ມໂດຍໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ data-loading-text.

<button class = "btn" data-loading-text = "ກຳລັງໂຫຼດຂໍ້ມູນ..." > ... </button>   

$().button('reset')

ຣີເຊັດສະຖານະປຸ່ມ - ປ່ຽນຂໍ້ຄວາມເປັນຂໍ້ຄວາມຕົ້ນສະບັບ.

$().button(string)

ຣີເຊັດສະຖານະປຸ່ມ - ສະຫຼັບຂໍ້ຄວາມໄປຫາຂໍ້ມູນໃດໆກໍຕາມທີ່ກຳນົດສະຖານະຂໍ້ຄວາມ.

<button class = "btn" data-complete-text = "ສຳເລັດແລ້ວ!" > ... </button>   
<script>
  $ ( '.btn' ). ປຸ່ມ ( 'ສໍາເລັດ' )
</script>

ກ່ຽວກັບ

ຮັບເອົາຮູບແບບພື້ນຖານ ແລະການສະຫນັບສະຫນູນທີ່ຍືດຫຍຸ່ນສໍາລັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເຊັ່ນ: accordions ແລະການນໍາທາງ.

* ຮຽກຮ້ອງໃຫ້ປລັກອິນ Transitions ຖືກລວມເຂົ້າ.

ຕົວຢ່າງ accordion

ການນໍາໃຊ້ plugin ຍຸບ, ພວກເຮົາໄດ້ສ້າງ widget ແບບ accordion ງ່າຍດາຍ:

ການໃຊ້ bootstrap-collapse.js

ເປີດໃຊ້ຜ່ານ javascript:

$ ( ".ລົ້ມລົງ" ). ຍຸບ ()

ທາງເລືອກ

ມາກອັບ

ພຽງ​ແຕ່​ເພີ່ມ data-toggle="collapse"​ແລະ data-target​ກັບ​ອົງ​ປະ​ກອບ​ທີ່​ຈະ​ກໍາ​ນົດ​ອັດ​ຕະ​ໂນ​ມັດ​ການ​ຄວບ​ຄຸມ​ຂອງ​ອົງ​ປະ​ກອບ​ທີ່​ຍຸບ​ໄດ້​. ຄຸນ ສົມ data-targetບັດຍອມຮັບຕົວເລືອກ css ເພື່ອນຳໃຊ້ການຫຍໍ້ລົງໃສ່. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມຊັ້ນ collapseເຂົ້າໄປໃນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຖ້າທ່ານຕ້ອງການໃຫ້ມັນເປີດໃນຕອນຕົ້ນ, ໃຫ້ເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມ in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  ຍຸບງ່າຍ
</button>
 
<div id = "ສາທິດ" class = "ຫຍໍ້ເຂົ້າ" > … </div>  

ວິທີການ

.collapse(ຕົວເລືອກ)

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

$ ( '#myCollapsible' ). ຍຸບ ({
  ສະຫຼັບ : ບໍ່ຖືກຕ້ອງ 
})

.collapse('ສະຫຼັບ')

ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເພື່ອສະແດງ ຫຼືເຊື່ອງໄວ້.

.collapse('show')

ສະແດງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້.

.collapse('ເຊື່ອງ')

ເຊື່ອງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້.

ເຫດການ

ຫ້ອງຮຽນຍຸບຂອງ Bootstrap ເປີດເຜີຍເຫດການບໍ່ຫຼາຍປານໃດສໍາລັບການເຊື່ອມໂຍງກັບຫນ້າທີ່ການລົ້ມລົງ.

$ ( '#myCollapsible' ). on ( 'ເຊື່ອງໄວ້' , function () {   
  // ເຮັດຫຍັງ...
})

ກ່ຽວກັບ

plugin ທົ່ວໄປສໍາລັບການຂີ່ລົດຖີບຜ່ານອົງປະກອບ. ມ່ວນຊື່ນໄປຕະຫຼອດ.

ຕົວຢ່າງ carousel

ເບິ່ງ slideshow ຂ້າງລຸ່ມນີ້.

ປ້າຍກຳກັບຮູບຕົວຢ່າງທຳອິດ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ປ້າຍກຳກັບຮູບຕົວຢ່າງທີສອງ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ປ້າຍກຳກັບຮູບຕົວຢ່າງອັນທີສາມ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

ການໃຊ້ bootstrap-carousel.js

ໂທຜ່ານ javascript:

$ ( '.carousel' ). ວົງວຽນ ()

ທາງເລືອກ

ມາກອັບ

ຄຸນລັກສະນະຂໍ້ມູນແມ່ນໃຊ້ສໍາລັບການຄວບຄຸມກ່ອນຫນ້າແລະຕໍ່ໄປ. ກວດເບິ່ງເຄື່ອງຫມາຍຕົວຢ່າງຂ້າງລຸ່ມນີ້.

<div id = "myCarousel" class = "carousel" >  
  <!-- ລາຍການ Carousel -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ວິທີການ

.carousel(ຕົວເລືອກ)

ເລີ່ມຕົ້ນ carousel ດ້ວຍຕົວເລືອກທາງເລືອກ objectແລະເລີ່ມການຂີ່ລົດຖີບຜ່ານລາຍການ.

$ ( '.carousel' ). ວົງວຽນ ({
  ໄລຍະຫ່າງ : 2000 
})

.carousel('ວົງຈອນ')

ຮອບວຽນຜ່ານລາຍການ carousel ຈາກຊ້າຍໄປຂວາ.

.carousel('ຢຸດ')

ຢຸດ carousel ຈາກການຖີບຜ່ານລາຍການ.

.carousel(ຕົວເລກ)

ວົງຈອນ carousel ໄປຫາກອບສະເພາະ (0 ໂດຍອີງຕາມ, ຄ້າຍຄືກັນກັບ array).

.carousel('ກ່ອນໜ້າ')

ຮອບວຽນໄປຫາລາຍການກ່ອນໜ້າ.

.carousel('ຖັດໄປ')

ຮອບວຽນໄປຫາລາຍການຕໍ່ໄປ.

ເຫດການ

ຫ້ອງຮຽນ carousel ຂອງ Bootstrap ເປີດເຜີຍສອງເຫດການສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ carousel.

ກ່ຽວກັບ

ປັ໊ກອິນພື້ນຖານ, ຂະຫຍາຍໄດ້ງ່າຍສໍາລັບການສ້າງຕົວພິມທີ່ສະຫງ່າງາມຢ່າງໄວວາດ້ວຍການປ້ອນຂໍ້ຄວາມແບບຟອມໃດໆ.

ຕົວຢ່າງ

ເລີ່ມພິມໃນຊ່ອງຂ້າງລຸ່ມນີ້ເພື່ອສະແດງຜົນການພິມກ່ອນ.

ການໃຊ້ bootstrap-typeahead.js

ໂທຫາ typeahead ຜ່ານ javascript:

$ ( '.typeahead' ). ພິມໜ້າ ()

ທາງເລືອກ

ມາກອັບ

ເພີ່ມຄຸນລັກສະນະຂໍ້ມູນເພື່ອລົງທະບຽນອົງປະກອບທີ່ມີຟັງຊັນ typeahead.

<ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" data-provide = "typeahead" >  

ວິທີການ

.typeahead(ຕົວເລືອກ)

ເລີ່ມຕົ້ນການປ້ອນຂໍ້ມູນດ້ວຍຕົວພິມກ່ອນ.