Source

Поповерууд

Танай сайтын аль ч элементэд iOS-д байдаг шиг Bootstrap поповер нэмэх баримт бичиг, жишээнүүд.

Тойм

Popover залгаасыг ашиглахдаа анхаарах зүйлс:

  • Поповерууд байрлал тогтоохдоо гуравдагч талын Popper.js номын санд тулгуурладаг . Та bootstrap.js-н өмнө popper.min.js -г оруулах эсвэл поповер ажиллахын тулд Popper.js-г агуулсан bootstrap.bundle.min.js/ ашиглах ёстой!bootstrap.bundle.js
  • Поповерууд нь хараат байдлаар tooltip залгаасыг шаарддаг.
  • Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа болutil.js .
  • Поповерууд нь гүйцэтгэлийн шалтгааны улмаас сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
  • Тэг урт titleба contentутгууд нь поповыг хэзээ ч харуулахгүй.
  • container: 'body'Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .
  • Нууцлагдмал элементүүд дээр поповеруудыг өдөөх нь ажиллахгүй.
  • Поповер .disabledэсвэл disabledэлементүүдийг боодлын элемент дээр өдөөх ёстой.
  • Олон мөрөнд ороосон зангуунаас өдөөх үед поповерууд зангууны нийт өргөний хооронд төвлөрөх болно. Энэ зан үйлээс зайлсхийхийн тулд white-space: nowrap;өөрийн s дээр ашиглаарай .<a>
  • DOM-аас харгалзах элементүүдийг устгахаас өмнө поповуудыг нуусан байх ёстой.

Зарим жишээн дээр поповерууд хэрхэн ажилладагийг харахын тулд үргэлжлүүлэн уншина уу.

Жишээ: Хаа сайгүй поповеруудыг идэвхжүүл

Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг data-toggleшинж чанараар нь сонгох явдал юм:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Жишээ нь: containerСонголтыг ашиглаж байна

Хэрэв таны эх элемент дээр поповерт саад болох зарим загвар байгаа бол containerпоповерын HTML нь тухайн элемент дотор харагдахын тулд өөрчлөн тохируулахыг хүсэх болно.

$(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Хэрэглэгч сэлгэх элементээс өөр элемент дээр дараагийн товшилтоор поповеруудыг хаахын тулд гохыг ашиглана уу.

Дараагийн товшилтыг хаахад тусгай тэмдэглэгээ хийх шаардлагатай

Хөтөч хоорондын болон платформ хоорондын зөв ажиллахын тулд та шошгыг биш харин тагийг ашиглах ёстой <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 (эсвэл хэрэгслийн зөвлөмж)-ийг идэвхжүүлэх боломжгүй гэсэн үг юм. Үүнийг шийдэхийн тулд та боодолоос поповыг өдөөх <div>эсвэл идэвхгүй болсон элемент дээрхийг <span>хүчингүй болгохыг хүсэх болно.pointer-events

Идэвхгүй болсон поповер триггерүүдийн хувьд та поповер нь идэвхгүй болсон элемент дээр дарнаdata-trigger="hover" гэж бодохгүй байгаа тул хэрэглэгчдэд шууд харааны санал болгож харуулахыг илүүд үзэж болно.

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

Хэрэглээ

JavaScript-ээр поповеруудыг идэвхжүүлэх:

$('#example').popover(options)

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-animation="".

Нэр Төрөл Өгөгдмөл Тодорхойлолт
хөдөлгөөнт дүрс логик үнэн Popover руу CSS бүдгэрүүлэх шилжилтийг ашиглана уу
сав мөр | элемент | худлаа худлаа

Тодорхой элементэд поповыг хавсаргана. Жишээ нь: container: 'body'. Энэ сонголт нь цонхны хэмжээг өөрчлөх үед поповерыг идэвхжүүлэгч элементээс холдохоос сэргийлж, баримт бичгийн урсгалд гох элементийн ойролцоо байрлуулах боломжийг олгодогоороо онцгой ач холбогдолтой юм.

агуулга мөр | элемент | функц ''

data-contentХэрэв шинж чанар байхгүй бол агуулгын өгөгдмөл утга .

Хэрэв функц өгөгдсөн бол түүнийг thisпоповер хавсаргасан элементийн лавлагааны багцтайгаар дуудна.

саатал тоо | обьект 0

Поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { "show": 500, "hide": 100 }

html логик худлаа Popover руу HTML оруулна уу. Хэрэв худал бол jQuery-ийн textаргыг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу.
байрлуулах мөр | функц 'зөв'

Поповерыг хэрхэн байрлуулах вэ - auto | дээд | доод | зүүн | зөв.
Тодорхойлсон үед autoэнэ нь поповыг динамикаар өөрчлөх болно.

Байршлыг тодорхойлоход функцийг ашиглах үед түүнийг эхний аргумент болгон popover DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. Контекстийг поповын thisжишээнд тохируулсан.

сонгогч мөр | худлаа худлаа Хэрэв сонгогчийг өгсөн бол popover объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү .
загвар мөр '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Popover үүсгэх үед ашиглах үндсэн HTML.

Поповерыг . title_.popover-header

Поповерыг . content_.popover-body

.arrowпоповын сум болно.

Хамгийн гадна талын боодлын элемент нь .popoverангитай байх ёстой.

гарчиг мөр | элемент | функц ''

titleХэрэв шинж чанар байхгүй бол гарчгийн өгөгдмөл утга .

Хэрэв функц өгөгдсөн бол түүнийг thisпоповер хавсаргасан элементийн лавлагааны багцтайгаар дуудна.

гох мөр 'товших' Поповер хэрхэн идэвхждэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. `гарын авлага`-г өөр ямар ч триггертэй нэгтгэх боломжгүй.
офсет тоо | мөр 0 Зорилтоттойгоо харьцуулахад поповын офсет. Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү .
backbackPlacement мөр | массив 'эргэх' Поппер буцах үед ямар байрлалыг ашиглахыг зааж өгөхийг зөвшөөр. Дэлгэрэнгүй мэдээллийг Popper.js-ийн зан үйлийн баримт бичгүүдээс үзнэ үү
хил хязгаар мөр | элемент 'scrollParent' Поповерын халих хязгаарлалтын хил. 'viewport', 'window', 'scrollParent', эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Popper.js-ийн preventOverflow баримтаас үзнэ үү .

Хувь хүний ​​поповеруудад зориулсан өгөгдлийн шинж чанарууд

Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан хувь хүний ​​поповеруудын сонголтыг зааж өгч болно.

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү.

$().popover(options)

Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.

.popover('show')

Элементийн поповыг харуулна. Поповер харагдахаас өмнө (өөрөөр хэлбэл shown.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг. Гарчиг болон агуулга нь 0 урттай поповеруудыг хэзээ ч харуулахгүй.

$('#element').popover('show')

.popover('hide')

Элементийн поповыг нууна. Поповерыг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг.

$('#element').popover('hide')

.popover('toggle')

Элементийн поповыг асаадаг. Поповыг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл үйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг.shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

.popover('dispose')

Элементийн поповыг нууж, устгана. Төлөөлөгчийг ашигладаг поповеруудыг ( сонголтыг ашиглан үүсгэсэнselector ) удамшлын триггер элементүүд дээр тус тусад нь устгах боломжгүй.

$('#element').popover('dispose')

.popover('enable')

Элементийн поповыг харуулах боломжийг олгоно. Popovers нь анхдагчаар идэвхждэг.

$('#element').popover('enable')

.popover('disable')

Элементийн поповыг харуулах боломжийг арилгана. Дахин идэвхжүүлсэн тохиолдолд л поповыг харуулах боломжтой.

$('#element').popover('disable')

.popover('toggleEnabled')

Элементийн поповыг харуулах эсвэл нуух боломжийг сэлгэдэг.

$('#element').popover('toggleEnabled')

.popover('update')

Элементийн поповерын байрлалыг шинэчилнэ.

$('#element').popover('update')

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
show.bs.popover showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.popover Поповерыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
hide.bs.popover hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.popover Поповерыг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно).
оруулсан.bs.popover show.bs.popoverDOM-д поповын загварыг нэмсэн тохиолдолд энэ үйл явдал идэвхгүй болно .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})