Popovers

د بوټسټریپ پاپورونو اضافه کولو لپاره اسناد او مثالونه، لکه په iOS کې موندل شوي، ستاسو په سایټ کې هر عنصر ته.

کتنه

د پاپ اوور پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:

• Popovers د موقعیت لپاره د دریمې ډلې کتابتون Popper.js باندې تکیه کوي . تاسو باید د bootstrap.js څخه مخکې popper.min.jsbootstrap.bundle.min.js شامل کړئ یا / bootstrap.bundle.jsکوم چې د پاپور کار کولو لپاره Popper.js لري استعمال کړئ!
• Popovers د انحصار په توګه د اوزار ټایپ پلگ ان ته اړتیا لري.
• که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .
• Popovers د فعالیت دلایلو لپاره غوره شوي، نو تاسو باید دوی پخپله پیل کړئ .
• صفر اوږدوالی titleاو contentارزښتونه به هیڅکله پاپ اوور ونه ښیې.
• په ډیرو پیچلو برخو کې د ستونزو د وړاندې کولو څخه مخنیوي لپاره مشخص container: 'body'کړئ (لکه زموږ د ننوتلو ګروپونه، د تڼۍ ګروپونه، او نور).
• په پټو عناصرو کې د پاپورز رامینځته کول به کار ونکړي.
• .disabledد یا عناصرو لپاره پاپورونه disabledباید په ریپر عنصر کې پیل شي.
• کله چې د اینکرونو څخه رامینځته کیږي چې په ډیری لینونو کې پوښل کیږي، پاپورونه به د لنگر د ټولیز عرض تر مینځ متمرکز وي. د دې چلند څخه د مخنیوي لپاره .text-nowrapپه خپلو کې کار واخلئ .<a>
• پوپورونه باید مخکې له دې چې د دوی اړوند عناصر د DOM څخه لیرې شي پټ شي.
• Popovers د سیوري DOM دننه د عنصر څخه مننه رامینځته کیدی شي.

لوستلو ته دوام ورکړئ ترڅو وګورئ چې پاپور د ځینې مثالونو سره څنګه کار کوي.

بېلګه: په هر ځای کې پاپورونه فعال کړئ

په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د 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)

د عنصر راټولولو لپاره پاپور پیل کوي.

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

د عنصر پاپ اوور د ښودلو وړتیا ورکوي. 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…
})