پۆپۆڤەرز
بەڵگەنامە و نموونە بۆ زیادکردنی Bootstrap popovers، وەک ئەوانەی لە iOS دەبینرێن، بۆ هەر توخمێک لە ماڵپەڕەکەتدا.
تێڕوانینێکی گشتی
ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی popover:
- پۆپۆڤەرەکان پشت بە کتێبخانەی لایەنی سێیەم دەبەستن پۆپەر بۆ جێگیرکردن. پێویستە پێش bootstrap.js popper.min.js دابنێیت یان
bootstrap.bundle.min.js
/ بەکاربهێنیتbootstrap.bundle.js
کە Popper لەخۆدەگرێت بۆ ئەوەی popovers کاربکات! - Popovers پێویستیان بە پێوەکراوەکەی tooltip وەک وابەستەیەک هەیە.
- ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بە
util.js
. - Popovers بە هۆکاری کاراییەوە بەشداریکردنە، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
- سفر-درێژی
title
وcontent
بەهاکان هەرگیز پۆپۆڤەرێک نیشان نادەن. - دیاری بکە
container: 'body'
بۆ ئەوەی کێشەی ڕەندەرکردن لە پێکهاتە ئاڵۆزترەکاندا ڕوونەدات (وەک گروپەکانی چوونەژوورەوەمان، گروپەکانی دوگمەکان و هتد). - دەستپێکردنی پۆپۆڤەرەکان لەسەر توخمە شاراوەکان کار ناکات.
- پۆپۆڤەرەکان بۆ
.disabled
یانdisabled
توخمەکان دەبێت لەسەر توخمێکی پێچراو دەستپێبکرێن. - کاتێک لە لەنگەرەکانەوە دەستپێدەکرێت کە بەسەر چەندین هێڵدا دەپێچنەوە، پۆپۆڤەرەکان لە نێوان پانایی گشتی لەنگەرەکاندا لە ناوەڕاستدا دەبن.
.text-nowrap
لەسەر s ـەکەت بەکاربهێنە<a>
بۆ ئەوەی لەم ڕەفتارە دوور بکەویتەوە. - دەبێت پۆپۆڤەرەکان بشاردرێنەوە پێش ئەوەی توخمە هاوبەشەکانیان لە DOM لاببرێن.
- دەتوانرێت Popovers بەهۆی توخمێک لە ناو DOM ی سێبەردا دەستپێبکرێت.
prefers-reduced-motion
پرسیاری میدیایە. سەیری
بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .
بەردەوام بە لە خوێندنەوە بۆ ئەوەی بزانیت چۆن پۆپۆڤەرەکان کاردەکەن بە هەندێک نموونە.
نموونە: لە هەموو شوێنێک popovers چالاک بکە
یەکێک لە ڕێگاکانی دەستپێکردنی هەموو پۆپۆڤەرەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی 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="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
لە کلیکی داهاتوودا لە کارەکەت دوور بخەرەوە
تریگەر بەکاربهێنە focus
بۆ ڕەتکردنەوەی پۆپۆڤەرەکان لەسەر کلیکی داهاتووی بەکارهێنەر لەسەر توخمێکی جیاواز لە توخمەکەی toggle.
پێویستە نیشانەیەکی تایبەت بۆ ڕەتکردنەوە لەسەر کلیککردنی داهاتوو
بۆ هەڵسوکەوتی دروستی cross-browser و cross-platform، پێویستە تاگەکە بەکاربهێنیت <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
تایبەتمەندیەکەیان هەیە کارلێککار نین، واتە بەکارهێنەران ناتوانن پەنجەیان لەسەر دابنێن یان کلیکیان لەسەر بکەن بۆ دەستپێکردنی پۆپۆڤەر (یان ئامۆژگاری ئامراز). وەک چارەسەرێک، دەتەوێت popover لە پێچەرێکەوە دەستپێبکەیت <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>
بەکارهێنان
چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:
$('#example').popover(options)
خێراکردنی GPU
هەندێک جار پۆپۆڤەرەکان لەسەر ئامێرەکانی ویندۆز ١٠ بە کاڵ دەردەکەون بەهۆی خێراکردنی GPU و دەستکاریکراوی DPI ی سیستەم. چارەسەر بۆ ئەمە لە v4 بریتییە لە لەکارخستنی خێراکردنی GPU بەپێی پێویست لەسەر popovers ەکانت.
چاککردنی پێشنیار کراو:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
کردنی پۆپۆڤەرەکان بۆ بەکارهێنەرانی کیبۆرد و تەکنەلۆژیای یارمەتیدەر کاربکەن
بۆ ئەوەی ڕێگە بە بەکارهێنەرانی کیبۆرد بدەیت کە پۆپۆڤەرەکانت چالاک بکەن، تەنها پێویستە زیادیان بکەیت بۆ ئەو توخمانەی HTML کە بە شێوەیەکی نەریتی فۆکەس لەسەر کیبۆرد و کارلێککەرن (وەک بەستەر یان کۆنتڕۆڵی فۆڕم). هەرچەندە دەتوانرێت توخمە HTML ی ئارەزوومەندانە (وەک <span>
s) بە زیادکردنی تایبەتمەندییەکە بکرێتە فۆکەس tabindex="0"
، بەڵام ئەمە وەستانی تابەکانی ئەگەری بێزارکەر و سەرلێشێواو لەسەر توخمە ناکارلێککەرەکان بۆ بەکارهێنەرانی کیبۆرد زیاد دەکات، و زۆربەی تەکنەلۆژیا یارمەتیدەرەکان لە ئێستادا ناوەڕۆکی popover لەم دۆخەدا ڕاناگەیەنن . سەرەڕای ئەوەش، تەنها پشت بەو شتانە مەبەستە hover
وەک دەستپێکەر بۆ پۆپۆڤەرەکانت، چونکە ئەمە وا دەکات کە مەحاڵ بێت دەستپێکردنیان بۆ بەکارهێنەرانی کیبۆرد.
لە کاتێکدا دەتوانیت HTML دەوڵەمەند و پێکهاتەدار لە popovers بە html
بژاردەکە دابنێیت، ئێمە بە توندی پێشنیار دەکەین کە خۆت بەدوور بگرێت لە زیادکردنی بڕێکی زۆر لە ناوەڕۆک. شێوازی کارکردنی پۆپۆڤەرەکان لە ئێستادا ئەوەیە کە، کاتێک پیشان دەدرێن، ناوەڕۆکەکەیان بەستراوەتەوە بە توخمە دەستپێکەرەکە بە aria-describedby
تایبەتمەندییەکە. لە ئەنجامدا، تەواوی ناوەڕۆکی popover وەک یەک ڕژێمی درێژ و بێ پچڕان بە بەکارهێنەرانی تەکنەلۆژیای یارمەتیدەر ڕادەگەیەنرێت.
سەرەڕای ئەوە، لە کاتێکدا دەتوانرێت کۆنتڕۆڵە کارلێککارەکان (وەک توخمەکانی فۆڕم یان بەستەرەکان) لە پۆپۆڤەرەکەتدا جێگیر بکرێت (بە زیادکردنی ئەم توخمانە بۆ whiteList
تایبەتمەندی و تاگەکانی یان ڕێگەپێدراوەکان)، ئاگاداربە کە لە ئێستادا پۆپۆڤەر ڕێکخستنی فۆکۆسی کیبۆرد بەڕێوە نابات. کاتێک بەکارهێنەرێکی کیبۆرد پۆپۆڤەرێک دەکاتەوە، فۆکەس لەسەر توخمە دەستپێکەرەکە دەمێنێتەوە، و بەو پێیەی پۆپۆڤەرەکە بەزۆری دەستبەجێ بەدوای تریگەرەکەدا ناچێت لە پێکهاتەی بەڵگەنامەکەدا، هیچ گەرەنتییەک نییە کە بەرەو پێشەوە/پەستان بچێتTABبەکارهێنەرێکی کیبۆرد دەگوازێتەوە بۆ ناو خودی پۆپۆڤەرەکە. بە کورتی، بە سادەیی زیادکردنی کۆنتڕۆڵە کارلێکەکان بۆ پۆپۆڤەرێک ئەگەری زۆرە ئەم کۆنتڕۆڵانە بۆ بەکارهێنەرانی کیبۆرد و بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان نەگات/بەکارنەهێنرێت، یان لانیکەم ببێتە هۆی ئەوەی کە فەرمانێکی فۆکۆسی گشتی نالۆژیکی بێت. لەم حاڵەتانەدا، بیر لە بەکارهێنانی دیالۆگێکی مۆداڵی بکەرەوە لەبری ئەوە.
بژاردەکان
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-animation=""
.
sanitize
,
sanitizeFn
و
بە بەکارهێنانی تایبەتمەندییەکانی داتا دابین بکرێت.whiteList
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەی کاڵبوونەوەی CSS بۆ popover بەکاربهێنە |
دەفرێک | ڕستە | توخم | هەڵە | هەڵە | پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: |
ناوەڕۆک | ڕستە | توخم | کردار | '' | بەهای ناوەڕۆکی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
دواخستن | ژمارە | شت | 0. 0 | دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت پێکهاتەی شت بریتییە لە: |
html | boolean | هەڵە | HTML بخەرە ناو popoverەکەوە. ئەگەر هەڵە بێت، text شێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە. |
جێگیرکردن | ڕستە | کردار | 'ڕاست' | چۆنێتی جێگیرکردنی popover - auto | سەرەوە | خوارەوە | چەپ | ڕاست. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی popover DOM وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە |
هەڵبژێرەر | ڕستە | هەڵە | هەڵە | ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی پۆپۆڤەر دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی popovers زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە . |
قاڵب | ڕستە | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی popover. پۆپۆڤەرەکان پۆپۆڤەرەکان
دەرەوەترین توخمە پێچراوەکە دەبێت |
ناونیشان | ڕستە | توخم | کردار | '' | بەهای ناونیشانی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
وورژاندن | ڕستە | 'کلیک' | چۆن popover دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manual ناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت. |
ئۆفسێت | ژمارە | ڕستە | 0. 0 | ئۆفسێتی پۆپۆڤەر بە بەراورد بە ئامانجەکەی. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە . |
fallback جێگیرکردن | ڕستە | ڕیزبەندی | 'وەرگەڕاندن' | ڕێگە بدە دیاری بکەیت کە پۆپەر لە فۆڵباکدا کام پۆست بەکاردەهێنێت. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی هەڵسوکەوتی پۆپەر بکە |
customClass | ڕستە | کردار | '' | کاتێک پیشان دەدرێت پۆلەکان زیاد بکە بۆ پۆپۆڤەر. تێبینی بکە کە ئەم پۆلانە زیاد دەکرێن جگە لە هەر پۆلێک کە لە قاڵبەکەدا دیاری کراوە. بۆ زیادکردنی چەندین پۆل، بە بۆشایی جیایان بکەرەوە: هەروەها دەتوانیت فەنکشنێک تێپەڕێنیت کە دەبێت یەک ڕستە بگەڕێنێتەوە کە ناوی پۆلی زیادەی تێدایە. |
سنوور | ڕستە | پێکهاتە | 'scrollParent' | سنووری سنووردارکردنی ڕژان لە پۆپۆڤەر. بەهاکانی 'viewport' , 'window' , 'scrollParent' , یان ئاماژەیەکی HTMLElement قبوڵ دەکات (تەنها جاڤاسکڕێپت). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی preventOverflow ی Popper بکە . |
پاککردنەوە | boolean | ڕاست | پاککردنەوەکە چالاک یان ناچالاک بکە. ئەگەر چالاک کرا 'template' , 'content' و 'title' بژاردەکان پاک دەکرێنەوە. سەیری بەشی پاککەرەوە بکە لە بەڵگەنامەکانی جاڤاسکڕێپتەکەماندا . |
لیستی سپی | شت | بةهاى دواكةوتن | شتێک کە تایبەتمەندی و تاگی ڕێگەپێدراو لەخۆدەگرێت |
sanitizeFn | پووچ | کردار | هیچ | لێرەدا دەتوانیت کارایی پاککردنەوەی خۆت دابین بکەیت. ئەمە دەتوانێت بەسوود بێت ئەگەر پێت باشە کتێبخانەی تایبەت بەکاربهێنیت بۆ ئەنجامدانی پاکوخاوێنی. |
popperConfig | پووچ | شت | هیچ | بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper ی Bootstrap، سەیری ڕێکخستنی Popper بکە |
تایبەتمەندیەکانی داتا بۆ تاکە پۆپۆڤەرەکان
دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.
شێوازەکان
شێواز و گواستنەوە ناهاوسەنگەکان
هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .
$().popover(options)
پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.
.popover('show')
پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popover
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە ناونیشان و ناوەڕۆکیان هەردووکیان درێژی سفرە هەرگیز پیشان نادرێن.
$('#element').popover('show')
.popover('hide')
پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popover
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.
$('#element').popover('hide')
.popover('toggle')
پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.popover
یان hidden.bs.popover
ڕووبدات). ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.
$('#element').popover('toggle')
.popover('dispose')
پۆپۆڤەری توخمێک دەشارێتەوە و لەناو دەبات. ئەو پۆپۆڤەرانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی بژاردەی دروست دەکرێن ) selector
ناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.
$('#element').popover('dispose')
.popover('enable')
توانای پیشاندانی بە پۆپۆڤەری توخمێک دەدات. Popovers بە شێوازی پێشوەختە چالاک کراوە.
$('#element').popover('enable')
.popover('disable')
توانای پیشاندانی پۆپۆڤەری توخمێک لا دەبات. popover تەنها لە حاڵەتێکدا دەتوانرێت پیشان بدرێت کە دووبارە چالاک بکرێتەوە.
$('#element').popover('disable')
.popover('toggleEnabled')
توانای پیشاندانی یان شاردنەوەی پۆپۆڤەری توخمێک دەگۆڕێت.
$('#element').popover('toggleEnabled')
.popover('update')
شوێنی پۆپۆڤەری توخمێک نوێ دەکاتەوە.
$('#element').popover('update')
ڕووداوەکان
جۆری ڕووداو | وەسف |
---|---|
show.bs.popover | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە.bs.popover | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە پۆپۆڤەرەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
شاردنەوە.bs.popover | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
شاراوە.bs.popover | ئەم ڕووداوە کاتێک تەقە دەکرێت کە popover تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن). |
جێگیرکراوە.bs.popover | ئەم ڕووداوە دوای show.bs.popover ڕووداوەکە کاتێک قاڵبی popover زیاد کراوە بۆ DOM کاردەکاتە دەرەوە. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})