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 ເຮັດວຽກແນວໃດກັບບາງຕົວຢ່າງ.

ຕົວຢ່າງ: ເປີດໃຊ້ 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 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="".

ວິທີການ

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

ເຫດການ

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})