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 qiladi
util.js
. - Popoverlar ishlash sabablariga ko'ra tanlanadi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
- Nol uzunlik
title
vacontent
qiymatlar 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.
.disabled
O'ram elementida yokidisabled
elementlar 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-nowrap
uchun s-da foydalaning.<a>
- Tegishli elementlar DOMdan olib tashlanishidan oldin popoverlar yashirilishi kerak.
- Popoverlar soyali DOM ichidagi element tufayli ishga tushirilishi mumkin.
prefers-reduced-motion
media 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-toggle
atributiga ko'ra tanlashdir:
$(function () {
$('[data-toggle="popover"]').popover()
})
Misol: Variantdan container
foydalanish
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 focus
oʻ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 disabled
interaktiv 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 hover
popoverlar 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, html
ortiqcha miqdorda kontent qo‘shmaslikni tavsiya qilamiz. Popoverlarning hozirda ishlash usuli shundan iboratki, ko'rsatilgandan so'ng, ularning mazmuni atributli trigger elementiga aria-describedby
bog'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 whiteList
yoki 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=""
.
sanitize
,
sanitizeFn
va
whiteList
opsiyalarini 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: |
mazmuni | string | element | funktsiyasi | '' |
Agar funktsiya berilsa, u |
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: |
html | mantiqiy | yolg'on | Popover-ga HTML-ni joylashtiring. Agar noto'g'ri bo'lsa, jQuery text usuli 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. Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida popover DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish bilan chaqiriladi. |
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 Popover ning
Eng tashqi o'rash elementi |
sarlavha | string | element | funktsiyasi | '' | Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati Agar funktsiya berilsa, u |
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. manual boshqa 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: 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.popover
voqea 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.popover
voqea 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.popover
yoki hidden.bs.popover
hodisa 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 show misol 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 hide misol 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.popover DOMga popover shablonini qo'shgandan so'ng o'chiriladi. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})