پاپورز

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لازمي طور تي چاڙهيو وڃي ٿو چادر واري عنصر تي.
• جڏهن اينڪرز مان شروع ڪيو ويو آهي جيڪي ڪيترن ئي لائينن ۾ لپي ويندا آهن، پاپ اوور لنگر جي مجموعي چوٽي جي وچ ۾ مرڪز هوندا. هن رويي کان بچڻ لاء .text-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 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="".

طريقا

$().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')

واقعا

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})