in English

Popovers

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

کتنه

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

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

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

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

په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
د GPU سرعت

Popovers ځینې وختونه په وینډوز 10 وسیلو کې د GPU سرعت او د بدل شوي سیسټم DPI له امله تیاره ښکاري. په v4 کې د دې لپاره کار د GPU سرعت غیر فعال کول دي لکه څنګه چې ستاسو په پاپورونو کې اړتیا وي.

وړاندیز شوی اصلاح:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

د کیبورډ او مرستندویه ټیکنالوژۍ کاروونکو لپاره د پاپورونو کار کول

د دې لپاره چې د کیبورډ کاروونکو ته اجازه ورکړئ چې ستاسو پاپورونه فعال کړي، تاسو باید دوی یوازې په HTML عناصرو کې اضافه کړئ چې په دودیز ډول د کیبورډ تمرکز وړ او متقابل وي (لکه لینکونه یا فارم کنټرولونه). که څه هم خپلمنځي HTML عناصر (لکه <span>s) د tabindex="0"خاصیت په اضافه کولو سره د تمرکز وړ کیدی شي ، دا به د کیبورډ کاروونکو لپاره غیر متقابل عناصرو کې احتمالي ځورونکي او مغشوشونکي ټب سټاپونه اضافه کړي ، او ډیری مرستندویه ټیکنالوژي اوس مهال پدې حالت کې د پاپ اوور مینځپانګې نه اعلانوي. . hoverبرسیره پردې، یوازې د خپل پاپورونو لپاره د محرک په توګه تکیه مه کوئ ، ځکه چې دا به د کیبورډ کاروونکو لپاره د محرک کولو لپاره ناممکن کړي.

په داسې حال کې چې تاسو کولی شئ د اختیار سره په پاپورونو کې بډایه، جوړښت شوي HTML داخل کړئ html، موږ په کلکه سپارښتنه کوو چې تاسو د ډیرو مینځپانګو اضافه کولو څخه ډډه وکړئ. هغه لاره چې اوس مهال پاپورونه کار کوي دا دی چې یوځل ښودل شوي، د دوی مینځپانګه د aria-describedbyځانګړتیا سره د محرک عنصر سره تړلې ده. د پایلې په توګه، د پاپ اوور ټول منځپانګې به د ټیکنالوژۍ مرستندویه کاروونکو ته د یوې اوږدې، بې بنسټه جریان په توګه اعلان شي.

سربیره پردې ، پداسې حال کې چې دا ممکنه ده چې ستاسو په پاپ اوور کې متقابل کنټرولونه (لکه د فارم عناصر یا لینکونه) هم شامل کړئ (د دې عناصرو په اضافه کولو whiteListیا اجازه ورکړل شوي صفاتو او ټګونو کې) ، خبر اوسئ چې اوس مهال پاپ اوور د کیبورډ تمرکز ترتیب نه اداره کوي. کله چې د کیبورډ کاروونکي پاپ اوور پرانیزي، تمرکز په محرک عنصر باندې پاتې کیږي، او لکه څنګه چې پاپ اوور معمولا د سند په جوړښت کې محرک نه تعقیبوي، هیڅ تضمین شتون نلري چې مخ په وړاندې ځي / فشار راوړي.TABد کیبورډ کارونکي به پخپله پاپ اوور کې حرکت وکړي. په لنډه توګه، په ساده ډول په پاپ اوور کې د متقابل کنټرولونو اضافه کول احتمال لري چې دا کنټرولونه د کیبورډ کاروونکو او د مرستندویه ټیکنالوژیو کاروونکو لپاره د لاسرسي وړ/نا ګټه پورته کړي، یا لږترلږه د غیر منطقي عمومي تمرکز ترتیب لپاره رامینځته کړي. په دې قضیو کې، د دې پرځای د موډل ډیالوګ کارولو ته پام وکړئ.

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-animation="".

په یاد ولرئ چې د امنیتي دلایلو لپاره sanitize، sanitizeFnاو whiteListاختیارونه د ډیټا ځانګړتیاو په کارولو سره نشي چمتو کیدی.
نوم ډول ډیفالټ تفصیل
حرکت بولین ریښتیا پاپ اوور ته د CSS فیډ لیږد پلي کړئ
کانتینر تار | عنصر | دروغ دروغ

یو ځانګړي عنصر ته پاپ اوور ضمیمه کوي. بېلګه: 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هغه عنصر ته د هغې د حوالې سره ویل کیږي چې پاپ اوور ورسره وصل دی.

محرک تار 'کلک' پاپ اوور څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو کولی شئ ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ. manualد کوم بل محرک سره یوځای نشي.
بندول شمیره | تار 0 د خپل هدف په پرتله د پاپ اوور آفسیټ. د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ .
fallback ځای پرځای کول تار | صف 'پلټ' اجازه راکړئ مشخص کړئ چې کوم موقعیت پوپر به په فال بیک کې وکاروي. د لا زیاتو معلوماتو لپاره د Popper د چلند اسنادو ته مراجعه وکړئ
customClass تار | فعالیت ''

کله چې ښودل کیږي پاپ اوور ته ټولګي اضافه کړئ. په یاد ولرئ چې دا ټولګي به د ټیمپلیټ کې مشخص شوي ټولګیو سربیره اضافه شي. د ډیری ټولګیو اضافه کولو لپاره، دوی د ځایونو سره جلا کړئ: 'a b'.

تاسو کولی شئ یو فنکشن هم تیر کړئ چې باید یو واحد تار بیرته راولي چې اضافي ټولګي نومونه لري.

سرحد تار | عنصر 'سکرول والدین' د پاپ اوور د اوور فلو محدودیت حد. د 'viewport', 'window', 'scrollParent', یا د HTMLElement حواله (یوازې جاواسکریپټ) ارزښتونه مني. د نورو معلوماتو لپاره د Popper's preventOverflow اسنادو ته مراجعه وکړئ .
پاکول بولین ریښتیا پاکول فعال یا غیر فعال کړئ. که فعاله شي 'template'، 'content'او 'title'اختیارونه به پاک شي. زموږ د جاواسکریپټ اسنادو کې د پاکولو برخه وګورئ .
سپین لیست اعتراض ډیفالټ ارزښت هغه اعتراض چې اجازه ورکړل شوي ځانګړتیاوې او ټاګونه لري
sanitizeFn null | فعالیت null دلته تاسو کولی شئ خپل د حفظ الصحې فعالیت وړاندې کړئ. دا ګټور کیدی شي که تاسو د حفظ الصحې ترسره کولو لپاره وقف شوي کتابتون څخه کار واخلئ.
popperConfig null | اعتراض null د بوټسټریپ ډیفالټ پوپر ترتیب بدلولو لپاره ، د پاپر ترتیب وګورئ

د انفرادي پاپورونو لپاره د معلوماتو ځانګړتیاوې

د انفرادي پاپورونو اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي ، لکه څنګه چې پورته تشریح شوي.

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

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

پیښې

د پیښې ډول تفصیل
show.bs.popover دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.popover دا پیښه له مینځه وړل کیږي کله چې پاپ اوور کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.popover دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.popover دا پیښه له مینځه وړل کیږي کله چې پاپ اوور د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
inserted.bs.popover دا پیښه د show.bs.popoverپیښې وروسته له مینځه وړل کیږي کله چې د پاپ اوور ټیمپلیټ DOM ته اضافه شوی وي.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})