پاپورز

Bootstrap popovers شامل کرنے کے لیے دستاویزات اور مثالیں، جیسا کہ iOS میں پایا جاتا ہے، آپ کی سائٹ کے کسی بھی عنصر میں۔

جائزہ

پاپ اوور پلگ ان کا استعمال کرتے وقت جاننے کی چیزیں:

• Popovers پوزیشننگ کے لیے 3rd پارٹی لائبریری Popper.js پر انحصار کرتے ہیں ۔ آپ کو bootstrap.js سے پہلے popper.min.js کو شامل کرنا چاہیے یا popovers کے کام کرنے کے لیے جو Popper.js پر مشتمل ہے استعمال bootstrap.bundle.min.jsکریں !bootstrap.bundle.js
• Popovers کو انحصار کے طور پر ٹول ٹپ پلگ ان کی ضرورت ہوتی ہے۔
• اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js ۔
• Popovers کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتے ہیں، لہذا آپ کو خود ان کی ابتدا کرنی چاہیے ۔
• صفر کی لمبائی titleاور contentاقدار کبھی بھی پاپ اوور نہیں دکھائیں گی۔
• container: 'body'مزید پیچیدہ اجزاء (جیسے ہمارے ان پٹ گروپس، بٹن گروپس وغیرہ) میں رینڈرنگ کے مسائل سے بچنے کے لیے وضاحت کریں۔
• چھپے ہوئے عناصر پر پاپ اوور کو متحرک کرنا کام نہیں کرے گا۔
• .disabledریپر عنصر پر یا disabledعناصر کے لیے پاپ اوور کو متحرک کیا جانا چاہیے۔
• متعدد لائنوں میں لپیٹنے والے اینکرز سے متحرک ہونے پر، پاپ اوور اینکرز کی مجموعی چوڑائی کے درمیان مرکوز ہوں گے۔ اس رویے سے بچنے کے لیے .text-nowrapاپنے s پر استعمال کریں ۔<a>
• پاپ اوور کو چھپایا جانا چاہیے اس سے پہلے کہ ان کے متعلقہ عناصر کو DOM سے ہٹا دیا جائے۔

یہ دیکھنے کے لیے پڑھتے رہیں کہ پاپ اوور کچھ مثالوں کے ساتھ کیسے کام کرتے ہیں۔

مثال: ہر جگہ پاپ اوور کو فعال کریں۔

کسی صفحے پر تمام پاپ اوور کو شروع کرنے کا ایک طریقہ یہ ہوگا کہ ان کو ان کے data-toggleوصف سے منتخب کیا جائے:

$(function () {
  $('[data-toggle="popover"]').popover()
})

مثال: containerآپشن کا استعمال

جب آپ کے پاس پیرنٹ ایلیمنٹ پر کچھ اسٹائل ہوتے ہیں جو پاپ اوور میں مداخلت کرتے ہیں، تو آپ اپنی مرضی کی وضاحت کرنا چاہیں گے containerتاکہ پاپ اوور کا ایچ ٹی ایم ایل اس عنصر کے اندر ظاہر ہو۔

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

طریقے

$().popover(options)

عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔

.popover('show')

ایک عنصر کے پاپ اوور کو ظاہر کرتا ہے۔ پاپ اوور کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔ Popovers جن کا عنوان اور مواد دونوں زیرو لینتھ ہیں کبھی ظاہر نہیں ہوتے ہیں۔

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

.popover('hide')

ایک عنصر کے پاپ اوور کو چھپاتا ہے۔ پوپ اوور کے حقیقت میں چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

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

.popover('toggle')

ایک عنصر کے پاپ اوور کو ٹوگل کرتا ہے۔ پاپ اوور کے حقیقت میں دکھائے جانے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.popoverیا hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

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

.popover('dispose')

ایک عنصر کے پاپ اوور کو چھپاتا اور تباہ کرتا ہے۔ ڈیلیگیشن کا استعمال کرنے والے پاپ اوور (جو آپشن کا استعمال کرتے ہوئے بنائے گئےselector ہیں ) کو نسلی محرک عناصر پر انفرادی طور پر تباہ نہیں کیا جا سکتا۔

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

.popover('enable')

ایک عنصر کے پاپ اوور کو دکھانے کی صلاحیت دیتا ہے۔ پاپ اوور بطور ڈیفالٹ فعال ہوتے ہیں۔

$('#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…
})