Поповерууд
Танай сайтын аль ч элементэд iOS-д байдаг шиг Bootstrap popovers нэмэх баримт бичиг, жишээнүүд.
Тойм
Popover залгаасыг ашиглахдаа анхаарах зүйлс:
- Поповерууд байрлал тогтоохдоо гуравдагч талын Popper.js номын санд тулгуурладаг . Та bootstrap.js-н өмнө popper.min.js -г оруулах эсвэл поповер ажиллахын тулд Popper.js-г агуулсан
bootstrap.bundle.min.js
/ ашиглах ёстой!bootstrap.bundle.js
- Поповерууд нь хараат байдлаар tooltip залгаасыг шаарддаг.
- Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа бол энэ нь
util.js
. - Поповерууд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
- Тэг урт
title
баcontent
утгууд нь поповыг хэзээ ч харуулахгүй. container: 'body'
Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .- Нууцлагдмал элементүүд дээр поповеруудыг өдөөх нь ажиллахгүй.
- Поповер
.disabled
эсвэлdisabled
элементүүдийг боодлын элемент дээр өдөөх ёстой. - Олон мөрөнд ороосон зангуунаас өдөөх үед поповерууд зангууны нийт өргөний хооронд төвлөрөх болно. Энэ зан үйлээс зайлсхийхийн тулд
.text-nowrap
өөрийн s дээр ашиглаарай .<a>
- DOM-аас харгалзах элементүүдийг устгахаас өмнө поповуудыг нуусан байх ёстой.
- Сүүдрийн DOM доторх элементийн ачаар поповеруудыг өдөөж болно.
Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motion
медиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .
Зарим жишээн дээр поповерууд хэрхэн ажилладагийг харахын тулд үргэлжлүүлэн уншина уу.
Жишээ: Хаа сайгүй поповеруудыг идэвхжүүл
Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг data-toggle
шинж чанараар нь сонгох явдал юм:
Жишээ нь: container
Сонголтыг ашиглаж байна
Хэрэв таны эх элемент дээр поповерт саад болох зарим загвар байгаа бол container
поповерын HTML нь тухайн элемент дотор харагдахын тулд өөрчлөн тохируулахыг хүсэх болно.
Жишээ
Дөрвөн чиглэл
Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн.
Дараагийн товшилтоор хаах
focus
Хэрэглэгч сэлгэх элементээс өөр элемент дээр дараагийн товшилтоор поповеруудыг хаахын тулд гохыг ашиглана уу.
Дараагийн товшилтыг хаахад тусгай тэмдэглэгээ хийх шаардлагатай
Хөтөч, платформ хоорондын зөв ажиллахын тулд та шошгыг биш харин тагийг ашиглах ёстой <a>
бөгөөд мөн шинж <button>
чанарыг агуулсан байх ёстой tabindex
.
Идэвхгүй элементүүд
Атрибуттай элементүүд нь disabled
интерактив биш тул хэрэглэгчид хулганаа аваачиж эсвэл товшиж popover (эсвэл хэрэгслийн зөвлөмж)-ийг идэвхжүүлэх боломжгүй гэсэн үг юм. Үүнийг шийдэхийн тулд та боодолоос поповыг өдөөх <div>
эсвэл идэвхгүй болсон элемент дээрхийг <span>
хүчингүй болгохыг хүсэх болно.pointer-events
Идэвхгүй болсон поповер триггерүүдийн хувьд та поповер нь идэвхгүй болсон элемент дээр дарнаdata-trigger="hover"
гэж бодохгүй байгаа тул хэрэглэгчдэд шууд харааны санал болгож харуулахыг илүүд үзэж болно.
Хэрэглээ
JavaScript-ээр поповеруудыг идэвхжүүлэх:
GPU хурдатгал
GPU хурдатгал болон өөрчлөгдсөн системийн DPI зэргээс шалтгаалан Windows 10 төхөөрөмж дээр поповерууд заримдаа бүдэг харагддаг. V4-д үүнийг шийдвэрлэх арга бол popover дээр шаардлагатай бол GPU хурдатгалыг идэвхгүй болгох явдал юм.
Санал болгож буй засвар:
Гар болон туслах технологийн хэрэглэгчдэд зориулсан поповеруудыг ажиллуулж байна
Гар хэрэглэгчдэд таны поповеруудыг идэвхжүүлэхийг зөвшөөрөхийн тулд та тэдгээрийг зөвхөн гар дээр төвлөрч, интерактив (холбоос эсвэл маягтын удирдлага гэх мэт) HTML элементүүдэд нэмэх хэрэгтэй. Хэдийгээр дурын HTML элементүүдийг ( <span>
s гэх мэт) атрибут нэмснээр анхаарлаа tabindex="0"
төвлөрүүлэх боломжтой боловч энэ нь гар хэрэглэгчдэд зориулсан интерактив бус элементүүдэд залхмаар, төөрөгдүүлсэн цонхны цэгүүдийг нэмж өгөх бөгөөд одоогоор ихэнх туслах технологиуд энэ нөхцөлд поповын агуулгыг зарладаггүй. . hover
Нэмж дурдахад, зөвхөн поповеруудыг гох гэж бүү найд , учир нь энэ нь гар хэрэглэгчдэд тэднийг өдөөх боломжгүй болгоно.
Сонголтыг ашиглан баялаг, бүтэцлэгдсэн HTML-г поповогт оруулах боломжтой html
ч бид танд хэт их контент нэмэхээс зайлсхийхийг зөвлөж байна. Поповерууд одоогоор ажиллаж байгаа арга нь нэг удаа гарч ирсний дараа контент нь aria-describedby
атрибут бүхий гох элементтэй холбогддог. Үүний үр дүнд поповерын агуулгыг бүхэлд нь туслах технологийн хэрэглэгчдэд нэг урт, тасралтгүй урсгал болгон зарлах болно.
Нэмж дурдахад, интерактив удирдлага (формат элемент эсвэл холбоос гэх мэт) өөрийн попover-д (эдгээр элементүүдийг whiteList
эсвэл зөвшөөрөгдсөн шинж чанарууд болон шошгонд нэмэх замаар) оруулах боломжтой ч одоогоор поповер нь гарын фокус дарааллыг удирддаггүй гэдгийг анхаарна уу. Гарын хэрэглэгч popover-г нээх үед гол анхаарлаа өдөөх элемент дээр үлдээдэг бөгөөд поповер нь ихэвчлэн баримт бичгийн бүтцэд гохыг шууд дагаж мөрддөггүй тул урагшлах/дарах баталгаа байхгүй.TABгар хэрэглэгчийг popover руу шилжүүлэх болно. Товчхондоо, зүгээр л поповер дээр интерактив удирдлага нэмэх нь эдгээр хяналтыг гар хэрэглэгчид болон туслах технологийн хэрэглэгчдэд ашиглах боломжгүй/ашиглах боломжгүй, эсвэл хамгийн багадаа логик бус ерөнхий фокус дараалал үүсгэх магадлалтай. Эдгээр тохиолдолд оронд нь модаль харилцах цонхыг ашиглахыг бодоорой.
Сонголтууд
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-animation=""
.
Аюулгүй байдлын үүднээс sanitize
, sanitizeFn
болон whiteList
тохируулгуудыг өгөгдлийн шинж чанаруудыг ашиглан нийлүүлэх боломжгүйг анхаарна уу.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
хөдөлгөөнт дүрс | логик | үнэн | Popover руу CSS бүдгэрүүлэх шилжилтийг ашиглана уу |
сав | мөр | элемент | худлаа | худлаа | Тодорхой элементэд поповыг хавсаргана. Жишээ нь: |
агуулга | мөр | элемент | функц | '' |
Хэрэв функц өгөгдсөн |
саатал | тоо | обьект | 0 | Поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ Объектын бүтэц нь: |
html | логик | худлаа | Popover руу HTML оруулна уу. Хэрэв худал бол jQuery-ийн text аргыг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу. |
байрлуулах | мөр | функц | 'зөв' | Поповерыг хэрхэн байрлуулах вэ - auto | дээд | доод | зүүн | зөв. Байршлыг тодорхойлоход функцийг ашиглах үед түүнийг эхний аргумент болгон popover DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. Контекстийг поповын |
сонгогч | мөр | худлаа | худлаа | Хэрэв сонгогчийг өгсөн бол popover объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү . |
загвар | мөр | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Popover үүсгэх үед ашиглах үндсэн HTML. Поповерыг . Поповерыг .
Хамгийн гадна талын боодлын элемент нь |
гарчиг | мөр | элемент | функц | '' |
Хэрэв функц өгөгдсөн |
гох | мөр | "товших" | Поповер хэрхэн идэвхждэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. manual бусад өдөөгчтэй хослуулах боломжгүй. |
офсет | тоо | мөр | 0 | Зорилтот үзүүлэлттэй харьцуулахад поповын офсет. Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү . |
backbackPlacement | мөр | массив | 'эргэх' | Поппер буцах үед ямар байрлалыг ашиглахыг зааж өгөхийг зөвшөөр. Дэлгэрэнгүй мэдээллийг Popper.js-ийн зан үйлийн баримт бичгүүдээс үзнэ үү |
хил хязгаар | мөр | элемент | 'scrollParent' | Overflow constraint boundary of the popover. Accepts the values of 'viewport' , 'window' , 'scrollParent' , or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs. |
sanitize | boolean | true | Enable or disable the sanitization. If activated 'template' , 'content' and 'title' options will be sanitized. |
whiteList | object | Default value | Object which contains allowed attributes and tags |
sanitizeFn | null | function | null | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
popperConfig | null | object | null | To change Bootstrap's default Popper.js config, see Popper.js's configuration |
Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
$().popover(options)
Initializes popovers for an element collection.
.popover('show')
Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover
event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
.popover('hide')
Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover
event occurs). This is considered a “manual” triggering of the popover.
.popover('toggle')
Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover
or hidden.bs.popover
event occurs). This is considered a “manual” triggering of the popover.
.popover('dispose')
Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector
option) cannot be individually destroyed on descendant trigger elements.
.popover('enable')
Gives an element’s popover the ability to be shown. Popovers are enabled by default.
.popover('disable')
Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.
.popover('toggleEnabled')
Toggles the ability for an element’s popover to be shown or hidden.
.popover('update')
Updates the position of an element’s popover.
Events
Event Type | Description |
---|---|
show.bs.popover | This event fires immediately when the show instance method is called. |
shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.popover | hide Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.popover | Поповыг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно). |
оруулсан.bs.popover | show.bs.popover DOM-д поповын загварыг нэмсэн тохиолдолд энэ үйл явдал идэвхгүй болно . |