in English

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 Popperga tayanadilar . Popoverlar ishlashi uchun bootstrap.js dan oldin popper.min.js ni qo'shishingiz yoki Popper o'z ichiga olgan bootstrap.bundle.min.js/ 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.
Odatiy bo'lib, ushbu komponent o'rnatilgan kontentni tozalash vositasidan foydalanadi, bu aniq ruxsat etilmagan HTML elementlarini olib tashlaydi. Batafsil ma'lumot olish uchun JavaScript hujjatlaridagi dezinfektsiyalash bo'limiga qarang .
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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
GPU tezlashishi

GPU tezlashishi va o'zgartirilgan DPI tizimi tufayli Windows 10 qurilmalarida popoverlar ba'zan loyqa ko'rinadi. V4 da buning vaqtinchalik yechimi popoverlaringizda kerak bo'lganda GPU tezlashuvini o'chirib qo'yishdir.

Tavsiya etilgan tuzatish:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Klaviatura va yordamchi texnologiya foydalanuvchilari uchun popoverlarni ishlashga majbur qilish

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) qo'shish 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, ehtimol bu boshqaruvlarni klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari uchun mavjud bo'lmagan/yaroqsiz holga keltirishi yoki hech bo'lmaganda mantiqsiz umumiy fokus tartibini yaratishi mumkin. Bunday hollarda o'rniga modal dialogdan foydalanishni ko'rib chiqing.

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 - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manualboshqa trigger bilan birlashtirib bo'lmaydi.
ofset raqam | ip 0 Popoverning maqsadiga nisbatan ofseti. Qo'shimcha ma'lumot olish uchun Popperning ofset hujjatlariga qarang .
backbackPlacement string | massiv "aylantirish" Qayta tiklashda Popper qaysi pozitsiyadan foydalanishini belgilashga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popperning xatti-harakatlari hujjatlariga qarang
customClass string | funktsiyasi ''

Popover ko'rsatilganda unga sinflarni qo'shing. E'tibor bering, bu sinflar shablonda ko'rsatilgan har qanday sinflarga qo'shimcha ravishda qo'shiladi. Bir nechta sinflarni qo'shish uchun ularni bo'sh joylar bilan ajrating: 'a b'.

Bundan tashqari, qo'shimcha sinf nomlarini o'z ichiga olgan bitta satrni qaytarishi kerak bo'lgan funktsiyani o'tkazishingiz mumkin.

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 Popperning preventOverflow hujjatlariga qarang .
sanitarizatsiya qilish mantiqiy rost Sanitizatsiyani yoqing yoki o'chiring. Agar faollashtirilsa 'template', opsiyalar tozalanadi 'content'. JavaScript hujjatlarimizdagi dezinfektsiyalash bo'limiga'title' qarang .
oq ro'yxat ob'ekt Standart qiymat Ruxsat etilgan 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-ning standart Popper konfiguratsiyasini o'zgartirish uchun Popper konfiguratsiyasiga qarang

Alohida popoverlar uchun ma'lumotlar atributlari

Alohida popoverlar uchun variantlar yuqorida aytib o'tilganidek, ma'lumotlar atributlaridan foydalanish orqali muqobil ravishda 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 popoverini 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...
})