Source

Popoverlar

Saytingizdagi istalgan elementga iOS-da bo'lganlar 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 .text-nowrapuchun s-da foydalaning.<a>
  • Tegishli elementlar DOMdan olib tashlanishidan oldin popoverlar yashirilishi kerak.
  • Popoverlar soyali DOM ichidagi element tufayli ishga tushirilishi mumkin.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

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.

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

Klaviatura va yordamchi texnologiya foydalanuvchilari uchun popoverlarni ishlash

Klaviatura foydalanuvchilariga popoverlaringizni faollashtirishga ruxsat berish uchun ularni faqat an'anaviy ravishda klaviaturaga qaratiladigan va interaktiv HTML elementlariga qo'shishingiz kerak (masalan, havolalar yoki shakl boshqaruvlari). O'zboshimchalik bilan HTML elementlarini (masalan, <span>s) tabindex="0"atribut qo'shish orqali diqqatni jamlash mumkin bo'lsa-da, bu klaviatura foydalanuvchilari uchun interaktiv bo'lmagan elementlarga potentsial bezovta qiluvchi va chalkash tab to'xtash joylarini qo'shadi va hozirda ko'pchilik yordamchi texnologiyalar bu vaziyatda popover tarkibini e'lon qilmaydi. . Bundan tashqari, faqat hoverpopoverlar uchun trigger sifatida ishonmang, chunki bu ularni klaviatura foydalanuvchilari uchun ishga tushirishni imkonsiz qiladi.

Opsiya bilan popoverlarga boy, tuzilgan HTMLni kiritishingiz mumkin bo‘lsa-da, htmlortiqcha miqdorda kontent qo‘shmaslikni tavsiya qilamiz. Popoverlarning hozirda ishlash usuli shundan iboratki, ko'rsatilgandan so'ng, ularning mazmuni atributli trigger elementiga aria-describedbybog'langan. Natijada, popoverning to'liq mazmuni yordamchi texnologiya foydalanuvchilariga bitta uzoq, uzluksiz oqim sifatida e'lon qilinadi.

Bundan tashqari, popover-ga interaktiv boshqaruv elementlarini (masalan, shakl elementlari yoki havolalar) kiritish mumkin bo'lsa-da (ushbu elementlarni whiteListyoki ruxsat etilgan atributlar va teglarga qo'shish orqali), shuni yodda tutingki, popover hozirda klaviatura fokus tartibini boshqara olmaydi. Klaviatura foydalanuvchisi qalqib chiquvchi tugmani ochganda, diqqat tetiklash elementida qoladi va popover odatda hujjat tuzilishidagi triggerni darhol kuzatib bormasligi sababli, oldinga siljish/bosish kafolati yo'q.TABklaviatura foydalanuvchisini popoverning o'ziga ko'chiradi. Muxtasar qilib aytganda, popoverga shunchaki interaktiv boshqaruv elementlarini qo'shish, bu boshqaruvlarni klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari uchun yaroqsiz/yaroqsiz holga keltirishi yoki hech bo'lmaganda mantiqsiz umumiy fokus tartibini yaratishi mumkin. Bunday hollarda modal dialogdan foydalanishni o'ylab ko'ring.

Variantlar

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

E'tibor bering, xavfsizlik nuqtai nazaridan sanitize, sanitizeFnva whiteListopsiyalarini ma'lumotlar atributlari yordamida ta'minlab bo'lmaydi.

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 - | ni bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manualboshqa tetik bilan birlashtirib bo'lmaydi.
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 .
sanitarizatsiya qilish mantiqiy rost Sanitizatsiyani yoqing yoki o'chiring. Agar faollashtirilsa 'template', opsiyalar tozalanadi 'content'.'title'
oq ro'yxat ob'ekt Standart qiymat Ruxsat berilgan atributlar va teglarni o'z ichiga olgan ob'ekt
sanitizeFn null | funktsiyasi null Bu erda siz o'zingizning dezinfektsiyalash funksiyangizni taqdim etishingiz mumkin. Sanitizatsiyani amalga oshirish uchun maxsus kutubxonadan foydalanishni afzal ko'rsangiz, bu foydali bo'lishi mumkin.
popperConfig null | ob'ekt null Bootstrap standart Popper.js konfiguratsiyasini o‘zgartirish uchun Popper.js konfiguratsiyasiga 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 ( variant 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...
})