Маслиҳатҳо
Ҳуҷҷатҳо ва мисолҳо барои илова кардани маслиҳатҳои фармоишии Bootstrap бо CSS ва JavaScript бо истифода аз CSS3 барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ.
Барраси
Чизҳоеро, ки ҳангоми истифодаи плагини абзор бояд донист:
- Маслиҳатҳо барои ҷойгиркунӣ ба китобхонаи тарафи сеюми Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред
bootstrap.bundle.min.js
/bootstrap.bundle.js
ки Попперро дар бар мегирад, то маслиҳатҳои асбобҳо кор кунанд! - Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, он
util.js
. - Маслиҳатҳои асбобҳо бо сабабҳои кор қабул карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
- Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
- Барои
container: 'body'
пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра). - Ба кор андохтани маслиҳатҳои асбобҳо дар унсурҳои пинҳон кор намекунад.
- Маслиҳатҳои асбобҳо барои
.disabled
ёdisabled
унсурҳо бояд дар унсури печанда фаъол карда шаванд. - Вақте ки аз гиперҳаволаҳое, ки сатрҳои сершуморро дарбар мегиранд, оғоз карда мешаванд, маслиҳатҳои асбобҳо дар марказ ҷойгир карда мешаванд. Барои пешгирӣ кардани ин рафтори
white-space: nowrap;
худ истифода баред .<a>
- Маслиҳатҳои асбобҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз DOM пинҳон карда шаванд.
- Маслиҳатҳои асбобҳоро ба шарофати як унсури дохили DOM сояҳо фаъол кардан мумкин аст.
prefers-reduced-motion
дархости медиа вобаста аст. Ба
қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .
Ҳама инро доред? Аҷоиб, биёед бубинем, ки онҳо бо чанд мисол чӣ гуна кор мекунанд.
Мисол: Маслиҳатҳои абзорро дар ҳама ҷо фаъол созед
Як роҳи оғоз кардани ҳамаи маслиҳатҳои асбобҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggle
атрибути онҳост:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Мисолхо
Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:
Матни ҷойнишин барои нишон додани баъзе пайвандҳои дохилӣ бо маслиҳатҳои асбобҳо. Ин ҳоло танҳо пуркунанда аст, на қотил. Мундариҷа дар ин ҷо танҳо барои тақлид кардани мавҷудияти матни воқеӣ ҷойгир карда шудааст . Ва ҳамаи ин танҳо барои он ки ба шумо тасаввурот диҳад, ки маслиҳатҳои асбобҳо ҳангоми истифода дар ҳолатҳои воқеӣ чӣ гуна хоҳанд буд. Пас, умедворем, ки шумо ҳоло дидед, ки чӣ гуна ин маслиҳатҳо оид ба истинодҳо , вақте ки шумо онҳоро дар сайт ё лоиҳаи худ истифода мекунед, дар амал кор карда метавонанд .
Барои дидани чор самти маслиҳатҳои асбобҳо: боло, рост, поён ва чапро ба болои тугмаҳои зер кашед.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Ва бо HTML фармоишии иловашуда:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Истифода
Васлкунаки асбобҳо мундариҷа ва аломатҳоро мувофиқи дархост тавлид мекунад ва ба таври нобаёнӣ маслиҳатҳои абзорро пас аз унсури триггери худ ҷойгир мекунад.
Маслиҳати абзорро тавассути JavaScript фаъол созед:
$('#example').tooltip(options)
Зиёд auto
ваscroll
Мавқеи маслиҳати асбобҳо кӯшиш мекунад, ки ҳангоми доштани контейнери волидайн overflow: auto
ё overflow: scroll
ба мо монанд ба таври худкор тағир ёбад .table-responsive
, аммо ба ҳар ҳол мавқеи ҷойгиршавии аслиро нигоҳ медорад. Барои ҳалли он, boundary
параметрро ба ғайр аз арзиши пешфарз ба ҳама чиз таъин кунед 'scrollParent'
, масалан 'window'
:
$('#example').tooltip({ boundary: 'window' })
Нишондиҳӣ
Нишондиҳии зарурӣ барои маслиҳати асбобҳо танҳо атрибут аст data
ва title
дар унсури HTML шумо мехоҳед маслиҳати абзор дошта бошед. Нишондиҳандаи тавлидшудаи маслиҳат хеле содда аст, гарчанде ки он мавқеъро талаб мекунад (ба таври нобаёнӣ, top
аз ҷониби плагин муқаррар карда шудааст).
Ворид кардани маслиҳатҳои асбобҳо барои корбарони клавиатура ва технологияи ёрирасон
Шумо бояд танҳо маслиҳатҳои абзорро ба унсурҳои HTML илова кунед, ки ба таври анъанавӣ ба клавиатура нигаронидашуда ва интерактивӣ мебошанд (ба монанди истинодҳо ё назорати шакл). Гарчанде ки унсурҳои HTML-и худсарона (ба монанди <span>
s) тавассути илова кардани атрибут метавон мутамарказ карда шавад tabindex="0"
, ин барои корбарони клавиатура таваққуфҳои эҳтимолан озори ва печидакунандаро дар унсурҳои ғайриинтерактивӣ барои корбарони клавиатура илова мекунад ва аксари технологияҳои ёрирасон дар айни замон маслиҳати абзорро эълон намекунанд. Илова бар ин, танҳо ба hover
триггер барои маслиҳати асбоби худ такя накунед, зеро ин барои корбарони клавиатура триггер кардани маслиҳатҳои асбобҳои шуморо ғайриимкон месозад.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Унсурҳои ғайрифаъол
Унсурҳои дорои disabled
атрибут интерактивӣ нестанд, яъне корбарон наметавонанд диққати худро ба он ҷо оваранд ё клик кунанд, то маслиҳати абзорро (ё popover) оғоз кунанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки маслиҳати абзорро аз як парпеч <div>
ё <span>
, ки ба таври идеалӣ бо истифода аз клавиатура нигаронида шудааст, ангезед tabindex="0"
ва pointer-events
унсури ғайрифаъолро аз байн баред.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Имконот
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-animation=""
.
sanitize
,
sanitizeFn
ва
whiteList
наметавонанд бо истифода аз атрибутҳои додаҳо таъмин карда шаванд.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
аниматсия | булӣ | дуруст | Гузариши пажмурдашудаи CSS-ро ба маслиҳати абзор татбиқ кунед |
контейнер | сатр | элемент | дурӯғ | дурӯғ | Маслиҳати абзорро ба унсури мушаххас замима мекунад. Мисол: |
таъхир | рақам | объект | 0 | Таъхири нишон додан ва пинҳон кардани маслиҳати асбобҳо (ms) - ба намуди триггери дастӣ дахл надорад Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад Сохтори объект ин аст: |
html | булӣ | дурӯғ | Дар маслиҳати асбобҳо ба HTML иҷозат диҳед. Агар дуруст бошад, барчаспҳои HTML дар маслиҳати асбобҳо дар маслиҳати абзор Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред. |
ҷойгиркунӣ | сатр | функсия | 'боло' | Маслиҳати абзорро чӣ гуна ҷойгир кардан мумкин аст - auto | боло | поён | чап | рост. Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи асбоби DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст |
интихобкунанда | сатр | дурӯғ | дурӯғ | Агар интихобкунанда таъмин карда шавад, объектҳои маслиҳати асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд. Дар амал, ин барои татбиқи маслиҳатҳои асбобҳо ба унсурҳои динамикӣ иловашудаи DOM ( jQuery.on дастгирӣ) истифода мешавад. Ин ва мисоли иттилоотиро бубинед . |
шаблон | сатр | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Асоси HTML барои истифода ҳангоми сохтани маслиҳати абзор. Маслиҳатҳои асбобҳо
Элементи сарпӯши берунӣ бояд |
унвон | сатр | элемент | функсия | '' | Қимати унвони пешфарз, агар Агар функсия дода шавад, он бо |
триггер | сатр | 'фокусро дар баргиранда' | Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед.
|
офсет | рақам | сатр | функсия | 0 | Гузаронидани маслиҳати абзор нисбат ба ҳадафаш. Вақте ки функсия барои муайян кардани ҷуброн истифода мешавад, он бо объекте даъват карда мешавад, ки маълумоти офсетро ҳамчун аргументи аввалини худ дорад. Функсия бояд объекти дорои сохтори якхеларо баргардонад. Элементи триггерии гиреҳи DOM ҳамчун далели дуюм интиқол дода мешавад. Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Поппер муроҷиат кунед . |
ҷойгиркунии бозгашт | сатр | массив | 'флип' | Иҷозат диҳед, ки кадом мавқеъро Поппер ҳангоми бозгашт истифода хоҳад кард. Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Поппер муроҷиат кунед |
CustomClass | сатр | функсия | '' | Вақте ки он нишон дода мешавад, ба маслиҳати асбобҳо синфҳоро илова кунед. Дар хотир доред, ки ин синфҳо ба ғайр аз ҳама синфҳои дар қолаб нишондодашуда илова карда мешаванд. Барои илова кардани якчанд синфҳо, онҳоро бо фосила ҷудо кунед: Шумо инчунин метавонед функсияеро гузаронед, ки бояд як сатри ягонаи дорои номҳои синфҳои иловагиро баргардонад. |
сарҳад | сатр | элемент | 'scrollParent' | Сарҳади маҳдудияти изофабори маслиҳати абзор. Қиматҳои 'viewport' , 'window' , 'scrollParent' , ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба ҳуҷҷатҳои preventOverflow Popper муроҷиат кунед . |
безарар кардан | булӣ | дуруст | Санитаризатсияро фаъол ё ғайрифаъол кунед. Агар фаъол карда шавад 'template' ва 'title' вариантҳо безарар карда мешаванд. Бахши безараргардониро дар ҳуҷҷатҳои JavaScript- и мо бубинед . |
Рӯйхати сафед | объект | Арзиши пешфарз | Объект, ки дорои атрибутҳо ва барчаспҳои иҷозатдодашуда мебошад |
безараргардонӣФн | null | функсия | нул | Дар ин ҷо шумо метавонед функсияи тозакунии худро таъмин кунед. Ин метавонад муфид бошад, агар шумо мехоҳед китобхонаи махсусро барои анҷом додани санитаризатсия истифода баред. |
popperConfig | null | объект | нул | Барои тағир додани конфигуратсияи пешфарзии Popper Bootstrap, ба конфигуратсияи Popper нигаред |
Атрибутҳои маълумот барои маслиҳатҳои инфиродӣ
Имконот барои маслиҳатҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.
Усулҳо
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .
$().tooltip(options)
Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.
.tooltip('show')
Маслиҳати асбоби элементро ошкор мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан нишон дода шавад (яъне пеш аз shown.bs.tooltip
рух додани ҳодиса) ба зангзан бармегардад. Ин як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад. Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
$('#element').tooltip('show')
.tooltip('hide')
Маслиҳати асбоби элементро пинҳон мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.tooltip
рух додани ҳодиса) ба зангзананда бармегардад. Ин як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад.
$('#element').tooltip('hide')
.tooltip('toggle')
Маслиҳати асбоби элементро иваз мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.tooltip
ё ҳодиса) ба зангзан бармегардад. hidden.bs.tooltip
Ин як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад.
$('#element').tooltip('toggle')
.tooltip('dispose')
Маслиҳати асбоби элементро пинҳон ва нобуд мекунад. Маслиҳатҳои асбобҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selector
опсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.
$('#element').tooltip('dispose')
.tooltip('enable')
Маслиҳати асбоби элементро имкон медиҳад, ки нишон дода шавад. Маслиҳатҳои асбобҳо бо нобаёнӣ фаъол карда мешаванд.
$('#element').tooltip('enable')
.tooltip('disable')
Қобилияти нишон додани банди асбоби элементро нест мекунад. Маслиҳати абзор танҳо дар сурати аз нав фаъол кардани он нишон дода мешавад.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Қобилияти нишон додан ё пинҳон кардани банди асбоби элементро иваз мекунад.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Мавқеи маслиҳати элементро навсозӣ мекунад.
$('#element').tooltip('update')
Ҳодисаҳо
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.tooltip | Ин ҳодиса фавран ҳангоми show даъват кардани усули инстансия оғоз меёбад. |
нишон дода шудааст | Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
hide.bs.tooltip | Ин ҳодиса фавран ҳангоми hide даъват кардани усули инстансия оғоз мешавад. |
hidden.bs.tooltip | Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор аз корбар пинҳон карда шавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
inserted.bs.tooltip | Ин ҳодиса пас аз show.bs.tooltip ҳодиса, вақте ки қолаби маслиҳати абзор ба DOM илова карда шудааст, оғоз мешавад. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})