Source

Popoverlar

Saytingizdagi istalgan elementga iOS-da topilganlar kabi Bootstrap popoverlarini qo'shish uchun hujjatlar va misollar.

Umumiy koʻrinish

Popover plaginini ishlatishda bilishingiz kerak bo'lgan narsalar:

  • Popoverlar joylashishni aniqlash uchun uchinchi tomon kutubxonasi Popper.js ga tayanadi . Popoverlar ishlashi uchun bootstrap.js dan oldin popper.min.jsbootstrap.bundle.min.js ni qo'shishingiz yoki Popper.js ni o'z ichiga olgan / dan foydalanishingiz kerak bootstrap.bundle.js!
  • Popoverlar bog'liqlik sifatida asboblar paneli plaginini talab qiladi.
  • Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js .
  • Popoverlar ishlash sabablariga ko'ra tanlanadi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
  • Nol uzunlik titleva contentqiymatlar hech qachon popoverni ko'rsatmaydi.
  • container: 'body'Murakkabroq komponentlarda (masalan, kirish guruhlarimiz, tugma guruhlarimiz va h.k.) muammolarni keltirib chiqarmaslik uchun belgilang .
  • Yashirin elementlarda popoverlarni ishga tushirish ishlamaydi.
  • .disabledO'ram elementida yoki disabledelementlar uchun popoverlar ishga tushirilishi kerak.
  • Bir nechta chiziqlar bo'ylab o'ralgan langarlardan ishga tushirilganda, popoverlar langarlarning umumiy kengligi o'rtasida joylashgan bo'ladi. Ushbu xatti-harakatdan qochish white-space: nowrap;uchun s-da foydalaning.<a>
  • Tegishli elementlar DOMdan olib tashlanishidan oldin popoverlar yashirilishi kerak.

Ba'zi misollar bilan popoverlar qanday ishlashini ko'rish uchun o'qishni davom eting.

Misol: hamma joyda popoverlarni yoqing

Sahifadagi barcha popoverlarni ishga tushirishning bir usuli ularni data-toggleatributiga ko'ra tanlashdir:

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

Misol: Variantdan containerfoydalanish

Agar sizda asosiy elementda popoverga xalaqit beradigan ba'zi uslublar mavjud bo'lsa container, popoverning HTML o'rniga ushbu element ichida paydo bo'lishi uchun maxsus belgilashni xohlaysiz.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Misol

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

To'rt yo'nalish

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.

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

Keyingi bosishda o'chirib qo'ying

Foydalanuvchi focusoʻzgartirish elementidan boshqa elementni keyingi bosganida popoverlarni oʻchirish uchun triggerdan foydalaning.

Keyingi chertishda o'chirish uchun maxsus belgi kerak

Brauzerlar va platformalararo to'g'ri xatti-harakatlar uchun siz tegdan emas, tegdan foydalanishingiz kerak <a>, shuningdek , <button>atributni ham kiritishingiz kerak tabindex.

Yopiladigan 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'
})

O'chirilgan elementlar

Atributga ega boʻlgan elementlar disabledinteraktiv emas, yaʼni foydalanuvchilar qalqib chiquvchi (yoki asboblar maslahati)ni ishga tushirish uchun ularni sichqonchani koʻtarib yoki bosishlari mumkin emas. Vaqtinchalik yechim sifatida siz o'ramdan popoverni ishga tushirishni <div>yoki o'chirilgan elementni <span>bekor qilishni xohlaysiz.pointer-events

O'chirilgan popover triggerlari uchun siz popover foydalanuvchilaringizga darhol vizual fikr-mulohaza sifatida ko'rinishini ham afzal ko'rishingiz mumkin, chunki ular o'chirilgan elementni bosishnidata-trigger="hover" kutmasligi mumkin .

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

Foydalanish

JavaScript orqali popoverlarni yoqish:

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Ism Turi Standart Tavsif
animatsiya mantiqiy rost Popoverga CSS o'tishini qo'llang
idish string | element | yolg'on yolg'on

Popoverni ma'lum bir elementga qo'shadi. Misol: container: 'body'. Ushbu parametr, ayniqsa, foydalidir, chunki u sizga popoverni hujjat oqimida ishga tushirish elementi yaqinida joylashtirish imkonini beradi - bu oyna hajmini o'zgartirish vaqtida popoverning tetiklash elementidan uzoqlashishiga yo'l qo'ymaydi.
mazmuni string | element | funktsiyasi ''

data-contentAtribut mavjud boʻlmasa, standart kontent qiymati .

Agar funktsiya berilsa, u thispopover biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.
kechikish raqam | ob'ekt 0

Popoverni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda tetiklash turiga taalluqli emas

Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi

Ob'ekt tuzilishi:delay: { "show": 500, "hide": 100 }
html mantiqiy yolg'on Popover-ga HTML-ni joylashtiring. Agar noto'g'ri bo'lsa, jQuery textusuli DOMga tarkibni kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "to'g'ri"

Popoverni qanday joylashtirish mumkin - avtomatik | yuqori | pastki | chap | to'g'ri.
Belgilanganida auto, u popoverni dinamik ravishda o'zgartiradi.

Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida popover DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish bilan chaqiriladi. thisKontekst popover misoliga o'rnatiladi .
selektor string | yolg'on yolg'on Agar selektor taqdim etilsa, popover ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik HTML tarkibiga popoverlar qo'shilishi uchun ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring .
shablon ip '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Popover yaratishda foydalanish uchun asosiy HTML.

Popover ning titleichiga AOK qilinadi .popover-header.

Popover ning contentichiga AOK qilinadi .popover-body.

.arrowpopoverning o'qiga aylanadi.

Eng tashqi o'rash elementi .popoversinfga ega bo'lishi kerak.
sarlavha string | element | funktsiyasi ''

Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati title.

Agar funktsiya berilsa, u thispopover biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.
tetik ip "bosish" Popover qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. 'qo'lda' boshqa hech qanday trigger bilan birlashtirilmaydi.
ofset raqam | ip 0 Popoverning maqsadiga nisbatan ofseti. Qo'shimcha ma'lumot olish uchun Popper.js ofset hujjatlariga qarang .
backbackPlacement string | massiv "aylantirish" Qayta tiklashda Popper qaysi pozitsiyadan foydalanishini belgilashga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popper.js ning xatti-harakatlari hujjatlariga qarang
chegara string | element 'scrollParent' Popoverning toshib ketish chegarasi. 'viewport', 'window', 'scrollParent', yoki HTMLElement havolasi qiymatlarini qabul qiladi (faqat JavaScript). Qo'shimcha ma'lumot olish uchun Popper.js'ning preventOverflow hujjatlariga qarang .

Alohida popoverlar uchun ma'lumotlar atributlari

Yuqorida aytib o'tilganidek, individual popoverlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang.

$().popover(options)

Elementlar to'plami uchun popoverlarni ishga tushiradi.

.popover('show')

Elementning popoverini ko'rsatadi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishidan oldin (ya'ni shown.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi. Sarlavhasi va mazmuni nol uzunlikdagi popoverlar hech qachon ko'rsatilmaydi.

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

.popover('hide')

Elementning qalqib chiquvchi oynasini yashiradi. Qo'ng'iroq qiluvchiga popover yashirin bo'lishidan oldin (ya'ni hidden.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

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

.popover('toggle')

Elementning qalqib chiquvchi oynasini almashtiradi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni shown.bs.popoveryoki hidden.bs.popoverhodisa sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

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

.popover('dispose')

Elementning popoverini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan popoverlarni ( opsiya yordamida yaratilgan )selector nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.

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

.popover('enable')

Elementning popoverini ko'rsatish imkoniyatini beradi. Popovers sukut bo'yicha yoqilgan.

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

.popover('disable')

Elementning qalqib chiquvchisini ko'rsatish imkoniyatini olib tashlaydi. Popover faqat qayta yoqilgan bo'lsa, ko'rsatilishi mumkin bo'ladi.

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

.popover('toggleEnabled')

Element popoverini ko‘rsatish yoki yashirish imkoniyatini o‘zgartiradi.

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

.popover('update')

Elementning qalqib chiquvchi joylashuvini yangilaydi.

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

Voqealar

Tadbir turi Tavsif
show.bs.popover Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.popover Ushbu hodisa popover foydalanuvchiga ko'rinadigan qilib qo'yilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.popover Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
hidden.bs.popover Ushbu hodisa popover foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi).
kiritilgan.bs.popover Ushbu hodisa show.bs.popoverDOMga popover shablonini qo'shgandan so'ng o'chiriladi. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})