Поповерҳо

Ҳуҷҷатҳо ва мисолҳо барои илова кардани popovers Bootstrap, ба монанди онҳое, ки дар iOS мавҷуданд, ба ҳама гуна унсури сайти шумо.

Барраси

Чизҳоро ҳангоми истифодаи плагини popover донистан лозим аст:

• Поповҳо барои ҷойгиркунӣ ба китобхонаи сеюми Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред bootstrap.bundle.min.js/ bootstrap.bundle.jsки Попперро дар бар мегирад, то поповҳо кор кунанд!
• Popovers плагини асбобро ҳамчун вобастагӣ талаб мекунанд.
• Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .
• Поповҳо бо сабабҳои иҷроиш дохил мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
• Дарозии сифр titleва contentарзишҳо ҳеҷ гоҳ поповро нишон намедиҳанд.
• Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
• Оғози поповҳо дар унсурҳои пинҳон кор намекунад.
• Поповарҳо барои .disabledё disabledунсурҳо бояд дар элементи печанда фаъол карда шаванд.
• Вақте ки аз лангарҳое, ки дар байни сатрҳои гуногун мепечанд, поповҳо дар байни паҳнои умумии лангарҳо марказонида мешаванд. Барои пешгирӣ кардани ин рафтори .text-nowrapхуд истифода баред .<a>
• Поповҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз DOM пинҳон карда шаванд.
• Поповҳоро ба шарофати унсури дохили DOM-и сояҳо ба кор андохтан мумкин аст.

Хонданро давом диҳед, то бубинед, ки поповерҳо бо баъзе мисолҳо чӣ гуна кор мекунанд.

Мисол: Дар ҳама ҷо поповерҳоро фаъол созед

Як роҳи оғоз кардани ҳама поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggleатрибути онҳост:

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

Мисол: Истифодаи containerопсия

Вақте ки шумо дар як унсури волидайн якчанд услубҳо доред, ки ба поповор халал мерасонанд, шумо мехоҳед одатеро муайян кунед, containerто HTML-и popover дар дохили он элемент пайдо шавад.

$(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аттрибутӣ интерактивӣ нестанд, яъне корбарон наметавонанд онҳоро ба ҷояшон гузоранд ё клик кунанд, то попover (ё маслиҳати абзор) ангезанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки поповро аз парпеч ангезед <div>ё <span>ва pointer-eventsэлементи ғайрифаъолро бекор кунед.

Барои триггерҳои поповери ғайрифаъол, шумо инчунин метавонед бартарӣ data-trigger="hover"диҳед, ки popover ҳамчун аксуламали фаврии визуалӣ барои корбарони шумо пайдо шавад, зеро онҳо интизор нашаванд, ки элементи ғайрифаъолро пахш кунанд.

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

Поп-повери элементро иваз мекунад. Ба зангзананда пеш аз он ки popover воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса 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...
})