پۆپۆڤەرز

بەڵگەنامە و نموونە بۆ زیادکردنی Bootstrap popovers، وەک ئەوانەی لە iOS دەبینرێن، بۆ هەر توخمێک لە ماڵپەڕەکەتدا.

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی popover:

Popovers پشت بە کتێبخانەی لایەنی سێیەم Popper.js دەبەستێت بۆ جێگیرکردن. پێویستە پێش bootstrap.js popper.min.js دابنێیت یان bootstrap.bundle.min.js/ بەکاربهێنیت bootstrap.bundle.jsکە Popper.js لەخۆدەگرێت بۆ ئەوەی popovers کاربکات!
Popovers پێویستیان بە پێوەکراوەکەی tooltip وەک وابەستەیەک هەیە.
ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .
Popovers بە هۆکاری کاراییەوە بەشداریکردنە، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
سفر-درێژی titleو contentبەهاکان هەرگیز پۆپۆڤەرێک نیشان نادەن.
دیاری بکە container: 'body'بۆ ئەوەی کێشەی ڕەندەرکردن لە پێکهاتە ئاڵۆزترەکاندا ڕوونەدات (وەک گروپەکانی چوونەژوورەوەمان، گروپەکانی دوگمەکان و هتد).
دەستپێکردنی پۆپۆڤەرەکان لەسەر توخمە شاراوەکان کار ناکات.
پۆپۆڤەرەکان بۆ .disabledیان disabledتوخمەکان دەبێت لەسەر توخمێکی پێچراو دەستپێبکرێن.
کاتێک لە لەنگەرەکانەوە دەستپێدەکرێت کە بەسەر چەندین هێڵدا دەپێچنەوە، پۆپۆڤەرەکان لە نێوان پانایی گشتی لەنگەرەکاندا لە ناوەڕاستدا دەبن. white-space: nowrap;لەسەر s ـەکەت بەکاربهێنە <a>بۆ ئەوەی لەم ڕەفتارە دوور بکەویتەوە.
دەبێت پۆپۆڤەرەکان بشاردرێنەوە پێش ئەوەی توخمە هاوبەشەکانیان لە DOM لاببرێن.

بەردەوام بە لە خوێندنەوە بۆ ئەوەی بزانیت چۆن پۆپۆڤەرەکان کاردەکەن بە هەندێک نموونە.

نموونە: لە هەموو شوێنێک 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="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بۆ ڕەتکردنەوەی پۆپۆڤەرەکان لەسەر کلیکی داهاتووی بەکارهێنەر لەسەر توخمێکی جیاواز لە توخمەکەی 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)

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

ناو	جۆر	بنەڕەتی	وەسف
ئەنیمەیشن	boolean	ڕاست	گواستنەوەی کاڵبوونەوەی CSS بۆ popover بەکاربهێنە
دەفرێک	ڕستە \| توخم \| هەڵە	هەڵە	پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: `container: 'body'`. ئەم هەڵبژاردنە بە تایبەتی بەسوودە لەبەر ئەوەی ڕێگەت پێدەدات پۆپۆڤەرەکە لە ڕەوتی بەڵگەنامەکەدا لە نزیک توخمە دەستپێکەرەکە دابنێیت - کە ڕێگری دەکات لە هەڵفڕینی پۆپۆڤەرەکە لە توخمە دەستپێکەرەکە دوور لە کاتی گۆڕینی قەبارەی پەنجەرە.
ناوەڕۆک	ڕستە \| توخم \| کردار	''	بەهای ناوەڕۆکی پێشوەختە ئەگەر `data-content`تایبەتمەندییەکە ئامادە نەبێت. ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە `this`ڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.
دواخستن	ژمارە \| شت	0. 0	دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت پێکهاتەی شت بریتییە لە:`delay: { "show": 500, "hide": 100 }`
html	boolean	هەڵە	HTML بخەرە ناو popoverەکەوە. ئەگەر هەڵە بێت، `text`شێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن	ڕستە \| کردار	'ڕاست'	چۆنێتی جێگیرکردنی popover - auto \| سەرەوە \| خوارەوە \| چەپ \| ڕاست. کاتێک `auto`دیاری دەکرێت، بە شێوەیەکی داینامیکی پەپۆڤەرەکە ئاڕاستە دەکاتەوە. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی popover DOM وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە `this`بۆ نموونەی popover دانراوە.
هەڵبژێرەر	ڕستە \| هەڵە	هەڵە	ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی پۆپۆڤەر دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی popovers زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە .
قاڵب	ڕستە	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی popover. پۆپۆڤەرەکان `title`دەدرێنە ناو `.popover-header`. پۆپۆڤەرەکان `content`دەدرێنە ناو `.popover-body`. `.arrow`دەبێتە تیری پۆپۆڤەر. دەرەوەترین توخمە پێچراوەکە دەبێت `.popover`پۆلەکەی هەبێت.
ناونیشان	ڕستە \| توخم \| کردار	''	بەهای ناونیشانی پێشوەختە ئەگەر `title`تایبەتمەندی ئامادە نەبێت. ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە `this`ڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.
وورژاندن	ڕستە	'کلیک'	چۆن popover دەستپێدەکات - کلیک لە \| بکە hover \| فۆکەس \| بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. `manual` ناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت.
ئۆفسێت	ژمارە \| ڕستە	0. 0	ئۆفسێتی پۆپۆڤەر بە بەراورد بە ئامانجەکەی. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی Popper.js بکە .
fallback جێگیرکردن	ڕستە \| ڕیزبەندی	'وەرگەڕاندن'	ڕێگە بدە دیاری بکەیت کە پۆپەر لە فۆڵباکدا کام پۆست بەکاردەهێنێت. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی هەڵسوکەوتی Popper.js بکە
سنوور	ڕستە \| پێکهاتە	'scrollParent'	سنووری سنووردارکردنی ڕژان لە پۆپۆڤەر. بەهاکانی `'viewport'`, `'window'`, `'scrollParent'`, یان ئاماژەیەکی HTMLElement قبوڵ دەکات (تەنها جاڤاسکڕێپت). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی preventOverflow ی Popper.js بکە .

تایبەتمەندیەکانی داتا بۆ تاکە پۆپۆڤەرەکان

دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی 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…
})