Поповерлар

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 күләгәсендәге элемент ярдәмендә башланырга мөмкин.

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

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

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен 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...
})