Кеңештер
Анимациялар жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары үчүн CSS3 аркылуу CSS жана JavaScript менен жеке Bootstrap инструменттерин кошуу үчүн документтер жана мисалдар.
Обзор
Tooltip плагинин колдонууда эмнени билүү керек:
- Куралдар кеңештери жайгаштыруу үчүн 3-тараптын Поппер китепканасына таянат . Сиз bootstrap.js алдында popper.min.js кошушуңуз керек же кеңештер иштеши үчүн Popper камтылган
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>
Колдонуу
Tooltip плагини мазмунду жана суроо-талап боюнча белгилерди жаратат жана демейки шартта куралдар кеңештерин триггер элементинен кийин жайгаштырат.
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
интерактивдүү эмес, башкача айтканда, колдонуучулар аларга көңүл буруп, курсорду басып же куралдын кеңешин (же попверди) иштете албайт. Чечим катары, сиз оролгон <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
опцияларын маалымат атрибуттары менен камсыздоо мүмкүн эмес экенин эске алыңыз.
аты | Type | Демейки | Description |
---|---|---|---|
анимация | логикалык | чын | Куралдар үчүн CSS өчүп өтүүнү колдонуңуз |
контейнер | string | элемент | жалган | жалган | Белгилүү бир элементке инструментти кошот. Мисал: |
кечиктирүү | саны | объект | 0 | Курал кеңешин көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат Объекттин структурасы: |
html | логикалык | жалган | Инструментте HTMLге уруксат бериңиз. Эгер чын болсо, инструментарийдеги HTML тегдери инструментарийде XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз. |
жайгаштыруу | string | функция | 'жогорку' | Куралды кантип жайгаштыруу керек - авто | top | түбү | сол | туура. Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары шаймандык DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст |
селектор | string | жалган | жалган | Эгерде селектор камсыз кылынса, инструментарий объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык кошулган DOM элементтерине ( jQuery.on колдоо) кеңештерди колдонуу үчүн колдонулат. Бул жана маалыматтык мисалды караңыз . |
шаблон | сап | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Инструментти түзүүдө колдонуу үчүн HTML базасы. Куралдуу
Эң сырткы ороочу элементте |
аталышы | string | элемент | функция | '' |
Функция берилсе, ал |
триггер | сап | "фокус" | Инструментарий кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз.
|
офсет | саны | string | функция | 0 | Курал тилкесинин максатына салыштырмалуу жылышы. Функция офсетті аныктоо үчүн колдонулганда, ал биринчи аргумент катары офсеттик маалыматтарды камтыган объект менен чакырылат. Функция ошол эле структурадагы объектти кайтарышы керек. Иштетүүчү элемент DOM түйүнү экинчи аргумент катары өткөрүлөт. Көбүрөөк маалымат алуу үчүн Поппердин офсеттик документтерине кайрылыңыз . |
fallbackPlacement | string | массив | 'флип' | Поппер кайра кайтарууда кайсы позицияны колдоноорун көрсөтүүгө уруксат бериңиз. Көбүрөөк маалымат алуу үчүн Поппердин жүрүм-турум документтерине кайрылыңыз |
customClass | string | функция | '' | Көрсөтүлгөндө, кеңешке класстарды кошуңуз. Бул класстар шаблондо көрсөтүлгөн класстарга кошумча кошулаарын эске алыңыз. Бир нече класстарды кошуу үчүн аларды боштуктар менен бөлүңүз: Сиз ошондой эле кошумча класс атын камтыган бир сапты кайтара турган функцияны өткөрүп бере аласыз. |
чек ара | string | элемент | 'scrollParent' | Куралдын ашыгынын чектөө чеги. 'viewport' , 'window' , 'scrollParent' , же HTMLElement шилтемесинин маанилерин кабыл алат (JavaScript гана). Көбүрөөк маалымат алуу үчүн Popper's preventOverflow docs караңыз . |
тазалоо | логикалык | чын | Санитизацияны иштетүү же өчүрүү. Эгер иштетилсе 'template' жана 'title' опциялар тазаланат. Биздин JavaScript документтерибиздин дезинфекциялоочу бөлүгүн караңыз . |
ак тизме | объект | Демейки маани | Уруксат берилген атрибуттарды жана тегдерди камтыган объект |
sanitizeFn | null | функция | нөл | Бул жерде сиз өзүңүздүн дезинфекциялоо функциясын бере аласыз. Санитизациялоо үчүн атайын китепкананы колдонууну кааласаңыз, бул пайдалуу болушу мүмкүн. |
popperConfig | null | объект | нөл | 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')
Окуялар
Окуя түрү | Description |
---|---|
show.bs.tooltip | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
көрсөтүлгөн.bs.куралдуу кеңеш | Бул окуя куралдын кеңеши колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
hide.bs.tooltip | Бул окуя hide инстанция ыкмасы чакырылганда дароо өчүрүлөт. |
hidden.bs.tooltip | Бул окуя куралдын кеңеши колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
inserted.bs.куралдуу кеңеш | Бул окуя show.bs.tooltip окуядан кийин, курал үлгүсү DOMга кошулгандан кийин өчүрүлөт. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})