Source

پاپورز

Bootstrap popovers کي شامل ڪرڻ لاءِ دستاويز ۽ مثال، جهڙوڪ جيڪي iOS ۾ مليا آهن، توهان جي سائيٽ تي ڪنهن به عنصر تي.

اوسر

Popover پلگ ان کي استعمال ڪرڻ وقت ڄاڻڻ لاء شيون:

  • Popovers پوزيشن لاء 3rd پارٽي لائبريري Popper.js تي ڀروسو . توهان کي bootstrap.js کان اڳ popper.min.js شامل ڪرڻ گهرجي يا استعمال ڪرڻ bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper.js شامل آهي popovers ڪم ڪرڻ لاءِ!
  • Popovers هڪ انحصار جي طور تي ٽول ٽائپ پلگ ان جي ضرورت آهي.
  • جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهيutil.js .
  • Popovers ڪارڪردگي سببن لاء آپٽ-ان آهن، تنهنڪري توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
  • زيرو ڊگھائي title۽ contentقدر ڪڏهن به پاپ اوور نه ڏيکاريندا.
  • container: 'body'وڌيڪ پيچيده اجزاء (جهڙوڪ اسان جي ان پٽ گروپن، بٽڻ گروپن، وغيره) ۾ رينجرنگ مسئلن کان بچڻ لاء وضاحت ڪريو .
  • لڪيل عناصر تي پاپ اوور کي ڇڪڻ ڪم نه ڪندو.
  • .disabledيا عنصرن لاءِ پوپ اوور disabledلازمي طور تي چاڙهيو وڃي ٿو چادر واري عنصر تي.
  • جڏهن اينڪرز مان شروع ڪيو ويو آهي جيڪي ڪيترن ئي لائينن ۾ لپي ويندا آهن، پاپ اوور لنگر جي مجموعي چوٽي جي وچ ۾ مرڪز هوندا. هن رويي کان بچڻ لاء white-space: nowrap;توهان جي ايس تي استعمال ڪريو .<a>
  • Popovers کي لڪايو وڃي ان کان اڳ جو انهن جي لاڳاپيل عناصر کي DOM مان هٽايو ويو آهي.

پڙهو ته ڏسو ته ڪيئن popovers ڪم ڪن مثالن سان.

مثال: 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ٽوگل عنصر کان مختلف عنصر جي صارف جي ايندڙ ڪلڪ تي پاپ اوور کي رد ڪرڻ لاءِ ٽرگر استعمال ڪريو.

ڊسمس-آن-ايئن-ڪلڪ لاءِ مخصوص مارڪ اپ گھربل آھي

مناسب ڪراس-براؤزر ۽ ڪراس-پليٽفارم رويي لاءِ، توھان کي لازمي طور استعمال ڪرڻ گھرجي <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>

استعمال

جاوا اسڪرپٽ ذريعي پاپ اوور کي فعال ڪريو:

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

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-animation="".

نالو قسم ڊفالٽ وصف
انيميشن بولين سچو پاپ اوور تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
ڪنٽينر تار | عنصر | ڪوڙو ڪوڙو

پوپ اوور کي خاص عنصر ۾ شامل ڪري ٿو. مثال: container: 'body'. هي اختيار خاص طور تي ڪارائتو آهي ته اهو توهان کي اجازت ڏئي ٿو ته پاپ اوور کي دستاويز جي وهڪري ۾ ٽريگرنگ عنصر جي ويجهو - جيڪو پاپ اوور کي ونڊو ريزائز ڪرڻ دوران ٽريگرنگ عنصر کان پري ٿيڻ کان روڪيندو.

مواد تار | عنصر | فنڪشن ''

ڊفالٽ مواد جي قيمت جيڪڏهن data-contentخاصيت موجود نه آهي.

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

دير ڪرڻ نمبر | اعتراض 0

پوپ اوور (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي

جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لڪايو / ڏيکاريو ٻنهي تي لاڳو ٿئي ٿو

اعتراض جي جوڙجڪ آهي:delay: { "show": 500, "hide": 100 }

html بولين ڪوڙو پاپ اوور ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، jQuery جو textطريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت.
لڳائڻ تار | فنڪشن 'ساڄو'

پوپ اوور کي پوزيشن ڪيئن ڪجي - آٽو | مٿي | هيٺان | کاٻي | ساڄو.
جڏهن autoبيان ڪيو ويو آهي، اهو متحرڪ طور تي پاپ اوور کي ٻيهر ترتيب ڏيندو.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه جو تعين ڪرڻ لاء، ان کي سڏيو ويندو آهي پاپ اوور DOM نوڊ ان جي پهرين دليل طور ۽ ٽارگيٽ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو پاپ اوور مثال تي مقرر ڪيو ويو آهي .

چونڊيندڙ تار | ڪوڙو ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، پاپ اوور شيون مقرر ڪيل هدفن کي ورهايو ويندو. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ 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حوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

محرڪ تار 'ڪلڪ' پاپ اوور ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. 'دستي' کي ڪنهن ٻئي ٽرگر سان گڏ نه ٿو ڪري سگھجي.
بند ڪرڻ نمبر | تار 0 ان جي حدف جي نسبت سان پاپ اوور جو آفسٽ. وڌيڪ معلومات لاءِ ڏسو Popper.js جي آفسٽ ڊيڪس .
fallback جي جڳھ تار | صف 'ڦٽڻ' وضاحت ڪرڻ جي اجازت ڏيو ته پوپر ڪهڙي پوزيشن تي استعمال ڪندو. وڌيڪ معلومات لاءِ ڏسو Popper.js جي رويي جا دستاويز
حد تار | عنصر 'اسڪرول والدين' پاپ اوور جي اوور فلو پابندي جي حد. 'viewport', , 'window', 'scrollParent', or an HTMLElement reference (صرف JavaScript) جا قدر قبول ڪري ٿو . وڌيڪ معلومات لاءِ ڏسو Popper.js's preventOverflow docs .

انفرادي پاپورز لاءِ ڊيٽا جون خاصيتون

انفرادي پاپورز لاءِ اختيارات متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا جاوا اسڪرپٽ دستاويز ڏسو.

$().popover(options)

هڪ عنصر گڏ ڪرڻ لاء popovers جي شروعات.

.popover('show')

هڪ عنصر جي پاپ اوور کي ظاهر ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ. Popovers جن جا عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.

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

.popover('hide')

هڪ عنصر جي پاپ اوور کي لڪائيندو آهي. پوپ اوور اصل ۾ لڪايو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . hidden.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.

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

.popover('toggle')

هڪ عنصر جي پاپ اوور کي ٽوگل ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو يا لڪايو ويو (يعني واقعي يا واقعو ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.shown.bs.popoverhidden.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 اهو واقعو فائر ڪيو ويو آهي جڏهن پاپ اوور کي صارف لاءِ ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.popover اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.popover هي واقعو فائر ڪيو ويندو آهي جڏهن پاپ اوور ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
inserted.bs.popover اهو واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.popoverجڏهن پاپ اوور ٽيمپليٽ ڊوم ۾ شامل ڪيو ويو آهي.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})