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.

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.

<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="".

Usullari

$().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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})