Source

Поповерс

Документација и примери за додавање искачућих приказа за Боотстрап, попут оних у иОС-у, било ком елементу на вашој веб локацији.

Преглед

Ствари које треба знати када користите додатак за попове:

Поповерс се ослањају на библиотеку треће стране Поппер.јс за позиционирање. Морате укључити поппер.мин.јс пре боотстрап.јс или користити bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер.јс да би искачући елементи радили!
Поповерс захтевају додатак са описом алата као зависност.
Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .
Искачући бројеви су укључени из разлога перформанси, тако да их морате сами иницијализирати .
Нулта дужина titleи contentвредности никада неће приказати искакање.
Наведите container: 'body'да бисте избегли проблеме са приказивањем у сложенијим компонентама (као што су наше групе за унос, групе дугмади, итд.).
Покретање искачућих приказа на скривеним елементима неће радити.
Искачући прозори за .disabledили disabledелементе морају бити покренути на елементу омотача.
Када се активирају из сидра која се премотају преко више линија, искачући прикази ће бити центрирани између укупне ширине сидра. Користите .text-nowrapна свом <a>с да бисте избегли ово понашање.
Поповерс морају бити сакривени пре него што се њихови одговарајући елементи уклоне из ДОМ-а.

Наставите да читате да бисте видели како искачући подаци раде са неким примерима.

Пример: Омогућите искачуће приказе свуда

Један од начина да се иницијализују сви искачући прозори на страници био би да их изаберете према њиховом data-toggleатрибуту:

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

Пример: Коришћење `container`опције

Када имате неке стилове на родитељском елементу који ометају искачући приказ, желећете да наведете прилагођени containerтако да се ХТМЛ искачућег елемента уместо тога појављује унутар тог елемента.

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

Употреба

Омогућите искачуће прозоре преко ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Име	Тип	Уобичајено	Опис
анимација	боолеан	истинито	Примените прелаз ЦСС фаде на искачући прозор
контејнер	стринг \| елемент \| лажно	лажно	Додаје искачући прозор одређеном елементу. Пример: `container: 'body'`. Ова опција је посебно корисна по томе што вам омогућава да позиционирате искачући део у току документа у близини покретачког елемента – што ће спречити да искачући део лебди од елемента за окидање током промене величине прозора.
садржаја	стринг \| елемент \| функција	''	Подразумевана вредност садржаја ако `data-content`атрибут није присутан. Ако је дата функција, она ће бити позвана са својом `this`референцом постављеном на елемент за који је повезан искачући прозор.
кашњење	број \| објекат	0	Одлагање приказивања и сакривања искачућег екрана (мс) – не примењује се на тип ручног окидача Ако је наведен број, кашњење се примењује и на сакривање/прикажи Структура објекта је:`delay: { "show": 500, "hide": 100 }`
хтмл	боолеан	лажно	Уметните ХТМЛ у искачући прозор. Ако је нетачно, јКуери `text`метода ће се користити за уметање садржаја у ДОМ. Користите текст ако сте забринути због КССС напада.
постављање	стринг \| функција	'јел тако'	Како поставити поповер - ауто \| врх \| боттом \| лево \| јел тако. Када `auto`је наведено, динамички ће преусмерити искачући прозор. Када се функција користи за одређивање положаја, она се позива са искачућим ДОМ чвором као првим аргументом и покретачким елементом ДОМ чвором као другим. Контекст `this`је постављен на инстанцу искачућег приказа.
селектор	стринг \| лажно	лажно	Ако је обезбеђен селектор, искачући објекти ће бити делегирани наведеним циљевима. У пракси, ово се користи да би се омогућило додавање искачућих садржаја динамичком ХТМЛ садржају. Погледајте ово и информативни пример .
шаблон	низ	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Основни ХТМЛ који се користи приликом креирања искачућег екрана. Поповер'с `title`ће бити убризган у `.popover-header`. Поповер'с `content`ће бити убризган у `.popover-body`. `.arrow`постаће поповерова стрела. Најудаљенији елемент омотача треба да има `.popover`класу.
наслов	стринг \| елемент \| функција	''	Подразумевана вредност наслова ако `title`атрибут није присутан. Ако је дата функција, она ће бити позвана са својом `this`референцом постављеном на елемент за који је повезан искачући прозор.
Окидач	низ	'кликни'	Како се поповер покреће - кликните \| ховер \| фокус \| упутство. Можете проследити више покретача; одвојите их размаком. `manual`не може се комбиновати ни са једним другим окидачем.
офсет	број \| низ	0	Померање искачућег приказа у односу на циљ. За више информација погледајте Поппер.јс офсет документе .
фаллбацкПлацемент	стринг \| низ	'флип'	Дозволите да одредите коју позицију ће Поппер користити на резервном. За више информација погледајте документе о понашању Поппер.јс
граница	стринг \| елемент	'сцроллПарент'	Граница ограничења прелива искачућег екрана. Прихвата вредности `'viewport'`, `'window'`, `'scrollParent'`, или референце ХТМЛЕлемента (само ЈаваСцрипт). За више информација погледајте ПревенОверфлов документе Поппер.јс .

Атрибути података за појединачне искачуће

Опције за појединачне искачуће опције могу се алтернативно специфицирати коришћењем атрибута података, као што је горе објашњено.

Методе

Асинхроне методе и прелази

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација.

`$().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`се позове метод инстанце.
приказано.бс.поповер	Овај догађај се покреће када искачући прозор постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
хиде.бс.поповер	Овај догађај се покреће одмах када `hide`се позове метод инстанце.
хидден.бс.поповер	Овај догађај се покреће када се искачући прозор заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
инсертед.бс.поповер	Овај догађај се покреће након `show.bs.popover`догађаја када је шаблон за искакање додат у ДОМ.

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