Source

Popovers

ເອກະສານແລະຕົວຢ່າງສໍາລັບການເພີ່ມ Bootstrap popovers, ຄືກັບທີ່ພົບເຫັນຢູ່ໃນ iOS, ເຂົ້າໄປໃນອົງປະກອບໃດໆໃນເວັບໄຊຂອງທ່ານ.

ພາບລວມ

ສິ່ງທີ່ຄວນຮູ້ເມື່ອໃຊ້ປລັກອິນ popover:

  • Popovers ອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper.js ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper.js ເພື່ອໃຫ້ 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

ປິດການຄລິກຕໍ່ໄປ

ໃຊ້ຕົວ focusກະຕຸ້ນເພື່ອປິດ popovers ໃນການຄລິກຕໍ່ໄປຂອງຜູ້ໃຊ້ຂອງອົງປະກອບທີ່ແຕກຕ່າງຈາກອົງປະກອບສະຫຼັບ.

ຕ້ອງການເຄື່ອງໝາຍສະເພາະສຳລັບການປິດການຄລິກຕໍ່ໄປ

ສໍາລັບພຶດຕິກໍາຂ້າມຕົວທ່ອງເວັບແລະຂ້າມເວທີທີ່ເຫມາະສົມ, ທ່ານຕ້ອງໃຊ້ <a>ແທັກ, ບໍ່ແມ່ນ ແທັກ <button>, ແລະທ່ານຍັງຕ້ອງປະກອບມີ tabindexຄຸນລັກສະນະ.

ປິດການນຳໃຊ້ popover 
<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)

ການເຮັດໃຫ້ 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
ບັນຈຸ ຊ່ອຍແນ່ | ອົງປະກອບ | ບໍ່ຖືກຕ້ອງ ບໍ່ຖືກຕ້ອງ

ຕື່ມຂໍ້ມູນໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: container: 'body'. ທາງເລືອກນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະໃນທີ່ມັນອະນຸຍາດໃຫ້ທ່ານຈັດວາງ popover ໃນການໄຫຼເຂົ້າຂອງເອກະສານຢູ່ໃກ້ກັບອົງປະກອບ triggering - ເຊິ່ງຈະປ້ອງກັນບໍ່ໃຫ້ popover ຈາກການເລື່ອນອອກຈາກອົງປະກອບ triggering ໃນລະຫວ່າງການປັບຂະຫນາດປ່ອງຢ້ຽມ.
ເນື້ອໃນ ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ ''

ຄ່າເນື້ອຫາເລີ່ມຕົ້ນຖ້າ data-contentຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ thisອ້າງອີງໃສ່ອົງປະກອບທີ່ popover ຕິດກັບ.
ຊັກຊ້າ ເລກ | ວັດຖຸ 0

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

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

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { "show": 500, "hide": 100 }
html ບູລີນ ບໍ່ຖືກຕ້ອງ ໃສ່ HTML ເຂົ້າໄປໃນ popover. ຖ້າເປັນຜິດ, ວິທີການຂອງ jQuery textຈະຖືກນໍາໃຊ້ເພື່ອໃສ່ເນື້ອຫາເຂົ້າໄປໃນ DOM. ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS.
ການຈັດວາງ ຊ່ອຍແນ່ | ຫນ້າທີ່ 'ຖືກຕ້ອງ'

ວິທີການຈັດຕໍາແຫນ່ງ popover - ອັດຕະໂນມັດ | ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ.
ເມື່ອ autoຖືກລະບຸໄວ້, ມັນຈະປັບປ່ຽນ popover ຄືນໃໝ່ແບບໄດນາມິກ.

ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນວ່າ popover DOM node ເປັນ argument ທໍາອິດຂອງມັນແລະອົງປະກອບ triggering DOM node ເປັນທີສອງຂອງມັນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງ popover.
ໂຕເລືອກ ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ວັດຖຸ 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 titleຈະຖືກສີດເຂົ້າໄປໃນ .popover-header.

popover's contentຈະຖືກສີດເຂົ້າໄປໃນ .popover-body.

.arrowຈະກາຍເປັນລູກສອນຂອງ popover.

ອົງປະກອບ wrapper ຊັ້ນນອກຄວນຈະມີ .popoverຊັ້ນ.
ຫົວຂໍ້ ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ ''

ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ titleຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ thisອ້າງອີງໃສ່ອົງປະກອບທີ່ popover ຕິດກັບ.
ກະຕຸ້ນ ສາຍ 'ຄລິກ' ວິທີການ popover ຖືກກະຕຸ້ນ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ. manualບໍ່​ສາ​ມາດ​ຖືກ​ລວມ​ເຂົ້າ​ກັບ​ຜົນ​ກະ​ທົບ​ອື່ນໆ​.
ຊົດເຊີຍ ເລກ | ສາຍ 0 ຊົດເຊີຍຂອງ popover ທຽບກັບເປົ້າຫມາຍຂອງມັນ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper.js .
ການຈັດ​ວາງ​ຄືນ ຊ່ອຍແນ່ | array 'ພິກ' ອະ​ນຸ​ຍາດ​ໃຫ້​ລະ​ບຸ​ວ່າ​ຕໍາ​ແຫນ່ງ Popper ຈະ​ນໍາ​ໃຊ້​ໃນ​ການ​ປ່ຽນ​ແປງ​. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານພຶດຕິກໍາ ຂອງ Popper.js
ເຂດແດນ ຊ່ອຍແນ່ | ອົງປະກອບ 'scrollParent' Overflow ຂອບເຂດຈໍາກັດຂອງ popover ໄດ້. ຍອມຮັບຄ່າຂອງ 'viewport', 'window', 'scrollParent', ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Docs PreventOverflow ຂອງ Popper.js .
ອະນາໄມ ບູລີນ ຄວາມຈິງ ເປີດຫຼືປິດການອະນາໄມ. ຖ້າເປີດໃຊ້ 'template', 'content'ແລະ 'title'ຕົວເລືອກຕ່າງໆຈະຖືກອະນາໄມ.
ບັນຊີຂາວ ວັດຖຸ ຄ່າເລີ່ມຕົ້ນ ວັດຖຸທີ່ມີຄຸນລັກສະນະ ແລະແທັກທີ່ອະນຸຍາດ
ອະນາໄມFn null | ຫນ້າທີ່ null ໃນທີ່ນີ້ທ່ານສາມາດສະຫນອງຫນ້າທີ່ສຸຂາພິບານຂອງທ່ານເອງ. ນີ້ສາມາດເປັນປະໂຫຍດຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະເພື່ອເຮັດການອະນາໄມ.
popperConfig null | ວັດຖຸ null ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper.js ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper.js

ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບ popovers ສ່ວນບຸກຄົນ

ທາງເລືອກສໍາລັບ popovers ສ່ວນບຸກຄົນສາມາດຖືກລະບຸເປັນທາງເລືອກໂດຍຜ່ານການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ, ດັ່ງທີ່ອະທິບາຍຂ້າງເທິງ.

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

$().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...
})