Javascript ສໍາລັບ Bootstrap

ເອົາອົງປະກອບຂອງ Bootstrap ໄປສູ່ຊີວິດ - ຕອນນີ້ມີ 12 plugins jQuery ແບບກຳນົດເອງ.

ໂມດູນ

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

ເລື່ອນລົງ

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

ເລື່ອນ

ໃຊ້ scrollspy ເພື່ອອັບເດດລິ້ງອັດຕະໂນມັດໃນແຖບ navbar ຂອງທ່ານເພື່ອສະແດງການເຊື່ອມຕໍ່ທີ່ໃຊ້ໃນປັດຈຸບັນໂດຍອີງໃສ່ຕໍາແຫນ່ງເລື່ອນ.

ແຖບທີ່ສະຫຼັບໄດ້

ໃຊ້ປັ໊ກອິນນີ້ເພື່ອເຮັດໃຫ້ແທັບແລະຢາມີປະໂຫຍດຫຼາຍຂຶ້ນໂດຍການອະນຸຍາດໃຫ້ພວກເຂົາສະຫຼັບຜ່ານແຖບຕາຕະລາງຂອງເນື້ອຫາທ້ອງຖິ່ນ.

ຄຳແນະນຳ

ການປະຕິບັດໃຫມ່ກ່ຽວກັບ jQuery Tipsy plugin, ຄໍາແນະນໍາບໍ່ໄດ້ອີງໃສ່ຮູບພາບ - ພວກເຂົາໃຊ້ CSS3 ສໍາລັບພາບເຄື່ອນໄຫວແລະຂໍ້ມູນ - ຄຸນລັກສະນະສໍາລັບການເກັບຮັກສາຫົວຂໍ້ທ້ອງຖິ່ນ.

Popovers *

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

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

ຂໍ້ຄວາມເຕືອນ

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

ປຸ່ມ

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

ຫຍໍ້ລົງ

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

Carousel

ສ້າງຄວາມມ່ວນໄປຕະຫຼອດຂອງເນື້ອຫາໃດໆທີ່ທ່ານຕ້ອງການທີ່ຈະສະຫນອງການສະໄລໂຊແບບໂຕ້ຕອບຂອງເນື້ອຫາ.

ພິມກ່ອນ

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

ການຫັນປ່ຽນ *

ສຳລັບເອັບເຟັກການປ່ຽນແປງແບບງ່າຍໆ, ໃຫ້ໃສ່ bootstrap-transition.js ນຶ່ງຄັ້ງເພື່ອເລື່ອນເປັນໂມດູນ ຫຼືການເຕືອນໃຫ້ຫາຍໄປ.

* ຕ້ອງການສໍາລັບການເຄື່ອນໄຫວໃນ plugins

ລະວັງ! ທຸກໆ plugins javascript ຕ້ອງການ jQuery ລຸ້ນລ້າສຸດ.

ກ່ຽວກັບ modals

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

ດາວໂຫຼດໄຟລ໌

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

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

ການສາທິດສົດ

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

ເປີດຕົວໂມດູນສາທິດ

ໃຊ້ bootstrap-modal

ໂທຫາ modal ຜ່ານ javascript:

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ສາກຫຼັງ ບູລີນ ຄວາມຈິງ ລວມມີອົງປະກອບສາກຫຼັງ modal. ອີກທາງເລືອກ, ລະບຸ staticສາກຫຼັງທີ່ບໍ່ປິດ modal ໃນການຄລິກ.
ແປ້ນພິມ ບູລີນ ຄວາມຈິງ ປິດ modal ເມື່ອກົດປຸ່ມ escape ຖືກກົດ
ສະແດງໃຫ້ເຫັນ ບູລີນ ຄວາມຈິງ ສະແດງ modal ເມື່ອເລີ່ມຕົ້ນ.

ມາກອັບ

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

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

  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> ສ່ວນຫົວໂມດູນ </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 ຂອງທ່ານໃຫ້ມີການເຄື່ອນໄຫວໃນແລະອອກ, ພຽງແຕ່ເພີ່ມ .fadeຫ້ອງຮຽນໃສ່ .modalອົງປະກອບ (ເບິ່ງຕົວຢ່າງເພື່ອເບິ່ງມັນຢູ່ໃນການປະຕິບັດ) ແລະປະກອບມີ bootstrap-transition.js.

ວິທີການ

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

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

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

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

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

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

.modal('ສະແດງ')

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

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

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

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

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

ເຫດການ

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

ເຫດການ ລາຍລະອຽດ
ສະແດງໃຫ້ເຫັນ ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ສະແດງໃຫ້ເຫັນ ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ).
ເຊື່ອງ ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ເຊື່ອງໄວ້ ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ).
  1. $ ( '#myModal' ). on ( 'ເຊື່ອງໄວ້' , function () {
  2. // ເຮັດຫຍັງ...
  3. })

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

ດາວໂຫຼດໄຟລ໌

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

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

@ໄຂມັນ

ໂຄສະນາ leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ກ່ອນທີ່ພວກເຂົາຈະຂາຍອອກ qui. Tumblr farm-to-table bike rights ໃດກໍ່ຕາມ. ສັດ keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ທີ່ທ່ານອາດຈະບໍ່ເຄີຍໄດ້ຍິນຂອງເຂົາເຈົ້າ et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

skateboard mustache Veniam marfa, adipisicing fugiat velit pitchfork ຈັບຫນວດ. Freegan ຈັບຫນວດ aliqua cupidatat mcsweeney's vero. Cupidatat ສີ່ loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ການອອກກໍາລັງກາຍທີ່ບໍ່ແມ່ນຄວາມງາມ quis gentrify. Brooklyn adipisicing craft beer ຮອງ keytar deserunt.

ຫນຶ່ງ

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. ສິດທິລົດຖີບ Lomo adipisicing banh mi, velit ea sunt ລະດັບຕໍ່ໄປ locavore ກາເຟຕົ້ນກໍາເນີດດຽວໃນ magna veniam. ຊີວິດສູງ id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS ແມ່ນ adipisicing. Consectetur nisi DIY ຖົງ messenger ຫນ້ອຍ. Cred ex in, sustainable 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 blog, culpa messenger bag marfa ໃດກໍ່ຕາມ delectus ລົດອາຫານ. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກມັນ consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ກ່ອນທີ່ພວກເຂົາຈະຂາຍອອກ, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS Chambray Laboris tempor veniam. ສັດ mollit minim commodo ullamco thundercats.


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

ໂທຫາ scrollspy ຜ່ານ javascript:

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

ມາກອັບ

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

  1. <body data-spy = "ເລື່ອນ" > ... </body>
ລະວັງ! ລິ້ງ Navbar ຕ້ອງມີເປົ້າໝາຍ id ທີ່ສາມາດແກ້ໄຂໄດ້. ຕົວຢ່າງ, <a href="#home">home</a>ຕ້ອງກົງກັບບາງສິ່ງບາງຢ່າງໃນ dom ເຊັ່ນ <div id="home"></div>.

ວິທີການ

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

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

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ຊົດເຊີຍ ເລກ 10 pixels ທີ່ຈະຊົດເຊີຍຈາກດ້ານເທິງໃນເວລາທີ່ຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ.

ເຫດການ

ເຫດການ ລາຍລະອຽດ
ເປີດໃຊ້ ເຫດການນີ້ຈະດັບໄຟທຸກຄັ້ງທີ່ລາຍການໃໝ່ຖືກເປີດໃຊ້ໂດຍ scrollspy.

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

ດາວໂຫຼດໄຟລ໌

ແຖບຕົວຢ່າງ

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

denim ດິບ ທີ່ ທ່ານ ອາດ ຈະ ບໍ່ ໄດ້ ຍິນ ຂອງ ເຂົາ ເຈົ້າ jean ສັ້ນ Austin . Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ເຄື່ອງແຕ່ງກາຍອາເມລິກາ, butcher 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

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

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

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

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

ມາກອັບ

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

  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>

ວິທີການ

$().tab

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

  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 = "ຂໍ້ຄວາມ" > ... </div>
  12. <div class = "tab-pane" id = "ການຕັ້ງຄ່າ" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( ຟັງຊັນ () {
  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. e . ເປົ້າໝາຍ // ແຖບເປີດໃຊ້ງານ
  3. e . ເປົ້າໝາຍທີ່ກ່ຽວຂ້ອງ // ແຖບກ່ອນໜ້າ
  4. })

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

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

ດາວໂຫຼດໄຟລ໌

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

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

ກາງເກງແຫນ້ນລະດັບຕໍ່ໄປ keffiyeh ເຈົ້າອາດຈະ ບໍ່ໄດ້ຍິນກ່ຽວກັບພວກມັນ. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit American apparel ມີ terry richardson vinyl chambray. ໜວດ ມ່າຍ ເຕີ໋ຍ, ກ໊ອງ ບົ໋ວ ມ່າຍ ຢຽດ ເຕົ້າ. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. ຊ່າງຫັດຖະກໍາທີ່ ມີທາດເຫຼັກແທ້ໆອັນ ໃດກໍໄດ້ keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim viral ກາເຟຕົ້ນກໍາເນີດ.


ການໃຊ້ bootstrap-tooltip.js

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

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ
ການຈັດວາງ string|ຟັງຊັນ 'ເທິງ' ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ
ໂຕເລືອກ ສາຍ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ເຄື່ອງມືແນະນຳວັດຖຸຈະຖືກມອບໝາຍໃຫ້ເປົ້າໝາຍທີ່ລະບຸໄວ້.
ຫົວຂໍ້ ຊ່ອຍແນ່ | ຫນ້າທີ່ '' ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າແທັກ `title` ບໍ່ມີຢູ່
ກະຕຸ້ນ ສາຍ 'ເລື່ອນ' ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື
ຊັກຊ້າ ເລກ | ວັດຖຸ 0

ການຊັກຊ້າສະແດງແລະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) - ບໍ່ໃຊ້ກັບປະເພດຕົວກະຕຸ້ນຄູ່ມື

ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { show: 500, hide: 100 }

ລະວັງ! ທາງ​ເລືອກ​ສໍາ​ລັບ​ຄໍາ​ແນະ​ນໍາ​ຂອງ​ບຸກ​ຄົນ​ເປັນ​ທາງ​ເລືອກ​ທີ່​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ລະ​ບຸ​ໂດຍ​ການ​ນໍາ​ໃຊ້​ຄຸນ​ລັກ​ສະ​ນະ​ຂໍ້​ມູນ​.

ມາກອັບ

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

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

ວິທີການ

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

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

.tooltip('show')

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

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

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

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

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

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

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

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

ກ່ຽວກັບ popovers

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

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

ດາວໂຫຼດໄຟລ໌

ຕົວຢ່າງ hover popover

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


ໃຊ້ bootstrap-popover.js

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

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ
ການຈັດວາງ string|ຟັງຊັນ 'ຖືກຕ້ອງ' ວິທີການຈັດຕໍາແຫນ່ງ popover - ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ
ໂຕເລືອກ ສາຍ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ເຄື່ອງມືແນະນຳວັດຖຸຈະຖືກມອບໝາຍໃຫ້ກັບເປົ້າໝາຍທີ່ລະບຸໄວ້
ກະຕຸ້ນ ສາຍ 'ເລື່ອນ' ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື
ຫົວຂໍ້ ຊ່ອຍແນ່ | ຫນ້າທີ່ '' ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າຄຸນສົມບັດ `title` ບໍ່ມີຢູ່
ເນື້ອໃນ ຊ່ອຍແນ່ | ຫນ້າທີ່ '' ຄ່າເນື້ອຫາເລີ່ມຕົ້ນຖ້າຄຸນສົມບັດ 'data-content' ບໍ່ມີຢູ່
ຊັກຊ້າ ເລກ | ວັດຖຸ 0

ການຊັກຊ້າສະແດງໃຫ້ເຫັນແລະເຊື່ອງ popover (ms) - ບໍ່ນໍາໃຊ້ກັບປະເພດ trigger ຄູ່ມື

ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { show: 500, hide: 100 }

ລະວັງ! ທາງເລືອກສໍາລັບ popovers ສ່ວນບຸກຄົນສາມາດໄດ້ຮັບການລະບຸທາງເລືອກໂດຍຜ່ານການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ.

ມາກອັບ

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

ວິທີການ

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

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

.popover('ສະແດງ')

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

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

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

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

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

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

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

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

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

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

ດາວໂຫຼດ

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

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

ຍານບໍລິສຸດ guacamole! ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.

ໂອ້ຍ! ທ່ານ​ມີ​ຄວາມ​ຜິດ​ພາດ​!

ປ່ຽນແປງອັນນີ້ ແລະອັນນັ້ນ ແລະລອງໃໝ່ອີກ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

ດໍາເນີນການນີ້ ຫຼືເຮັດສິ່ງນີ້


ການໃຊ້ bootstrap-alert.js

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

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

ມາກອັບ

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

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

ວິທີການ

$().alert()

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

.alert('ປິດ')

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

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

ເຫດການ

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

ເຫດການ ລາຍລະອຽດ
ໃກ້ ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ closeວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ປິດ ເຫດການນີ້ຖືກດັບສູນເມື່ອປິດການແຈ້ງເຕືອນແລ້ວ (ຈະລໍຖ້າການປ່ຽນ css ສຳເລັດ).
  1. $ ( '#my-alert' ). bind ( 'ປິດ' , function () {
  2. // ເຮັດຫຍັງ...
  3. })

ກ່ຽວກັບ

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

ດາວໂຫຼດໄຟລ໌

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

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

ມີລັດ
ສະຫຼັບດ່ຽວ
ປ່ອງໝາຍ
ວິທະຍຸ

ການໃຊ້ bootstrap-button.js

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

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

ມາກອັບ

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

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

ວິທີການ

$().button('toggle')

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

ລະວັງ! ທ່ານສາມາດເປີດໃຊ້ການສະຫຼັບປຸ່ມອັດຕະໂນມັດໂດຍການໃຊ້ data-toggleຄຸນສົມບັດ.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

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

  1. <button class = "btn" data-loading-text = "ກຳລັງໂຫຼດຂໍ້ມູນ..." > ... </button>
ລະວັງ! Firefox ຍັງຄົງສະຖານະທີ່ຖືກປິດໃຊ້ງານໃນທົ່ວການໂຫຼດຫນ້າ . ການແກ້ໄຂສໍາລັບການນີ້ແມ່ນການນໍາໃຊ້ autocomplete="off".

$().button('reset')

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

$().button(string)

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

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

ກ່ຽວກັບ

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

ດາວໂຫຼດໄຟລ໌

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

ຕົວຢ່າງ accordion

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

ສັດ pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. ລົດບັນທຸກອາຫານ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ເອົານົກໃສ່ມັນ squid ກາເຟຕົ້ນກໍາເນີດດຽວ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. ໂຄສະນາ vegan excepteur butcher ຮອງ lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກເຂົາ accusamus ແຮງງານ VHS ແບບຍືນຍົງ.
ສັດ pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. ລົດບັນທຸກອາຫານ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ເອົານົກໃສ່ມັນ squid ກາເຟຕົ້ນກໍາເນີດດຽວ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. ໂຄສະນາ vegan excepteur butcher ຮອງ lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກເຂົາ accusamus ແຮງງານ VHS ແບບຍືນຍົງ.
ສັດ pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. ລົດບັນທຸກອາຫານ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ເອົານົກໃສ່ມັນ squid ກາເຟຕົ້ນກໍາເນີດດຽວ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. ໂຄສະນາ vegan excepteur butcher ຮອງ lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກເຂົາ accusamus ແຮງງານ VHS ແບບຍືນຍົງ.

ການໃຊ້ bootstrap-collapse.js

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

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພໍ່ແມ່ ໂຕເລືອກ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກ, ອົງປະກອບທີ່ພັບໄດ້ທັງໝົດພາຍໃຕ້ຫຼັກທີ່ລະບຸໄວ້ຈະຖືກປິດເມື່ອລາຍການທີ່ຫຍໍ້ລົງໄດ້ນີ້ຖືກສະແດງ. (ຄ້າຍ​ຄື​ກັນ​ກັບ​ພຶ���​ຕິ​ກໍາ​ຂອງ accordion ພື້ນ​ເມືອງ​)
ສະຫຼັບ ບູລີນ ຄວາມຈິງ ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ໃນຄຳເຊີນ

ມາກອັບ

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. ຍຸບງ່າຍ
  3. </button>
  4.  
  5. <div id = "ສາທິດ" class = "ຫຍໍ້ເຂົ້າ" > </div>
ລະວັງ! ເພື່ອເພີ່ມການຈັດການກຸ່ມທີ່ຄ້າຍກັບ accordion ເຂົ້າໃນການຄວບຄຸມທີ່ພັບໄດ້, ເພີ່ມຄຸນສົມບັດຂໍ້ມູນ data-parent="#selector". ອ້າງເຖິງການສາທິດເພື່ອເບິ່ງອັນນີ້ໃນການປະຕິບັດ.

ວິທີການ

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

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

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

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

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

.collapse('show')

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

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

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

ເຫດການ

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

ເຫດການ ລາຍລະອຽດ
ສະແດງໃຫ້ເຫັນ ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ສະແດງໃຫ້ເຫັນ ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບການຫຍໍ້ລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ css transitions ສໍາເລັດ).
ເຊື່ອງ ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ hideວິທີການໄດ້ຖືກເອີ້ນ.
ເຊື່ອງໄວ້ ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບຫຍໍ້ທໍ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ).
  1. $ ( '#myCollapsible' ). on ( 'ເຊື່ອງໄວ້' , function () {
  2. // ເຮັດຫຍັງ...
  3. })

ກ່ຽວກັບ

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

ດາວໂຫຼດໄຟລ໌

ຕົວຢ່າງ

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


ການໃຊ້ bootstrap-typeahead.js

ໂທຫາ typeahead ຜ່ານ javascript:

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

ທາງເລືອກ

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ແຫຼ່ງ array [ ] ແຫຼ່ງຂໍ້ມູນເພື່ອສອບຖາມຕ້ານ.
ລາຍການ ເລກ 8 ຈຳນວນສູງສຸດຂອງລາຍການທີ່ຈະສະແດງຢູ່ໃນເມນູເລື່ອນລົງ.
ຜູ້ຈັບຄູ່ ຫນ້າທີ່ case insensitive ວິທີການທີ່ໃຊ້ເພື່ອກໍານົດວ່າຄໍາຖາມທີ່ກົງກັບລາຍການໃດນຶ່ງ. ຍອມຮັບການໂຕ້ຖຽງດຽວ, itemຕໍ່ກັບການທົດສອບການສອບຖາມ. ເຂົ້າເຖິງແບບສອບຖາມປັດຈຸບັນດ້ວຍ this.query. ສົ່ງຄືນ boolean trueຖ້າການສອບຖາມແມ່ນກົງກັນ.
ຕົວຮຽງ ຫນ້າທີ່ ການຈັບຄູ່ທີ່ແນ່ນອນ,
ກໍລະນີທີ່ລະອຽດອ່ອນ,
ກໍລະນີ ທີ່ບໍ່ລະອຽດອ່ອນ
ວິທີການທີ່ໃຊ້ເພື່ອຈັດຮຽງຜົນໄດ້ຮັບອັດຕະໂນມັດ. ຍອມຮັບການໂຕ້ຖຽງດຽວ itemsແລະມີຂອບເຂດຂອງຕົວຢ່າງຂອງຕົວພິມກ່ອນ. ອ້າງອີງການສອບຖາມປັດຈຸບັນດ້ວຍ this.query.
ໄຮໄລ້ ຫນ້າທີ່ ເນັ້ນການຈັບຄູ່ເລີ່ມຕົ້ນທັງໝົດ ວິທີການທີ່ໃຊ້ເພື່ອເນັ້ນໃຫ້ເຫັນຜົນການຕື່ມຂໍ້ມູນອັດຕະໂນມັດ. ຍອມຮັບການໂຕ້ຖຽງດຽວ itemແລະມີຂອບເຂດຂອງຕົວຢ່າງຂອງຕົວພິມກ່ອນ. ຄວນກັບຄືນ html.

ມາກອັບ

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

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

ວິທີການ

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

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