Source

Поповерлар

Bootstrap поповерларын өстәү өчен документлар һәм мисаллар, iOS'дагы кебек, сезнең сайттагы теләсә нинди элементка.

Гомуми күзәтү

Поповер плагинын кулланганда белергә кирәк нәрсәләр:

  • Поповерлар урнашу өчен Popper.js өченче як китапханәсенә таяналар . Bootstrap.js алдыннан popper.min.js кертергә яки поповерлар эшләсен өчен Popper.js булган bootstrap.bundle.min.js/ кулланырга тиеш!bootstrap.bundle.js
  • Поповерлар бәйләнеш буларак кораллар плагинын таләп итәләр.
  • Әгәр дә сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js .
  • Поповерлар башкару сәбәпләре аркасында сайланалар, шуңа күрә сез аларны үзегез башларга тиеш .
  • Нуль озынлыгы titleһәм contentкыйммәтләре беркайчан да поповерны күрсәтмәячәк.
  • container: 'body'Катлаулырак компонентларда проблемалар килеп чыкмасын өчен күрсәтегез (безнең кертү төркемнәре, төймә төркемнәре һ.б.).
  • Яшерен элементлардагы поповерлар эшләмәячәк.
  • Поповерлар .disabledяки disabledэлементлар төрү элементында башланырга тиеш.
  • Берничә сызык белән уралган якорьлардан башлангач, поповерлар якорьларның гомуми киңлеге арасында урнашачак. Бу тәртиптән саклану өчен с-ларда .text-nowrapкулланыгыз .<a>
  • Поповерлар тиешле элементлар DOMдан чыгарылганчы яшерелергә тиеш.
  • Поповерлар DOM күләгәсендәге элемент ярдәмендә башланырга мөмкин.

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

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

Exampleрнәк: һәркайда поповерларны эшләгез

Биттәге барлык поповерларны башлап җибәрүнең бер ысулы - аларны data-toggleатрибутлары буенча сайлау:

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

Мисал: containerвариантны куллану

Ата-ана элементында поповерга комачаулаган кайбер стильләр булганда, сез гадәтне күрсәтергә теләрсез, containerшуңа күрә поповерның 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

Инвалид поповер триггерлары өчен, сез шулай ук ​​өстенлек бирергә мөмкин, шуңа күрә поповер сезнең кулланучыларга тиз визуаль җавап булып күренсен, чөнки алар инвалид элементка басуны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>) tabindex="0"атрибутны өстәп игътибарны тупларга мөмкин булса да, бу клавиатура кулланучылары өчен интерактив булмаган элементларга потенциаль рәнҗетүче һәм буталчык өстәмә тукталышлар өстәячәк, һәм күпчелек ярдәмче технологияләр хәзерге вакытта поповерның эчтәлеген игълан итмиләр. . Өстәвенә, поповерларыгыз өчен триггер буларак кына таянмагыз hover, чөнки бу аларны клавиатура кулланучылары өчен эшләтеп җибәрә алмас.

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

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Игътибар итегез, куркынычсызлык сәбәпләре аркасында sanitize, sanitizeFnһәм whiteListвариантлар мәгълүмат атрибутлары ярдәмендә бирелә алмый.

Исем Тип Килешү Тасвирлау
анимация буле дөрес Поповерга CSS сүнгән күчүне кулланыгыз
контейнер кыл | элемент | ялган ялган

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

эчтәлеге кыл | элемент | функциясе ''

data-contentӘгәр дә атрибут булмаса , килешү эчтәлеге .

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

тоткарлау саны | объект 0

Поповерны күрсәтү һәм яшерү (мс) - кул белән эшләнгән триггер төренә кагылмый

Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла

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

html буле ялган Поповерга HTML кертү. Ялган булса, jQuery textысулы DOMга эчтәлек кертү өчен кулланылачак. XSS һөҗүмнәре турында борчылсагыз, текст кулланыгыз.
урнаштыру кыл | функциясе 'дөрес'

Поповерны ничек урнаштырырга - авто | өстә | аста | сул | уң.
Билгеле булганда auto, ул динамик рәвештә поповерны үзгәртәчәк.

Урнаштыруны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак поповер DOM төене белән, икенчесе буларак DOM төен элементы дип атала. thisКонтекст поповер инстанциясенә куелган .

селектор кыл | ялган ялган Әгәр дә селектор тәкъдим ителсә, поповер объектлары күрсәтелгән максатларга биреләчәк. Практикада, бу динамик 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класс булырга тиеш.

исем кыл | элемент | функциясе ''

titleӘгәр дә атрибут булмаса , килешү исеме .

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

триггер кыл 'басыгыз' Поповер ничек этәрелә - басыгыз | | фокус | кулланма. Сез берничә триггер узарга мөмкин; аларны бушлык белән аерыгыз. manualбүтән триггер белән берләштереп булмый.
офсет саны | кыл 0 Максатка караганда поповерның офсеты. Күбрәк мәгълүмат өчен Popper.js офсет документларына мөрәҗәгать итегез .
.әр сүзнең кыл | массив 'флип' Попперның кире кайту вакытында нинди позицияне кулланачагын күрсәтергә рөхсәт итегез. Күбрәк мәгълүмат өчен Popper.js тәртибе документларына мөрәҗәгать итегез
чик кыл | элемент 'scrollParent' Поповерның чик чикләре. 'viewport',, Һәм HTMLElement сылтамасының кыйммәтләрен кабул итә 'window'( JavaScript кына). 'scrollParent'Күбрәк мәгълүмат өчен Popper.js'ның профилактика Оверфлоу документларына мөрәҗәгать итегез .
санитарлаштыру буле дөрес Санитизацияне эшләтеп җибәрү яки сүндерү. Активлаштырылса 'template', 'content'вариантлар 'title'санитарлаштырылачак.
ак исемлек объект Килешенгән кыйммәт Рөхсәт ителгән атрибутлар һәм тэглар булган объект
sanitizeFn null | функциясе нуль Монда сез үзегезнең санитария функциясен тәкъдим итә аласыз. Санитизация ясау өчен махсус китапханә кулланырга теләсәгез, бу файдалы булырга мөмкин.
popperConfig null | объект нуль Bootstrap'ның default 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')

Вакыйгалар

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