Source

Popovers

Сайтыңыздагы каалаган элементке iOS'то табылгандар сыяктуу Bootstrap поповерлерин кошуу үчүн документтер жана мисалдар.

Обзор

Popover плагинин колдонууда билүү керек болгон нерселер:

  • Поповерлер жайгаштыруу үчүн үчүнчү тараптын Popper.js китепканасына таянышат . Сиз bootstrap.js алдында popper.min.js кошушуңуз керек же bootstrap.bundle.min.js/ колдонушуңуз керек.bootstrap.bundle.js popovers иштеши үчүн Popper.js камтылган
  • Popovers үчүн инструменттин плагини талап кылынат көз карандылык катары
  • Эгер сиз биздин JavaScript булактан куруп жатсаңыз, ал талап кылатutil.js .
  • Поповерлер майнаптуулугу үчүн кошулат, андыктан аларды өзүңүз башташыңыз керек .
  • Нөл-узундук titleжанаcontent баалуулуктар эч качан калкып чыгууну көрсөтпөйт.
  • Белгилеcontainer: 'body'Татаалыраак компоненттерде (мисалы, киргизүү топторубуз, баскыч топторубуз ж.б.) көйгөйлөрдү
  • Жашыруун элементтерде поповерлерди иштетүү иштебейт.
  • .disabledҮчүн же disabledэлементтер үчүн поповерлер орогуч элементинде иштетилиши керек.
  • Бир нече сызыктар боюнча оролгон анкерлерден иштетилгенде, поповерлер анкерлердин жалпы туурасынын ортосуна жайгаштырылат. Бул жүрүм-турумду болтурбоо үчүн .text-nowrapсиздин с боюнча колдонуңуз .<a>
  • Поповерлер алардын тиешелүү элементтери DOMдан алынып салынганга чейин жашырылышы керек.
  • Popovers көлөкө DOM ичиндеги элементтин аркасында иштетилиши мүмкүн.

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Поповерлердин кээ бир мисалдар менен кантип иштээрин көрүү үчүн окууну улантыңыз.

Мисал: Бардык жерде поповерлерди иштетүү

Барактагы бардык поповерлерди инициализациялоонун бир жолу аларды data-toggleатрибуту боюнча тандоо болот:

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

Мисал: containerОпцияны колдонуу

Ата-энелик элементте поповерге тоскоол болгон кээ бир стилдер болгондо, containerанын ордуна popover HTML'и ошол элементтин ичинде пайда болушу үчүн салтты белгилегиңиз келет.

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

Мисал

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

Төрт багыт

Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.

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

Кийинки чыкылдатууда четке кагуу

focusКолдонуучунун которуштуруу элементинен башка элементти кийинки чыкылдатуусунда поповерлерди четке кагуу үчүн триггерди колдонуңуз .

Кийинки чыкылдатууда өчүрүү үчүн атайын белги талап кылынат

Туура кайчылаш браузер жана кайчылаш платформа жүрүм-туруму үчүн <a>тегди эмес , <button>тегди колдонушуңуз керек, ошондой эле 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'
})

Өчүрүлгөн элементтер

Атрибуту бар элементтер disabledинтерактивдүү эмес, демек, колдонуучулар калкып чыгууну (же инструментарийди) ишке киргизүү үчүн аларды басып же баса албайт. Чечим катары, сиз поповерди орогучтан иштеткиңиз келет <div>же өчүрүлгөн элементти <span>жокко чыгаргыңыз келет.pointer-events

Өчүрүлгөн popover триггерлери үчүн, сиз ошондой эле поповер колдонуучуларыңызга дароо визуалдык пикир катары көрүнүшүн кааласаңыз болот, анткени алар өчүрүлгөн элементти басуунуdata-trigger="hover" күтпөшү мүмкүн .

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

Колдонуу

JavaScript аркылуу поповерлерди иштетүү:

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

Клавиатура жана жардамчы технология колдонуучулары үчүн поповерлерди иштетүү

Баскычтоп колдонуучуларына поповерлериңизди активдештирүүсүнө уруксат берүү үчүн, сиз аларды салттуу түрдө клавиатурага багытталган жана интерактивдүү HTML элементтерине гана кошушуңуз керек (мисалы, шилтемелер же форманы башкаруу элементтери). Ылдыйкы HTML элементтерин (мисалы, <span>s) tabindex="0"атрибутун кошуу менен фокус кылса болот, бирок бул клавиатура колдонуучулары үчүн интерактивдүү эмес элементтерге потенциалдуу тажатма жана башаламан өтмөктөрдү кошот жана азыркы учурда көпчүлүк жардамчы технологиялар бул кырдаалда поповердин мазмунун жарыялабайт. . hoverКошумчалай кетсек, поповерлериңиз үчүн триггер катары гана ишенбеңиз , анткени бул аларды клавиатура колдонуучулары үчүн ишке киргизүү мүмкүн эмес кылат.

Поповерлерге бай, структураланган HTML кыстарсаңыз да html, ашыкча көлөмдөгү мазмунду кошуудан качууну сунуштайбыз. Учурда поповерлердин иштөө жолу - көрсөтүлгөндөн кийин, алардын мазмуну aria-describedbyатрибут менен триггер элементине байланган. Натыйжада, поповердин бүт мазмуну жардамчы технология колдонуучуларына бир узун, үзгүлтүксүз агым катары жарыяланат.

Кошумчалай кетсек, поповериңизге интерактивдүү башкаруу элементтерин (мисалы, форма элементтери же шилтемелер) кошууга мүмкүн болсо да (бул элементтерди whiteListже уруксат берилген атрибуттарга жана тегдерге кошуу менен), учурда popover клавиатуранын фокус тартибин башкара албасын эске алыңыз. Баскычтоп колдонуучусу калкып чыгуучу элементти ачканда, фокус козгоочу элементте калат жана поповер адатта документтин түзүмүндөгү триггерди дароо ээрчип кетпегендиктен, алдыга жылдыруу/басууда кепилдик жок.TABклавиатуранын колдонуучусун поповердин өзүнө жылдырат. Кыскача айтканда, жөн гана интерактивдүү башкаруу элементтерин поповерге кошуу бул башкаруу элементтерин клавиатура колдонуучулары жана жардамчы технологияларды колдонуучулар үчүн жеткиликсиз/колдонууга жараксыз кылып коюшу мүмкүн, же жок дегенде логикага сыйбаган жалпы фокус тартибин түзүшү мүмкүн. Мындай учурларда, анын ордуна модалдык диалогду колдонууну карап көрөлү.

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

Коопсуздук максатында sanitize, sanitizeFnжана whiteListопцияларын маалымат атрибуттары менен камсыздоо мүмкүн эмес экенин эске алыңыз.

аты Type Демейки Description
анимация логикалык чын Калкыма файлга CSS өчүп өтүүнү колдонуңуз
контейнер string | элемент | жалган жалган

Белгилүү бир элементке калкыма тиркелет. Мисал: container: 'body'. Бул параметр өзгөчө пайдалуу, анткени ал поповерди документтин агымында триггердик элементтин жанында жайгаштырууга мүмкүндүк берет - бул терезенин өлчөмүн өзгөртүү учурунда поповердин триггер элементинен алыстап кетишине жол бербейт.

мазмун string | элемент | функция ''

data-contentЭгер атрибут жок болсо, демейки мазмундун мааниси .

Эгерде функция берилсе, ал thisпоповер тиркелген элементке шилтеме топтому менен чакырылат.

кечиктирүү саны | объект 0

Поповерди көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { "show": 500, "hide": 100 }

html логикалык жалган HTMLди калкып чыгуучу жерге кыстарыңыз. Эгер жалган болсо, jQuery textыкмасы DOMга мазмун киргизүү үчүн колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз.
жайгаштыруу string | функция "туура"

Поповерди кантип жайгаштыруу керек - авто | top | түбү | сол | туура.
Көрсөтүлгөндө auto, ал поповерди динамикалык түрдө өзгөртөт.

Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары popover DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст thispopover инстанциясына коюлган.

селектор string | жалган жалган Эгер селектор берилсе, поповер объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык HTML мазмунун поповерлерди кошууга иштетүү үчүн колдонулат. Бул жана маалыматтык мисалды караңыз .
шаблон сап '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Калкыма түзүүдө колдонула турган негизги HTML.

поповердин titleичине сайылат .popover-header.

поповердин contentичине сайылат .popover-body.

.arrowпоповердин жебеси болуп калат.

Эң сырткы ороочу элемент .popoverкласска ээ болушу керек.

аталышы string | элемент | функция ''

titleЭгер атрибут жок болсо, демейки аталыш мааниси .

Эгерде функция берилсе, ал thisпоповер тиркелген элементке шилтеме топтому менен чакырылат.

триггер сап 'басуу' Поповер кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manualбашка триггер менен айкалыштыруу мүмкүн эмес.
офсет саны | сап 0 Поповердин максатына салыштырмалуу жылышы. Көбүрөөк маалымат алуу үчүн Popper.js'тин офсет документтерине кайрылыңыз .
fallbackPlacement string | массив 'флип' Поппер кайра кайтарууда кайсы позицияны колдоноорун көрсөтүүгө уруксат бериңиз. Көбүрөөк маалымат алуу үчүн Popper.jsтин жүрүм -туруму боюнча документтерди караңыз
чек ара string | элемент 'scrollParent' Поповердин толуп кетүү чектөө чек арасы. 'viewport', 'window', 'scrollParent', же HTMLElement шилтемесинин маанилерин кабыл алат (JavaScript гана). Көбүрөөк маалымат алуу үчүн Popper.js'тин preventOverflow документтерине кайрылыңыз .
тазалоо логикалык чын Санитизацияны иштетүү же өчүрүү. Эгер жандырылса 'template', опциялар тазаланат 'content'.'title'
ак тизме объект Демейки маани Уруксат берилген атрибуттарды жана тегдерди камтыган объект
sanitizeFn null | функция нөл Бул жерде сиз өзүңүздүн дезинфекциялоо функциясын бере аласыз. Санитизациялоо үчүн атайын китепкананы колдонууну кааласаңыз, бул пайдалуу болушу мүмкүн.
popperConfig null | объект нөл Bootstrap демейки Popper.js конфигурациясын өзгөртүү үчүн Popper.js конфигурациясын караңыз

Жеке поповерлер үчүн маалымат атрибуттары

Жеке поповерлердин параметрлери альтернатива катары жогоруда түшүндүрүлгөндөй, маалымат атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

$().popover(options)

Элементтердин жыйнагы үчүн поповерлерди инициализациялайт.

.popover('show')

Элементтин калкып чыгуусун көрсөтөт. Поповер чындыгында көрсөтүлө электе (б.а. shown.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет. Аталышы жана мазмуну нөлгө барабар болгон поповерлер эч качан көрсөтүлбөйт.

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

.popover('hide')

Элементтин калкып чыгуусун жашырат. Поповер чындыгында жашырылганга чейин (б.а. hidden.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет.

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

.popover('toggle')

Элементтин калкып чыгуусун өчүрөт. Поповер чындыгында көрсөтүлгөнгө же жашырылганга чейин (б.а. shown.bs.popoverже hidden.bs.popoverокуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет.

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

.popover('dispose')

Элементтин поповерин жашырат жана жок кылат. Делегацияны колдонгон поповерлер ( опцияны колдонуу мененselector түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылынбайт.

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

.popover('enable')

Элементтин калкып чыгуусуна көрсөтүү мүмкүнчүлүгүн берет. Поповерлер демейки боюнча иштетилген.

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

.popover('disable')

Элементтин поповерин көрсөтүү мүмкүнчүлүгүн жок кылат. Поповер кайра иштетилгенде гана көрсөтүлө алат.

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

.popover('toggleEnabled')

Элементтин поповерин көрсөтүү же жашыруу мүмкүнчүлүгүн өчүрөт.

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

.popover('update')

Элементтин поповеринин абалын жаңыртат.

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

Окуялар

Окуя түрү Description
show.bs.popover Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
show.bs.popover Бул окуя поповер колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт).
hide.bs.popover Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.popover Бул окуя поповер колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
inserted.bs.popover Бул окуя show.bs.popoverDOMга popover үлгүсү кошулгандан кийин өчүрүлөт.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})