Source

Поповерлер

Құжаттама және iOS жүйесінде табылғандар сияқты Bootstrap қалқымалы файлдарын сайтыңыздағы кез келген элементке қосу мысалдары.

Шолу

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

  • Поповерлер орналасу үшін үшінші тарап Popper.js кітапханасына сүйенеді . bootstrap.js алдында popper.min.js қосу керек немесе popovers жұмыс істеуі үшін Popper.js бар bootstrap.bundle.min.js/ пайдалану керек!bootstrap.bundle.js
  • Popovers тәуелділік ретінде құралдар тақтасының плагинін қажет етеді.
  • Егер сіз JavaScript-ті дереккөзден құрастырсаңыз, олutil.js .
  • Popovers өнімділік себептері бойынша қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
  • Нөлдік ұзындық titleпен contentмәндер ешқашан қалқымалы терезені көрсетпейді.
  • container: 'body'Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .
  • Жасырын элементтерде қалқандарды іске қосу жұмыс істемейді.
  • .disabledҚаптама элементінде немесе disabledэлементтер үшін поповерлер іске қосылуы керек.
  • Бірнеше жолдар бойымен оралатын якорьлерден іске қосылғанда, қалқымалы белгілер якорлардың жалпы ені арасында ортаға орналасады. Бұл әрекетті болдырмау үшін s white-space: nowrap;on your s пайдаланыңыз .<a>
  • Поповерлер олардың сәйкес элементтері DOM ішінен жойылмай тұрып жасырылуы керек.

Кейбір мысалдармен поповерлер қалай жұмыс істейтінін көру үшін оқуды жалғастырыңыз.

Мысал: барлық жерде қалқымалы терезелерді қосыңыз

Беттегі барлық қалқымалы терезелерді инициализациялаудың бір жолы оларды data-toggleатрибуты бойынша таңдау болады:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Мысалы: containerопцияны пайдалану

Бастапқы элементте қалқымалы файлға кедергі келтіретін кейбір мәнерлер болған кезде, containerоның орнына қалқымалы файлдың HTML-сі сол элемент ішінде пайда болатындай реттелетін параметрді көрсеткіңіз келеді.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Мысал

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Төрт бағыт

Төрт опция қолжетімді: жоғарғы, оң жақ, төменгі және солға тураланған.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Келесі басылғанда бас тарту

focusТриггерді ауыстырып-қосқыш элементтен басқа элементті пайдаланушы келесі рет басқанда қалқымалы терезелерді алып тастау үшін пайдаланыңыз .

Келесі нұқу кезінде өшіру үшін арнайы белгілеу қажет

Кросс-шолғыш және кросс-платформа әрекеті үшін тегті емес, тегті пайдалану керек <a>, сонымен қатар <button>төлсипатты қамту керек tabindex.

Қабылданбаған попов 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Өшірілген элементтер

Төлсипатқа ие элементтер disabledинтерактивті емес, яғни пайдаланушылар қалқымалы терезені (немесе құралдар кеңесін) іске қосу үшін меңзерді апара алмайды немесе баса алмайды. Шешім ретінде сіз қаптамадан қалқымалы әрекетті іске қосқыңыз келеді <div>немесе өшірілген элементтегі элементті <span>қайта анықтағыңыз келеді .pointer-events

Өшірілген қалқымалы триггерлер үшін қалқымалы триггерлер пайдаланушыларыңызға дереу көрнекі кері байланыс ретінде пайда болуын қалауыңыз мүмкін, себебі олар өшірілген элементті басудыdata-trigger="hover" күтпеуі мүмкін .

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Қолданылуы

JavaScript арқылы popovers қосыңыз:

$('#example').popover(options)

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-animation="".

Аты Түр Әдепкі Сипаттама
анимация логикалық рас Қалқымалы файлға CSS өшіру көшуін қолданыңыз
контейнер жол | элемент | жалған жалған

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

data-contentТөлсипат болмаса, әдепкі мазмұн мәні .

Егер функция берілсе, ол thisқалқымалы элемент қосылған элементке сілтеме жиынымен шақырылады.
кешіктіру саны | объект 0

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

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

Объектінің құрылымы – бұл:delay: { "show": 500, "hide": 100 }
html логикалық жалған Қалқымалы файлға HTML енгізіңіз. Егер жалған болса, jQuery textәдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'дұрыс'

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

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

Қалқымалы файлды жасау кезінде қолданылатын негізгі HTML.

Попопвер ішке titleенгізіледі .popover-header.

Попопвер ішке contentенгізіледі .popover-body.

.arrowпоповтің көрсеткісіне айналады.

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

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

Егер функция берілсе, ол thisқалқымалы элемент қосылған элементке сілтеме жиынымен шақырылады.
триггер жол 'басу' Popover қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. «Қолмен» кез келген басқа триггермен біріктірілмейді.
офсет саны | жол 0 Попопвердің мақсатқа қатысты ығысуы. Қосымша ақпаратты Popper.js офсеттік құжаттарынан қараңыз .
fallbackPlacement жол | массив «айналу» Поппер қалпына келтіруде қандай позицияны қолданатынын көрсетуге рұқсат беріңіз. Қосымша ақпаратты Popper.js мінез-құлық құжаттарынан қараңыз
шекара жол | элемент 'scrollParent' Қалқымалы құрылғының толып кету шектеуінің шекарасы. 'viewport', 'window', 'scrollParent', немесе HTMLElement сілтемесінің мәндерін қабылдайды (тек JavaScript). Қосымша ақпаратты Popper.js's preventOverflow құжаттарынан қараңыз .

Жеке қалқандарға арналған деректер атрибуттары

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

Әдістері

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

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

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

$().popover(options)

Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

$('#element').popover('toggle')

.popover('dispose')

Элементтің қалқымалы қалпын жасырады және жояды. Делегацияны пайдаланатын поповерлер ( опция арқылы жасалғанselector ) ұрпақ триггер элементтерінде жеке жойылмайды.

$('#element').popover('dispose')

.popover('enable')

Элементтің қалқымалы терезесін көрсету мүмкіндігін береді. Popovers әдепкі бойынша қосылады.

$('#element').popover('enable')

.popover('disable')

Элементтің қалқымалы нұсқасын көрсету мүмкіндігін жояды. Қалқымалы құрылғы қайта қосылғанда ғана көрсетіледі.

$('#element').popover('disable')

.popover('toggleEnabled')

Элементтің қалқымалы нұсқасын көрсету немесе жасыру мүмкіндігін ауыстырады.

$('#element').popover('toggleEnabled')

.popover('update')

Элементтің қалқымалы қалқымалы орнын жаңартады.

$('#element').popover('update')

Оқиғалар

Оқиға түрі Сипаттама
show.bs.popover showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген.bs.popover Бұл оқиға қалқымалы файл пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
hide.bs.popover Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
hidden.bs.popover Бұл оқиға қалқымалы файлды пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
inserted.bs.popover Бұл оқиға show.bs.popoverpopover үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})