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ຄຸນລັກສະນະ.

<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)

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-animation="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ 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 .

ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບ 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…
})