Поповерс

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

Преглед

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

• Поповерс се ослањају на Поппер библиотеку треће стране за позиционирање. Морате укључити поппер.мин.јс пре боотстрап.јс или користити 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="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>

Одбаците следећи клик

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

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Опције

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

Методе

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

Догађаји

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