Поповерҳо
Ҳуҷҷатҳо ва мисолҳо барои илова кардани 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
унсурҳо бояд дар элементи печанда фаъол карда шаванд. - Вақте ки аз лангарҳое, ки дар байни сатрҳои гуногун мепечанд, поповҳо дар байни паҳнои умумии лангарҳо марказонида мешаванд. Барои пешгирӣ кардани ин рафтори
.text-nowrap
худ истифода баред .<a>
- Поповҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз DOM пинҳон карда шаванд.
Хонданро давом диҳед, то бубинед, ки поповерҳо бо баъзе мисолҳо чӣ гуна кор мекунанд.
Як роҳи оғоз кардани ҳама поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggle
атрибути онҳост:
Вақте ки шумо дар як унсури волидайн якчанд услубҳо доред, ки ба поповор халал мерасонанд, шумо мехоҳед одатеро муайян кунед, container
то HTML-и popover дар дохили он элемент пайдо шавад.
Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.
Аз триггер истифода баред focus
, то поповҳоро дар клики навбатии корбар аз унсури дигар аз унсури ивазкунанда хориҷ кунед.
Нишонаи мушаххас барои клики навбатӣ лозим аст
Барои дуруст рафтори кросс-браузер ва байниплатформа, шумо бояд тегро истифода баред <a>
, на тег ва <button>
шумо инчунин бояд атрибутро дохил кунед tabindex
.
Унсурҳои дорои disabled
аттрибутӣ интерактивӣ нестанд, яъне корбарон наметавонанд онҳоро ба ҷояшон гузоранд ё клик кунанд, то попover (ё маслиҳати абзор) ангезанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки поповро аз парпеч ангезед <div>
ё <span>
ва pointer-events
элементи ғайрифаъолро бекор кунед.
Барои триггерҳои поповери ғайрифаъол, шумо инчунин метавонед бартарӣ data-trigger="hover"
диҳед, ки popover ҳамчун аксуламали фаврии визуалӣ барои корбарони шумо пайдо шавад, зеро онҳо интизор нашаванд, ки элементи ғайрифаъолро пахш кунанд.
Поповҳоро тавассути JavaScript фаъол созед:
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-animation=""
.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
аниматсия | булӣ | дуруст | Гузариши пажмурдашавии CSS-ро ба popover татбиқ кунед |
контейнер | сатр | элемент | дурӯғ | дурӯғ | Поповро ба унсури мушаххас замима мекунад. Мисол: |
мазмун | сатр | элемент | функсия | '' | Арзиши мундариҷаи пешфарз, агар Агар функсия дода шавад, он бо |
таъхир | рақам | объект | 0 | Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад Сохтори объект ин аст: |
html | булӣ | дурӯғ | HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, text усули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред. |
ҷойгиркунӣ | сатр | функсия | 'дуруст' | Чӣ тавр ҷойгир кардани popover - auto | боло | поён | чап | рост. Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст |
интихобкунанда | сатр | дурӯғ | дурӯғ | Агар интихобкунанда таъмин карда шавад, объектҳои попов ба ҳадафҳои муайяншуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани поповҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед . |
шаблон | сатр | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Асоси HTML барои истифода ҳангоми сохтани popover. Поповар ба Поповар ба
Унсури болоии печанда бояд |
унвон | сатр | элемент | функсия | '' | Қимати унвони пешфарз, агар Агар функсия дода шавад, он бо |
триггер | сатр | 'клик' | Чӣ тавр popover фаъол карда мешавад - пахш кунед | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manual бо ягон триггери дигар якчоя кардан мумкин нест. |
офсет | рақам | сатр | 0 | Ҷуброни поповор нисбат ба ҳадафаш. Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Popper.js муроҷиат кунед . |
ҷойгиркунии бозгашт | сатр | массив | 'флип' | Иҷозат диҳед, ки кадом мавқеъро Поппер ҳангоми бозгашт истифода хоҳад кард. Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Popper.js муроҷиат кунед |
сарҳад | сатр | элемент | 'scrollParent' | Сарҳади маҳдудияти изофабори попов. Қиматҳои 'viewport' , 'window' , 'scrollParent' , ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба Docs preventOverflow Popper.js муроҷиат кунед . |
Атрибутҳои маълумот барои поповҳои инфиродӣ
Вариантҳо барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред.
Поповҳоро барои коллексияи элементҳо оғоз мекунад.
Поповои элементро ошкор мекунад. Ба зангзананда пеш аз намоиши поповер бармегардад (яъне пеш аз shown.bs.popover
рух додани ҳодиса). Ин як ангезаи "дастӣ" ҳисобида мешавад. Поповарҳое, ки ҳам унвон ва ҳам мундариҷаи онҳо сифр дарозӣ доранд, ҳеҷ гоҳ намоиш дода намешаванд.
Попповери элементро пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани поповер бармегардад (яъне пеш аз hidden.bs.popover
рух додани ҳодиса). Ин як ангезаи "дастӣ" ҳисобида мешавад.
Поп-повери элементро иваз мекунад. Ба зангзананда пеш аз он ки popover воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.popover
ё ҳодиса) бармегардад. hidden.bs.popover
Ин як ангезаи "дастӣ" ҳисобида мешавад.
Поповери элементро пинҳон ва нобуд мекунад. Поповҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selector
опсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.
Ба поповери элемент имкон медиҳад, ки нишон дода шавад. Поповҳо бо нобаёнӣ фаъол карда мешаванд.
Қобилияти нишон додани поповери элементро нест мекунад. Попов танҳо дар сурати аз нав фаъол кардани он нишон дода мешавад.
Қобилияти нишон додан ё пинҳон кардани поп-повери элементро иваз мекунад.
Мавқеи поповери элементро навсозӣ мекунад.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.popover | Ин ҳодиса фавран ҳангоми show даъват кардани усули мисол сар мешавад. |
нишон дода шудааст.bs.popover | Ин ҳодиса вақте оғоз мешавад, ки попов ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
hide.bs.popover | Ин ҳодиса фавран ҳангоми hide даъват кардани усули инстансия оғоз мешавад. |
hidden.bs.popover | Ин ҳодиса пас аз анҷоми пинҳон кардани попов аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
inserted.bs.popover | Ин ҳодиса пас аз show.bs.popover ҳодиса, вақте ки қолаби popover ба DOM илова карда шудааст, оғоз мешавад. |