Source

Поповерҳо

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

Барраси

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

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Ном Навъи Пешфарз Тавсифи
аниматсия булӣ дуруст Гузариши пажмурдашавии CSS-ро ба popover татбиқ кунед
контейнер сатр | элемент | дурӯғ дурӯғ

Поповро ба унсури мушаххас замима мекунад. Мисол: container: 'body'. Ин хосият махсусан аз он сабаб муфид аст, ки он ба шумо имкон медиҳад, ки попопверро дар ҷараёни ҳуҷҷат дар наздикии унсури триггер ҷойгир кунед - ин имкон намедиҳад, ки popover ҳангоми тағир додани андозаи равзана аз элементи триггер шино кунад.
мазмун сатр | элемент | функсия ''

Арзиши мундариҷаи пешфарз, агар data-contentаттрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.
таъхир рақам | объект 0

Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { "show": 500, "hide": 100 }
html булӣ дурӯғ HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
ҷойгиркунӣ сатр | функсия 'дуруст'

Чӣ тавр ҷойгир кардани popover - auto | боло | поён | чап | рост.
Вақте autoки муайян карда мешавад, он поповро ба таври динамикӣ тағир медиҳад.

Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст thisба мисоли popover гузошта шудааст.
интихобкунанда сатр | дурӯғ дурӯғ Агар интихобкунанда таъмин карда шавад, объектҳои попов ба ҳадафҳои муайяншуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани поповҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед .
шаблон сатр '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Асоси HTML барои истифода ҳангоми сохтани popover.

Поповар ба titleсӯзандору ворид карда мешавад .popover-header.

Поповар ба contentсӯзандору ворид карда мешавад .popover-body.

.arrowтири поповар мегардад.

Унсури болоии печанда бояд .popoverсинф дошта бошад.
унвон сатр | элемент | функсия ''

Қимати унвони пешфарз, агар titleатрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.
триггер сатр 'клик' Чӣ тавр popover фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. 'дастӣ'-ро бо ягон триггери дигар муттаҳид кардан мумкин нест.
офсет рақам | сатр 0 Ҷуброни поповор нисбат ба ҳадафаш. Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Popper.js муроҷиат кунед .
ҷойгиркунии бозгашт сатр | массив 'флип' Иҷозат диҳед, ки кадом мавқеъро Поппер ҳангоми бозгашт истифода хоҳад кард. Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Popper.js муроҷиат кунед
сарҳад сатр | элемент 'scrollParent' Сарҳади маҳдудияти изофабори попов. Қиматҳои 'viewport', 'window', 'scrollParent', ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба Docs preventOverflow Popper.js муроҷиат кунед .

Атрибутҳои маълумот барои поповҳои инфиродӣ

Вариантҳо барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред.

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

Ҳодисаҳо

Навъи ҳодиса Тавсифи
show.bs.popover Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст.bs.popover Ин ҳодиса вақте оғоз мешавад, ки попов ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hide.bs.popover Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.popover Ин ҳодиса пас аз анҷоми пинҳон кардани попов аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
inserted.bs.popover Ин ҳодиса пас аз show.bs.popoverҳодиса, вақте ки қолаби popover ба DOM илова карда шудааст, оғоз мешавад. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})