Source

Кеңестер

Анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер атрибуттары арқылы CSS және JavaScript көмегімен теңшелетін Bootstrap кеңестерін қосуға арналған құжаттама және мысалдар.

Шолу

Құралдар плагинін пайдалану кезінде білу керек нәрселер:

  • Құрал кеңестері орналасу үшін үшінші тарап Popper.js кітапханасына сүйенеді . Кеңестер жұмыс істеуі үшін bootstrap.js алдында popper.min.js қосуыңыз керек немесе Popper.js бар 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()
})

Мысалдар

Көрсеткіштерді көру үшін төмендегі сілтемелердің үстіне апарыңыз:

Тар шалбар келесі деңгейдегі keffiyeh сіз олар туралы естімеген шығарсыз. Фотостенд сақал шикі джинсы баспа вегетариандық хабаршы сөмкесі Stumptown. Фермадан үстелге арналған сейтан, Mcsweeney's fixie sustainable quinoa 8-бит американдық киімінде терри Ричардсон винил камерасы бар . Beard Stumptown, кардигандар banh mi lomo thundercats. Тофу биодизель Вильямсбург Марфа, төрт локо Максвинидің вегетариандық камерасын тазартады. Шынында да ирониялық қолөнерші кез келген keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бір тегі кофе вирусы.

Құрал кеңестерінің төрт бағытын көру үшін төмендегі түймелердің үстіне апарыңыз: жоғарғы, оң, төменгі және сол жақ.

<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-responsiveboundary'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 өшіру көшуін қолданыңыз
контейнер жол | элемент | жалған жалған

Құрал кеңесін белгілі бір элементке қосады. Мысалы: container: 'body'. Бұл опция әсіресе пайдалы, себебі ол құрал кеңесін құжаттың ағынында іске қосу элементінің жанында орналастыруға мүмкіндік береді - бұл терезе өлшемін өзгерту кезінде құрал кеңесінің іске қосу элементінен алыстап кетуіне жол бермейді.
кешіктіру саны | объект 0

Құрал кеңесін көрсету және жасыру кідірісі (мс) - қолмен іске қосу түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { "show": 500, "hide": 100 }
html логикалық жалған

Құрал кеңесінде HTML-ге рұқсат беріңіз.

Егер шын болса, құралдар кеңесіндегі HTML тегтері құралдар кеңесінде titleкөрсетіледі. Егер жалған болса, jQuery textәдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады.

XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'жоғарғы'

Құрал кеңесін қалай орналастыруға болады - авто | жоғарғы | төменгі | сол жақ | дұрыс.
Көрсетілгенде, ол құралдар кеңесінің autoбағытын динамикалық түрде өзгертеді.

Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде құралдар кеңесі DOM түйінімен және екінші ретінде іске қосу элементі DOM түйінімен шақырылады. Мәтінмән thisқұралдар кеңесінің данасына орнатылады.
селектор жол | жалған жалған Егер селектор қамтамасыз етілсе, құралдар кеңесінің нысандары көрсетілген мақсаттарға беріледі. jQuery.onІс жүзінде бұл динамикалық қосылған DOM элементтеріне ( қолдау) құралдар кеңестерін қолдану үшін де қолданылады . Мынаны және ақпаратты мысалды қараңыз .
шаблон жол '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Құрал кеңесін жасау кезінде қолданылатын HTML негізі.

Құрал кеңесі titleішіне енгізіледі .tooltip-inner.

.arrowқұралдар кеңесінің көрсеткісіне айналады.

Ең сыртқы орауыш элементінде .tooltipкласс және класс болуы керек role="tooltip".
тақырып жол | элемент | функциясы ''

titleТөлсипат болмаса, әдепкі тақырып мәні .

thisЕгер функция берілсе, ол құрал кеңесі қосылған элементке сілтеме жиынымен шақырылады .
триггер жол «Меңзерді жылжыту»

Құрал кеңесі қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз.

'manual'.tooltip('show')құралдар кеңесі , .tooltip('hide')және .tooltip('toggle')әдістері арқылы бағдарламалы түрде іске қосылатынын көрсетеді ; бұл мәнді кез келген басқа триггермен біріктіру мүмкін емес.

'hover'өздігінен пернетақта арқылы іске қосылмайтын құралдар кеңестеріне әкеледі және пернетақта пайдаланушылары үшін бірдей ақпаратты жеткізудің балама әдістері болған жағдайда ғана пайдаланылуы керек.
офсет саны | жол | функциясы 0

Құрал кеңесінің мақсатына қатысты ығысуы.

Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде ығысу деректерін қамтитын нысанмен шақырылады. Функция бірдей құрылымы бар нысанды қайтаруы керек. Іске қосу элементі DOM түйіні екінші аргумент ретінде жіберіледі.

Қосымша ақпаратты Popper.js офсеттік құжаттарынан қараңыз .
fallbackPlacement жол | массив «айналу» Поппер қалпына келтіруде қандай позицияны қолданатынын көрсетуге рұқсат беріңіз. Қосымша ақпаратты Popper.js мінез-құлық құжаттарынан қараңыз
шекара жол | элемент 'scrollParent' Құрал кеңесінің толып кету шектеуінің шекарасы. 'viewport', 'window', 'scrollParent', немесе HTMLElement сілтемесінің мәндерін қабылдайды (тек JavaScript). Қосымша ақпаратты Popper.js's preventOverflow құжаттарынан қараңыз .
зарарсыздандыру логикалық рас Санитизацияны қосыңыз немесе өшіріңіз. Белсендірілген болса 'template'және 'title'опциялар тазартылады.
ақ тізім объект Әдепкі мән Рұқсат етілген төлсипаттар мен тегтерді қамтитын нысан
sanitizeFn null | функциясы null Мұнда сіз өзіңіздің дезинфекциялау функциясын бере аласыз. Санитизацияны орындау үшін арнайы кітапхананы пайдаланғыңыз келсе, бұл пайдалы болуы мүмкін.
popperConfig null | объект null Bootstrap әдепкі Popper.js конфигурациясын өзгерту үшін Popper.js конфигурациясын қараңыз .

Жеке кеңестер үшін деректер атрибуттары

Жеке кеңестерге арналған опцияларды жоғарыда түсіндірілгендей, деректер атрибуттарын пайдалану арқылы балама түрде көрсетуге болады.

Әдістері

Асинхронды әдістер мен ауысулар

Барлық API әдістері асинхронды және өтуді бастайды . Олар қоңырау шалушыға ауысу басталған бойда, бірақ аяқталмай тұрып қайтады . Сонымен қатар, өтпелі құрамдастағы әдіс шақыруы еленбейді .

Қосымша ақпарат алу үшін біздің JavaScript құжаттамасын қараңыз .

$().tooltip(options)

Құрал кеңесінің өңдеушісін элементтер жиынына тіркейді.

.tooltip('show')

Элементтің құралдар кеңесін көрсетеді. Құрал кеңесі нақты көрсетілмей тұрып (яғни оқиға болғанға дейін) қоңырау шалушыға оралады . shown.bs.tooltipБұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады. Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.

$('#element').tooltip('show')

.tooltip('hide')

Элементтің құралдар кеңесін жасырады. Құрал кеңесі шынымен жасырылғанға дейін (яғни hidden.bs.tooltipоқиға болғанға дейін) қоңырау шалушыға оралады. Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.

$('#element').tooltip('hide')

.tooltip('toggle')

Элементтің құралдар кеңесін ауыстырады. Құрал кеңесі нақты көрсетілмей немесе жасырылғанға дейін (яғни немесе оқиға болғанға дейін) қоңырау шалушыға оралады . Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.shown.bs.tooltiphidden.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...
})