ປັ໊ກອິນ Modal ຂອງພວກເຮົາເປັນ plugin js modal ແບບດັ້ງເດີມທີ່ກະທັດຮັດທີ່ສຸດ, ເອົາໃຈໃສ່ເປັນພິເສດທີ່ຈະລວມເອົາພຽງແຕ່ຫນ້າທີ່ເປົ່າທີ່ພວກເຮົາຕ້ອງການຢູ່ທີ່ນີ້ໃນ twitter.
ດາວໂຫຼດ
- $ ( '#my-modal' ). modal ( ທາງເລືອກ )
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ສາກຫຼັງ | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ລວມມີອົງປະກອບສາກຫຼັງ modal |
ແປ້ນພິມ | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ປິດ modal ເມື່ອກົດປຸ່ມ escape ຖືກກົດ |
ສະແດງໃຫ້ເຫັນ | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ເປີດ modal ໃນການເລີ່ມຕົ້ນຊັ້ນຮຽນ |
ທ່ານສາມາດເປີດໃຊ້ modals ໃນຫນ້າຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍບໍ່ຈໍາເປັນຕ້ອງຂຽນ javascript ເສັ້ນດຽວ. ພຽງແຕ່ໃຫ້ data-controls-modal
ຄຸນລັກສະນະທີ່ກົງກັບ id ອົງປະກອບ modal, ແລະເມື່ອຄລິກ, ມັນຈະເປີດຕົວ modal ຂອງທ່ານ. ເພື່ອເພີ່ມທາງເລືອກ modal, ພຽງແຕ່ລວມພວກມັນເປັນຄຸນລັກສະນະຂໍ້ມູນເຊັ່ນກັນ.
- <a class="btn" data-controls-modal = "my-modal" data-backdrop = "true"> ເປີດ ຕົວ ໂມ ດູນ </a>
ແຈ້ງການ ຖ້າຫາກວ່າທ່ານຕ້ອງການ modal ຂອງທ່ານມີການເຄື່ອນໄຫວໃນແລະອອກ, ພຽງແຕ່ເພີ່ມ .fade
ຫ້ອງຮຽນກັບ .modal
ອົງປະກອບຂອງທ່ານ (ເບິ່ງການສາທິດເພື່ອເບິ່ງນີ້ຢູ່ໃນການປະຕິບັດ).
ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນ modal. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object
.
- $ ( '#my-modal' ). modal ({
- closeOnEscape : ຈິງ
- })
ສະຫຼັບ modal ດ້ວຍຕົນເອງ.
- $ ( '#my-modal' ). modal ( 'ສະຫຼັບ' )
ເປີດ modal ດ້ວຍຕົນເອງ.
- $ ( '#my-modal' ). modal ( 'ສະແດງ' )
ເຊື່ອງ modal ດ້ວຍຕົນເອງ.
- $ ( '#my-modal' ). modal ( 'ເຊື່ອງ' )
ໃຫ້ຜົນເປັນອົງປະກອບ modal class instance.
- $ ( '#my-modal' ). modal ( ຈິງ )
ສັງເກດເຫັນ ທາງເລືອກ, ນີ້ສາມາດໄດ້ຮັບການດຶງຂໍ້ມູນດ້ວຍ $().data('modal')
.
ຫ້ອງຮຽນ modal ຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ modal.
ເຫດການ | ລາຍລະອຽດ |
---|---|
ສະແດງໃຫ້ເຫັນ | ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ show ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
ສະແດງໃຫ້ເຫັນ | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ). |
ເຊື່ອງ | ເຫດການນີ້ຈະຖືກຍິງທັນທີເມື່ອ hide ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
ເຊື່ອງໄວ້ | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ). |
- $ ( '#my-modal' ). bind ( 'ເຊື່ອງ' , function () {
- // ເຮັດຫຍັງ...
- })
ປັ໊ກອິນນີ້ແມ່ນສໍາລັບການເພີ່ມການໂຕ້ຕອບແບບເລື່ອນລົງໃສ່ແຖບ bootstrap topbar ຫຼືແຖບນໍາທາງ.
ດາວໂຫຼດ
- $ ( '#topbar' ). ເລື່ອນລົງ ()
ເພື່ອເພີ່ມຟັງຊັນແບບເລື່ອນລົງໃສ່ອົງປະກອບ nav ໃດກໍ່ຕາມ, ໃຫ້ໃຊ້ data-dropdown
ຄຸນສົມບັດ. ທຸກໆ dropdown bootstrap ທີ່ຖືກຕ້ອງຈະຖືກເປີດໃຊ້ໂດຍອັດຕະໂນມັດ.
- <ul class = "tabs" >
- <li class = "active" > <a href="#"> ເຮືອນ </a> </li >
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href="#" class="dropdown-toggle"> ເລື່ອນ ລົງ </a> _ _ _ _
- <ul class = "dropdown-menu" >
- <li > <a href = "#"> ລິ້ງ ຮອງ </a></li>
- <li > <a href = "#"> ອັນ ອື່ນຢູ່ນີ້ </a></li>
- <li class = "divider" ></li>
- <li > <a href = "#"> ລິ້ງ ອື່ນ </a></li>
- </ul>
- </li>
- </ul>
ແຈ້ງການ ຖ້າ ui ຂອງທ່ານມີຫຼາຍ dropdowns, ພິຈາລະນາເພີ່ມ data-dropdown
ຄຸນລັກສະນະຂອງອົງປະກອບບັນຈຸທີ່ສໍາຄັນເຊັ່ນ .tabs
ຫຼື .topbar
.
api ທີ່ເປັນໂປຼແກຼມສໍາລັບການເປີດໃຊ້ເມນູສໍາລັບແຖບເທິງຫຼືແຖບນໍາທາງທີ່ລະບຸ.
ປັ໊ກອິນນີ້ແມ່ນສໍາລັບການເພີ່ມປະຕິສໍາພັນຂອງ scrollspy (ການປັບປຸງອັດຕະໂນມັດ nav) ກັບແຖບດ້ານເທິງຂອງ bootstrap.
ດາວໂຫຼດ
- $ ( '#topbar' ). ເລື່ອນລົງ ()
ເພື່ອເພີ່ມພຶດຕິກໍາ scrollspy ກັບ nav ຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍ, ພຽງແຕ່ເພີ່ມ data-scrollspy
ຄຸນລັກສະນະຂອງ .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
ອັດຕະໂນມັດເປີດໃຊ້ປຸ່ມນໍາທາງໂດຍຜູ້ໃຊ້ເລື່ອນຕໍາແຫນ່ງ.
- $ ( 'ຮ່າງກາຍ> .topbar' ). scrollSpy ()
ແຈ້ງການ Topbar anchor tags ຕ້ອງມີເປົ້າໝາຍ id ທີ່ສາມາດແກ້ໄຂໄດ້. ຕົວຢ່າງ, <a href="#home">home</a>
ຕ້ອງກົງກັບບາງສິ່ງບາງຢ່າງໃນ dom ເຊັ່ນ <div id="home"></div>
.
scrollspy caches nav ປຸ່ມແລະສ່ວນປະສານງານສໍາລັບການປະຕິບັດ. ຖ້າທ່ານຕ້ອງການປັບປຸງ cache ນີ້ (ອາດຈະເປັນວ່າທ່ານມີເນື້ອຫາແບບເຄື່ອນໄຫວ) ພຽງແຕ່ໂທຫາວິທີການໂຫຼດຫນ້າຈໍຄືນນີ້. ຖ້າທ່ານໃຊ້ຄຸນລັກສະນະຂໍ້ມູນເພື່ອກໍານົດ scrollspy ຂອງທ່ານ, ພຽງແຕ່ໂທຫາ refresh ກ່ຽວກັບຮ່າງກາຍ.
- $ ( 'ຮ່າງກາຍ' ). scrollspy ( 'ໂຫຼດຫນ້າຈໍຄືນ' )
ກວດເບິ່ງການນຳທາງແຖບເທິງສຸດໃນໜ້ານີ້.
ປັ໊ກອິນນີ້ເພີ່ມແທັບໄວ, ແບບເຄື່ອນໄຫວແລະການເຮັດວຽກຂອງຢາ.
ດາວໂຫຼດ
- $ ( '.tabs' ). ແຖບ ()
ທ່ານສາມາດກະຕຸ້ນການນໍາທາງແຖບຫຼືຢາໂດຍບໍ່ມີການຂຽນ javascript ໃດໂດຍພຽງແຕ່ໃຫ້ເຂົາເຈົ້າ data-tabs
ຫຼື data-pills
ຄຸນລັກສະນະ.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
ເປີດໃຊ້ການທໍາງານຂອງແທັບ ແລະຢາສໍາລັບພາຊະນະທີ່ໃຫ້ໄວ້. ລິ້ງແຖບຄວນອ້າງອີງ ids ໃນເອກະສານ.
- <ul class = "tabs" >
- <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 = "pill-content" >
- <div class = "active" id = "ເຮືອນ" > ... </div>
- <div id = "ໂປຣໄຟລ໌" > ... </div>
- <div id = "ຂໍ້ຄວາມ" > ... </div>
- <div id = "ການຕັ້ງຄ່າ" > ... </div>
- </ul>
- <script>
- $ ( ຟັງຊັນ () {
- $ ( '.tabs' ). ແຖບ ()
- })
- </script>
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.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
ອີງໃສ່ plugin jQuery.tipsy ທີ່ດີເລີດທີ່ຂຽນໂດຍ Jason Frame; twipsy ແມ່ນສະບັບປັບປຸງ, ເຊິ່ງບໍ່ໄດ້ອີງໃສ່ຮູບພາບ, ໃຊ້ css3 ສໍາລັບພາບເຄື່ອນໄຫວ, ແລະຄຸນລັກສະນະຂໍ້ມູນສໍາລັບການເກັບຮັກສາຫົວຂໍ້!
ດາວໂຫຼດ
- $ ( '#ຕົວຢ່າງ' ). twipsy ( ທາງເລືອກ )
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ສັດ | ບູລີນ | ຄວາມຈິງ | ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ |
ຊັກຊ້າໃນ | ເລກ | 0 | ການຊັກຊ້າກ່ອນທີ່ຈະສະແດງຄໍາແນະນໍາເຄື່ອງມື (ms) |
ຊັກຊ້າ | ເລກ | 0 | ການຊັກຊ້າກ່ອນທີ່ຈະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) |
ຜົນຕອບແທນ | ສາຍ | '' | ຂໍ້ຄວາມທີ່ຈະໃຊ້ໃນເວລາທີ່ບໍ່ມີຊື່ຄໍາແນະນໍາເຄື່ອງມື |
ການຈັດວາງ | ສາຍ | 'ຂ້າງເທິງ' | ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ຂ້າງເທິງ | ຂ້າງລຸ່ມນີ້ | ຊ້າຍ | ຖືກຕ້ອງ |
html | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ອະນຸຍາດໃຫ້ເນື້ອຫາ html ພາຍໃນຄໍາແນະນໍາເຄື່ອງມື |
ດໍາລົງຊີວິດ | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ໃຊ້ການມອບໝາຍເຫດການແທນຕົວຈັດການເຫດການສ່ວນບຸກຄົນ |
ຊົດເຊີຍ | ເລກ | 0 | pixel offset ຂອງຄໍາແນະນໍາເຄື່ອງມືຈາກອົງປະກອບເປົ້າຫມາຍ |
ຫົວຂໍ້ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 'ຫົວຂໍ້' | ຄຸນລັກສະນະຫຼືວິທີການດຶງຂໍ້ຄວາມຫົວຂໍ້ |
ກະຕຸ້ນ | ສາຍ | 'ເລື່ອນ' | ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື |
ແນບຕົວຈັບ twipsy ກັບການເກັບກໍາອົງປະກອບ.
ເປີດເຜີຍອົງປະກອບ twipsy.
- $ ( '#element' ). twipsy ( 'ສະແດງ' )
ເຊື່ອງອົງປະກອບ twipsy.
- $ ( '#element' ). twipsy ( 'ເຊື່ອງ' )
ໃຫ້ຜົນເປັນຕົວຢ່າງຂອງຄລາສ twipsy.
- $ ( '#element' ). twipsy ( ຈິງ )
ສັງເກດເຫັນ ທາງເລືອກ, ນີ້ສາມາດໄດ້ຮັບການດຶງຂໍ້ມູນດ້ວຍ $().data('twipsy')
.
ກາງເກງແຫນ້ນລະດັບຕໍ່ໄປ 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. ໄຕ່ ໝີ່ ອ໊ະ, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. ຊ່າງຫັດ ຖະ ກໍາທີ່ ມີທາດເຫຼັກແທ້ໆບໍ່ວ່າ ກະແຈອັນໃດກໍໄດ້, scenester farm-to-table banksy Austin twitter handle freegan cred denim raw denim viral coffee original.
plugin popover ສະຫນອງການໂຕ້ຕອບງ່າຍດາຍສໍາລັບການເພີ່ມ popovers ກັບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ. ມັນຂະຫຍາຍ plugin boostrap-twipsy.js , ສະນັ້ນໃຫ້ແນ່ໃຈວ່າຈະ grab ໄຟລ໌ນັ້ນເຊັ່ນດຽວກັນໃນເວລາທີ່ລວມທັງ popovers ໃນໂຄງການຂອງທ່ານ!
ດາວໂຫຼດ
- $ ( '#ຕົວຢ່າງ' ). popover ( ທາງເລືອກ )
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ສັດ | ບູລີນ | ຄວາມຈິງ | ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ |
ຊັກຊ້າໃນ | ເລກ | 0 | ການຊັກຊ້າກ່ອນທີ່ຈະສະແດງຄໍາແນະນໍາເຄື່ອງມື (ms) |
ຊັກຊ້າ | ເລກ | 0 | ການຊັກຊ້າກ່ອນທີ່ຈະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) |
ຜົນຕອບແທນ | ສາຍ | '' | ຂໍ້ຄວາມທີ່ຈະໃຊ້ໃນເວລາທີ່ບໍ່ມີຊື່ຄໍາແນະນໍາເຄື່ອງມື |
ການຈັດວາງ | ສາຍ | 'ຖືກຕ້ອງ' | ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ຂ້າງເທິງ | ຂ້າງລຸ່ມນີ້ | ຊ້າຍ | ຖືກຕ້ອງ |
html | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ອະນຸຍາດໃຫ້ເນື້ອຫາ html ພາຍໃນຄໍາແນະນໍາເຄື່ອງມື |
ດໍາລົງຊີວິດ | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ໃຊ້ການມອບໝາຍເຫດການແທນຕົວຈັດການເຫດການສ່ວນບຸກຄົນ |
ຊົດເຊີຍ | ເລກ | 0 | pixel offset ຂອງຄໍາແນະນໍາເຄື່ອງມືຈາກອົງປະກອບເປົ້າຫມາຍ |
ຫົວຂໍ້ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 'ຫົວຂໍ້' | ຄຸນລັກສະນະຫຼືວິທີການດຶງຂໍ້ຄວາມຫົວຂໍ້ |
ເນື້ອໃນ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 'ເນື້ອໃນຂໍ້ມູນ' | ຄຸນລັກສະນະຫຼືວິທີການດຶງຂໍ້ຄວາມເນື້ອຫາ |
ກະຕຸ້ນ | ສາຍ | 'ເລື່ອນ' | ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື |
ເລີ່ມຕົ້ນ popovers ສໍາລັບການເກັບກໍາອົງປະກອບ.
ເປີດເຜີຍອົງປະກອບ popover.
- $ ( '#element' ). popover ( 'ສະແດງ' )
ເຊື່ອງອົງປະກອບ popover.
- $ ( '#element' ). popover ( 'ເຊື່ອງ' )
ປັ໊ກອິນແຈ້ງເຕືອນແມ່ນຫ້ອງຮຽນນ້ອຍໆພິເສດສໍາລັບການເພີ່ມການເຮັດວຽກທີ່ໃກ້ຊິດກັບການແຈ້ງເຕືອນ.
ດາວໂຫຼດ
- $ ( ".alert-message" ). ເຕືອນ ()
ພຽງແຕ່ເພີ່ມ data-alert
ຄຸນລັກສະນະໃຫ້ຂໍ້ຄວາມເຕືອນຂອງທ່ານອັດຕະໂນມັດໃຫ້ເຂົາເຈົ້າເຮັດວຽກໃກ້ຊິດ.
ຫໍ່ການແຈ້ງເຕືອນທັງຫມົດທີ່ມີການທໍາງານທີ່ໃກ້ຊິດ. ເພື່ອໃຫ້ການແຈ້ງເຕືອນຂອງທ່ານມີການເຄື່ອນໄຫວອອກມາເມື່ອປິດ, ໃຫ້ແນ່ໃຈວ່າພວກມັນໄດ້ໃຊ້ .fade
ແລະ .in
ຫ້ອງຮຽນແລ້ວ.
ປິດການແຈ້ງເຕືອນ.
- $ ( ".alert-message" ). ເຕືອນ ( 'ປິດ' )