Кеңестер
Анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер атрибуттары арқылы CSS және JavaScript көмегімен теңшелетін Bootstrap кеңестерін қосуға арналған құжаттама және мысалдар.
Шолу
Құрал кеңесінің плагинін пайдалану кезінде білу керек нәрселер:
- Кеңестер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Кеңестер жұмыс істеуі үшін bootstrap.js алдында popper.min.js қосуыңыз керек немесе Popper бар
bootstrap.bundle.min.js
/ пайдалануыңыз керекbootstrap.bundle.js
! - Егер сіз JavaScript-ті дереккөзден құрастырсаңыз, ол
util.js
. - Құрал кеңестері өнімділік себептеріне байланысты қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
- Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.
container: 'body'
Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .- Жасырын элементтерде кеңестерді іске қосу жұмыс істемейді.
.disabled
Орау элементінде немесе элементтерге арналған құралдар кеңестеріdisabled
іске қосылуы керек.- Бірнеше жолды қамтитын гиперсілтемелерден іске қосылғанда, құралдар кеңестері ортаға қойылады. Бұл әрекетті болдырмау үшін s
white-space: nowrap;
on yours пайдаланыңыз .<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
интерактивті емес, яғни пайдаланушылар кеңесті (немесе қалқымалы терезені) іске қосу үшін оларды фокустай алмайды, меңзерді апара алмайды немесе баса алмайды. Шешім ретінде сіз орауыштан құрал кеңесін іске қосқыңыз келеді <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 | Құрал кеңесін көрсету және жасыру кідірісі (мс) - қолмен іске қосу түріне қолданылмайды Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады Объектінің құрылымы – бұл: |
html | логикалық | жалған | Құрал кеңесінде HTML-ге рұқсат беріңіз. Егер шын болса, құралдар кеңесіндегі HTML тегтері құралдар кеңесінде XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз. |
орналастыру | жол | функциясы | 'жоғарғы' | Құрал кеңесін қалай орналастыруға болады - авто | жоғарғы | төменгі | сол жақ | дұрыс. Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде құралдар кеңесі DOM түйінімен және екінші ретінде іске қосу элементі DOM түйінімен шақырылады. Мәтінмән |
селектор | жол | жалған | жалған | Егер селектор қамтамасыз етілсе, құралдар кеңесінің нысандары көрсетілген мақсаттарға беріледі. jQuery.on Іс жүзінде бұл динамикалық қосылған DOM элементтеріне ( қолдау) құралдар кеңестерін қолдану үшін де қолданылады . Мынаны және ақпаратты мысалды қараңыз . |
шаблон | жол | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Құрал кеңесін жасау кезінде қолданылатын HTML негізі. Құрал кеңесі
Ең сыртқы орауыш элементінде |
тақырып | жол | элемент | функциясы | '' |
|
триггер | жол | «Меңзерді жылжыту» | Құрал кеңесі қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз.
|
офсет | саны | жол | функциясы | 0 | Құрал кеңесінің мақсатына қатысты ығысуы. Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде ығысу деректерін қамтитын нысанмен шақырылады. Функция бірдей құрылымы бар нысанды қайтаруы керек. Іске қосу элементі DOM түйіні екінші аргумент ретінде жіберіледі. Қосымша ақпаратты Поппердің офсеттік құжаттарынан қараңыз . |
fallbackPlacement | жол | массив | «айналу» | Поппер қалпына келтіруде қандай позицияны қолданатынын көрсетуге рұқсат беріңіз. Қосымша ақпаратты Поппердің мінез-құлық құжаттарынан қараңыз |
customClass | жол | функциясы | '' | Көрсетілген кезде құралдар кеңесіне сыныптарды қосыңыз. Бұл сыныптар үлгіде көрсетілген кез келген сыныптарға қосымша қосылатынын ескеріңіз. Бірнеше сыныптарды қосу үшін оларды бос орындармен бөліңіз: Сондай-ақ қосымша сынып атаулары бар жалғыз жолды қайтаратын функцияны беруге болады. |
шекара | жол | элемент | 'scrollParent' | Құрал кеңесінің толып кету шектеуінің шекарасы. 'viewport' , 'window' , 'scrollParent' , немесе HTMLElement сілтемесінің мәндерін қабылдайды (тек JavaScript). Қосымша ақпарат алу үшін Поппердің алдын алу Толып кету құжаттарын қараңыз . |
зарарсыздандыру | логикалық | рас | Санитизацияны қосыңыз немесе өшіріңіз. Белсендірілген болса 'template' және 'title' опциялар тазартылады. Біздің JavaScript құжаттамасындағы санитария бөлімін қараңыз . |
ақ тізім | объект | Әдепкі мән | Рұқсат етілген төлсипаттар мен тегтерді қамтитын нысан |
sanitizeFn | null | функциясы | null | Мұнда сіз өзіңіздің дезинфекциялау функциясын бере аласыз. Санитизацияны орындау үшін арнайы кітапхананы пайдаланғыңыз келсе, бұл пайдалы болуы мүмкін. |
popperConfig | null | объект | 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')
Оқиғалар
Оқиға түрі | Сипаттама |
---|---|
show.bs.көмекші | show Бұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады. |
көрсетілген.bs.көмекші | Бұл оқиға құралдар кеңесі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
hide.bs.tooltip | Бұл оқиға даналық hide әдісі шақырылған кезде бірден іске қосылады. |
hidden.bs.tooltip | Бұл оқиға құралдар кеңесін пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
кірістірілген.б.көмекші | Бұл оқиға құрал show.bs.tooltip кеңес үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})