Popovers
ເອກະສານແລະຕົວຢ່າງສໍາລັບການເພີ່ມ Bootstrap popovers, ຄືກັບທີ່ພົບເຫັນຢູ່ໃນ iOS, ເຂົ້າໄປໃນອົງປະກອບໃດໆໃນເວັບໄຊຂອງທ່ານ.
ພາບລວມ
ສິ່ງທີ່ຄວນຮູ້ເມື່ອໃຊ້ປລັກອິນ popover:
- Popovers ອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້
bootstrap.bundle.min.js
/bootstrap.bundle.js
ທີ່ມີ Popper ເພື່ອໃຫ້ popovers ເຮັດວຽກ! - Popovers ຕ້ອງການ plugintip ເຄື່ອງມືເປັນການເພິ່ງພາອາໄສ.
- ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການ
util.js
. - Popovers ແມ່ນເລືອກເຂົ້າຮ່ວມສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .
- ຄວາມຍາວສູນ
title
ແລະcontent
ຄ່າຈະບໍ່ສະແດງເປັນ popover. - ລະບຸ
container: 'body'
ເພື່ອຫຼີກເວັ້ນການສະແດງບັນຫາໃນອົງປະກອບທີ່ສັບສົນຫຼາຍ (ເຊັ່ນ: ກຸ່ມການປ້ອນຂໍ້ມູນຂອງພວກເຮົາ, ກຸ່ມປຸ່ມ, ແລະອື່ນໆ). - ການກະຕຸ້ນ popovers ໃນອົງປະກອບທີ່ເຊື່ອງໄວ້ຈະບໍ່ເຮັດວຽກ.
- Popovers
.disabled
ຫຼືdisabled
ອົງປະກອບຕ້ອງໄດ້ຮັບການກະຕຸ້ນຢູ່ໃນອົງປະກອບ wrapper. - ເມື່ອຖືກກະຕຸ້ນຈາກສະມໍທີ່ຫໍ່ຜ່ານຫຼາຍເສັ້ນ, popovers ຈະຖືກຈຸດສູນກາງລະຫວ່າງຄວາມກວ້າງລວມຂອງສະມໍ. ໃຊ້
.text-nowrap
ໃນ<a>
s ຂອງທ່ານເພື່ອຫຼີກເວັ້ນການພຶດຕິກໍານີ້. - Popovers ຕ້ອງຖືກເຊື່ອງໄວ້ກ່ອນທີ່ອົງປະກອບທີ່ສອດຄ້ອງກັນຂອງພວກມັນຖືກໂຍກຍ້າຍອອກຈາກ DOM.
- Popovers ສາມາດກະຕຸ້ນໄດ້ຍ້ອນອົງປະກອບພາຍໃນເງົາ DOM.
prefers-reduced-motion
ສອບຖາມສື່. ເບິ່ງ
ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .
ສືບຕໍ່ອ່ານເພື່ອເບິ່ງວ່າ popovers ເຮັດວຽກແນວໃດກັບບາງຕົວຢ່າງ.
ຕົວຢ່າງ: ເປີດໃຊ້ popovers ຢູ່ທົ່ວທຸກແຫ່ງ
ວິທີຫນຶ່ງເພື່ອເລີ່ມຕົ້ນ popovers ທັງຫມົດໃນຫນ້າຫນຶ່ງແມ່ນຈະເລືອກເອົາພວກເຂົາໂດຍ data-toggle
ຄຸນລັກສະນະຂອງພວກເຂົາ:
$(function () {
$('[data-toggle="popover"]').popover()
})
ຕົວຢ່າງ: ການນໍາໃຊ້ container
ທາງເລືອກ
ເມື່ອທ່ານມີຄໍເຕົ້າໄຂ່ທີ່ບາງອັນຢູ່ໃນອົງປະກອບຫຼັກທີ່ແຊກແຊງກັບ popover, ທ່ານຈະຕ້ອງການກໍານົດ custom container
ເພື່ອໃຫ້ HTML ຂອງ popover ປາກົດຢູ່ໃນອົງປະກອບນັ້ນແທນ.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
ຕົວຢ່າງ
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
ສີ່ທິດ
ມີສີ່ທາງເລືອກ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຈັດຮຽງຊ້າຍ.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
ປິດການຄລິກຕໍ່ໄປ
ໃຊ້ຕົວ focus
ກະຕຸ້ນເພື່ອປິດ popovers ໃນການຄລິກຕໍ່ໄປຂອງຜູ້ໃຊ້ຂອງອົງປະກອບທີ່ແຕກຕ່າງຈາກອົງປະກອບສະຫຼັບ.
ຕ້ອງການເຄື່ອງໝາຍສະເພາະສຳລັບການປິດການຄລິກຕໍ່ໄປ
ສໍາລັບພຶດຕິກໍາຂ້າມຕົວທ່ອງເວັບແລະຂ້າມເວທີທີ່ເຫມາະສົມ, ທ່ານຕ້ອງໃຊ້ <a>
ແທັກ, ບໍ່ແມ່ນ ແທັກ <button>
, ແລະທ່ານຍັງຕ້ອງປະກອບມີ tabindex
ຄຸນລັກສະນະ.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
ອົງປະກອບທີ່ພິການ
ອົງປະກອບທີ່ມີ disabled
ຄຸນລັກສະນະບໍ່ແມ່ນການໂຕ້ຕອບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ບໍ່ສາມາດເລື່ອນຫຼືຄລິກພວກມັນເພື່ອກະຕຸ້ນການ popover (ຫຼືຄໍາແນະນໍາເຄື່ອງມື). ໃນຖານະເປັນການແກ້ໄຂ, ທ່ານຕ້ອງການກະຕຸ້ນ popover ຈາກ wrapper <div>
ຫຼື <span>
ແລະ override pointer-events
ໃນອົງປະກອບທີ່ພິການ.
ສໍາລັບຕົວກະຕຸ້ນ popover ທີ່ຖືກປິດການໃຊ້ງານ, ທ່ານອາດຈະຕ້ອງການ data-trigger="hover"
ເພື່ອໃຫ້ popover ປາກົດເປັນຄໍາຕິຊົມທີ່ເບິ່ງເຫັນທັນທີຕໍ່ກັບຜູ້ໃຊ້ຂອງທ່ານຍ້ອນວ່າພວກເຂົາອາດຈະບໍ່ຄາດວ່າຈະ ຄລິກໃສ່ ອົງປະກອບທີ່ພິການ.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
ການນໍາໃຊ້
ເປີດໃຊ້ popovers ຜ່ານ JavaScript:
$('#example').popover(options)
ການເລັ່ງ GPU
ບາງຄັ້ງ Popovers ປະກົດວ່າມົວໃນອຸປະກອນ Windows 10 ເນື່ອງຈາກການເລັ່ງ GPU ແລະ DPI ຂອງລະບົບທີ່ຖືກແກ້ໄຂ. ການແກ້ໄຂສໍາລັບການນີ້ໃນ v4 ແມ່ນເພື່ອປິດການເລັ່ງ GPU ຕາມຄວາມຕ້ອງການໃນ popovers ຂອງທ່ານ.
ການແກ້ໄຂທີ່ແນະນໍາ:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
ການເຮັດໃຫ້ popovers ເຮັດວຽກສໍາລັບ keyboard ແລະຜູ້ໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ
ເພື່ອໃຫ້ຜູ້ໃຊ້ແປ້ນພິມສາມາດເປີດໃຊ້ popovers ຂອງທ່ານ, ທ່ານຄວນເພີ່ມພວກມັນໃສ່ອົງປະກອບ HTML ທີ່ເປັນແບບດັ້ງເດີມທີ່ເນັ້ນໃສ່ແປ້ນພິມແລະໂຕ້ຕອບ (ເຊັ່ນ: ການເຊື່ອມຕໍ່ຫຼືການຄວບຄຸມແບບຟອມ). ເຖິງແມ່ນວ່າອົງປະກອບ HTML ທີ່ບໍ່ມັກ (ເຊັ່ນ <span>
s) ສາມາດສຸມໃສ່ໄດ້ໂດຍການເພີ່ມ tabindex="0"
ຄຸນລັກສະນະ, ນີ້ຈະເພີ່ມການຢຸດແຖບທີ່ຫນ້າລໍາຄານແລະສັບສົນໃນອົງປະກອບທີ່ບໍ່ມີການໂຕ້ຕອບສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ, ແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອສ່ວນໃຫຍ່ໃນປະຈຸບັນບໍ່ໄດ້ປະກາດເນື້ອຫາຂອງ popover ໃນສະຖານະການນີ້. . ນອກຈາກນັ້ນ, ຢ່າອີງໃສ່ພຽງແຕ່ hover
ເປັນຕົວກະຕຸ້ນສໍາລັບ popovers ຂອງທ່ານ, ເນື່ອງຈາກວ່ານີ້ຈະເຮັດໃຫ້ພວກເຂົາເປັນໄປບໍ່ໄດ້ທີ່ຈະກະຕຸ້ນສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ.
ໃນຂະນະທີ່ທ່ານສາມາດໃສ່ HTML ທີ່ມີໂຄງສ້າງທີ່ອຸດົມສົມບູນໃນ popovers ດ້ວຍ html
ທາງເລືອກ, ພວກເຮົາແນະນໍາໃຫ້ທ່ານຫຼີກເວັ້ນການເພີ່ມເນື້ອຫາຫຼາຍເກີນໄປ. ວິທີທີ່ popovers ປະຈຸບັນເຮັດວຽກແມ່ນວ່າ, ເມື່ອສະແດງ, ເນື້ອຫາຂອງພວກເຂົາຖືກຜູກມັດກັບອົງປະກອບຂອງຜົນກະທົບຕໍ່ກັບ aria-describedby
ຄຸນລັກສະນະ. ດັ່ງນັ້ນ, ເນື້ອຫາທັງໝົດຂອງ popover ຈະຖືກປະກາດໃຫ້ຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອເປັນກະແສທີ່ຍາວນານ, ບໍ່ຕິດຂັດ.
ນອກຈາກນັ້ນ, ໃນຂະນະທີ່ມັນເປັນໄປໄດ້ທີ່ຈະລວມເອົາການຄວບຄຸມແບບໂຕ້ຕອບ (ເຊັ່ນ: ອົງປະກອບແບບຟອມຫຼືການເຊື່ອມຕໍ່) ໃນ popover ຂອງທ່ານ (ໂດຍການເພີ່ມອົງປະກອບເຫຼົ່ານີ້ໃສ່ whiteList
ຫຼືຄຸນລັກສະນະແລະແທັກທີ່ໄດ້ຮັບອະນຸຍາດ), ຈົ່ງຮູ້ວ່າໃນປັດຈຸບັນ popover ບໍ່ໄດ້ຈັດການຄໍາສັ່ງສຸມໃສ່ແປ້ນພິມ. ເມື່ອຜູ້ໃຊ້ແປ້ນພິມເປີດ popover, ຈຸດສຸມຍັງຄົງຢູ່ໃນອົງປະກອບທີ່ກະຕຸ້ນ, ແລະຍ້ອນວ່າ popover ມັກຈະບໍ່ປະຕິບັດຕາມຕົວກະຕຸ້ນໃນໂຄງສ້າງຂອງເອກະສານ, ບໍ່ມີການຮັບປະກັນວ່າການກ້າວໄປຂ້າງຫນ້າ / ກົດ.TABຈະຍ້າຍຜູ້ໃຊ້ແປ້ນພິມເຂົ້າໄປໃນ popover ຕົວຂອງມັນເອງ. ໃນສັ້ນ, ພຽງແຕ່ການເພີ່ມການຄວບຄຸມແບບໂຕ້ຕອບກັບ popover ມີແນວໂນ້ມທີ່ຈະເຮັດໃຫ້ການຄວບຄຸມເຫຼົ່ານີ້ບໍ່ສາມາດເຂົ້າຫາໄດ້ / ບໍ່ສາມາດໃຊ້ໄດ້ສໍາລັບຜູ້ໃຊ້ແປ້ນພິມແລະຜູ້ໃຊ້ເຕັກໂນໂລຢີຊ່ວຍເຫຼືອ, ຫຼືຢ່າງຫນ້ອຍເຮັດໃຫ້ຄໍາສັ່ງຈຸດສຸມໂດຍລວມທີ່ບໍ່ມີເຫດຜົນ. ໃນກໍລະນີເຫຼົ່ານີ້, ພິຈາລະນາໃຊ້ modal dialog ແທນ.
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-
, ໃນ data-animation=""
.
sanitize
,
sanitizeFn
ແລະ
whiteList
ທາງເລືອກບໍ່ສາມາດສະໜອງໃຫ້ໂດຍໃຊ້ຄຸນສົມບັດຂໍ້ມູນ.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ພາບເຄື່ອນໄຫວ | ບູລີນ | ຄວາມຈິງ | ນຳໃຊ້ CSS ການຫັນປ່ຽນໄປເປັນ popover |
ບັນຈຸ | ຊ່ອຍແນ່ | ອົງປະກອບ | ບໍ່ຖືກຕ້ອງ | ບໍ່ຖືກຕ້ອງ | ຕື່ມຂໍ້ມູນໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: |
ເນື້ອໃນ | ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ | '' | ຄ່າເນື້ອຫາເລີ່ມຕົ້ນຖ້າ ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ |
ຊັກຊ້າ | ເລກ | ວັດຖຸ | 0 | ເລື່ອນການສະແດງ ແລະເຊື່ອງ popover (ms) - ບໍ່ນໍາໃຊ້ກັບປະເພດ trigger ຄູ່ມື ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ ໂຄງສ້າງວັດຖຸແມ່ນ: |
html | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ໃສ່ HTML ເຂົ້າໄປໃນ popover. ຖ້າເປັນຜິດ, ວິທີການຂອງ jQuery text ຈະຖືກນໍາໃຊ້ເພື່ອໃສ່ເນື້ອຫາເຂົ້າໄປໃນ DOM. ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS. |
ການຈັດວາງ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 'ຖືກຕ້ອງ' | ວິທີການຈັດຕໍາແຫນ່ງ popover - ອັດຕະໂນມັດ | ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ. ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນວ່າ popover DOM node ເປັນ argument ທໍາອິດຂອງມັນແລະອົງປະກອບ triggering DOM node ເປັນທີສອງຂອງມັນ. ສະ |
ໂຕເລືອກ | ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ | ບໍ່ຖືກຕ້ອງ | ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ວັດຖຸ popover ຈະຖືກມອບໝາຍໃຫ້ກັບເປົ້າໝາຍທີ່ລະບຸໄວ້. ໃນທາງປະຕິບັດ, ນີ້ຖືກນໍາໃຊ້ເພື່ອເປີດໃຊ້ເນື້ອຫາ HTML ແບບເຄື່ອນໄຫວເພື່ອໃຫ້ມີ popovers ເພີ່ມ. ເບິ່ງ ນີ້ ແລະ ຕົວຢ່າງຂໍ້ມູນ . |
ແມ່ແບບ | ສາຍ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ພື້ນຖານ HTML ເພື່ອໃຊ້ໃນເວລາສ້າງ popover. popover's popover's
ອົງປະກອບ wrapper ຊັ້ນນອກຄວນຈະມີ |
ຫົວຂໍ້ | ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ | '' | ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ |
ກະຕຸ້ນ | ສາຍ | 'ຄລິກ' | ວິທີການ popover ຖືກກະຕຸ້ນ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ. manual ບໍ່ສາມາດຖືກລວມເຂົ້າກັບຜົນກະທົບອື່ນໆ. |
ຊົດເຊີຍ | ເລກ | ສາຍ | 0 | ຊົດເຊີຍຂອງ popover ທຽບກັບເປົ້າຫມາຍຂອງມັນ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper . |
ການຈັດວາງຄືນ | ຊ່ອຍແນ່ | array | 'ພິກ' | ອະນຸຍາດໃຫ້ລະບຸວ່າຕໍາແຫນ່ງ Popper ຈະນໍາໃຊ້ໃນການປ່ຽນແປງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານພຶດຕິກໍາ ຂອງ Popper |
customClass | ຊ່ອຍແນ່ | ຫນ້າທີ່ | '' | ເພີ່ມຫ້ອງຮຽນໃສ່ popover ເມື່ອມັນຖືກສະແດງ. ຈົ່ງຈື່ໄວ້ວ່າຊັ້ນຮຽນເຫຼົ່ານີ້ຈະຖືກເພີ່ມໃສ່ນອກເໜືອໄປຈາກຊັ້ນຮຽນໃດນຶ່ງທີ່ລະບຸໄວ້ໃນແມ່ແບບ. ເພື່ອເພີ່ມຫຼາຍຊັ້ນຮຽນ, ແຍກພວກມັນດ້ວຍຍະຫວ່າງ: ທ່ານຍັງສາມາດຜ່ານຟັງຊັນທີ່ຄວນສົ່ງຄືນສະຕຣິງດຽວທີ່ມີຊື່ຊັ້ນຮຽນເພີ່ມເຕີມ. |
ເຂດແດນ | ຊ່ອຍແນ່ | ອົງປະກອບ | 'scrollParent' | Overflow ຂອບເຂດຈໍາກັດຂອງ popover ໄດ້. ຍອມຮັບຄ່າຂອງ 'viewport' , 'window' , 'scrollParent' , ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ Docs PreventOverflow ຂອງ Popper . |
ອະນາໄມ | ບູລີນ | ຄວາມຈິງ | ເປີດຫຼືປິດການອະນາໄມ. ຖ້າເປີດໃຊ້ 'template' , 'content' ແລະ 'title' ຕົວເລືອກຕ່າງໆຈະຖືກອະນາໄມ. ເບິ່ງ ພາກສ່ວນເຄື່ອງອະນາໄມໃນເອກະສານ JavaScript ຂອງພວກເຮົາ . |
ບັນຊີຂາວ | ວັດຖຸ | ຄ່າເລີ່ມຕົ້ນ | ວັດຖຸທີ່ມີຄຸນລັກສະນະ ແລະແທັກທີ່ອະນຸຍາດ |
ອະນາໄມFn | null | ຫນ້າທີ່ | null | ໃນທີ່ນີ້ທ່ານສາມາດສະຫນອງຫນ້າທີ່ສຸຂາພິບານຂອງທ່ານເອງ. ນີ້ສາມາດເປັນປະໂຫຍດຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະເພື່ອເຮັດການອະນາໄມ. |
popperConfig | null | ວັດຖຸ | null | ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper |
ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບ popovers ສ່ວນບຸກຄົນ
ທາງເລືອກສໍາລັບ popovers ສ່ວນບຸກຄົນສາມາດຖືກລະບຸເປັນທາງເລືອກໂດຍຜ່ານການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ, ດັ່ງທີ່ອະທິບາຍຂ້າງເທິງ.
ວິທີການ
ວິທີການ asynchronous ແລະການຫັນປ່ຽນ
ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
$().popover(options)
ເລີ່ມຕົ້ນ popovers ສໍາລັບການເກັບກໍາອົງປະກອບ.
.popover('show')
ເປີດເຜີຍການປະກົດຕົວຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.popover
ເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover. Popovers ທີ່ມີຊື່ ແລະເນື້ອຫາມີຄວາມຍາວສູນແມ່ນບໍ່ເຄີຍສະແດງ.
$('#element').popover('show')
.popover('hide')
ເຊື່ອງ popover ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.popover
ເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.
$('#element').popover('hide')
.popover('toggle')
ສະຫຼັບການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.popover
ຫຼື hidden.bs.popover
ເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.
$('#element').popover('toggle')
.popover('dispose')
ເຊື່ອງ ແລະທຳລາຍການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ. Popovers ທີ່ໃຊ້ delegation (ເຊິ່ງຖືກສ້າງຂື້ນໂດຍໃຊ້ ຕົວ selector
ເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ທີ່ສືບທອດ.
$('#element').popover('dispose')
.popover('enable')
ໃຫ້ຄວາມສາມາດສະແດງໃຫ້ເຫັນເຖິງ popover ຂອງອົງປະກອບ. Popovers ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ.
$('#element').popover('enable')
.popover('disable')
ເອົາຄວາມສາມາດຂອງ popover ຂອງອົງປະກອບທີ່ຈະສະແດງໃຫ້ເຫັນ. Popover ຈະສາມາດສະແດງໄດ້ພຽງແຕ່ຖ້າມັນຖືກເປີດໃຊ້ໃຫມ່.
$('#element').popover('disable')
.popover('toggleEnabled')
ສະຫຼັບຄວາມສາມາດຂອງ popover ຂອງອົງປະກອບທີ່ຈະສະແດງ ຫຼືເຊື່ອງໄວ້.
$('#element').popover('toggleEnabled')
.popover('update')
ອັບເດດຕຳແໜ່ງຂອງ popover ຂອງອົງປະກອບໃດໜຶ່ງ.
$('#element').popover('update')
ເຫດການ
ປະເພດເຫດການ | ລາຍລະອຽດ |
---|---|
show.bs.popover | ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ show ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
show.bs.popover | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ popover ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ). |
hide.bs.popover | ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hide ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
hidden.bs.popover | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ popover ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ). |
inserted.bs.popover | ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກ show.bs.popover ເຫດການເມື່ອແມ່ແບບ popover ໄດ້ຖືກເພີ່ມໃສ່ DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})