Պոպովերներ

Փաստաթղթեր և օրինակներ՝ Bootstrap popover-ներ, ինչպիսիք են iOS-ում հայտնաբերվածները, ձեր կայքի ցանկացած տարրին ավելացնելու համար:

Ընդհանուր ակնարկ

Բաներ, որոնք պետք է իմանալ popover plugin-ն օգտագործելիս.

• Պոպովերը հիմնվում են 3-րդ կողմի Popper.js գրադարանի վրա դիրքավորման համար: Դուք պետք է ներառեք popper.min.js-ը bootstrap.js-ից առաջ կամ օգտագործեք bootstrap.bundle.min.js/ bootstrap.bundle.jsորը պարունակում է Popper.js, որպեսզի popover-ներն աշխատեն:
• Popover-ները պահանջում են գործիքի հուշում հավելվածը որպես կախվածություն:
• Եթե ​​դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :
• Popover-ները միանում են կատարողականի նկատառումներով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
• Զրոյական երկարությունը titleև contentարժեքները երբեք չեն ցուցադրի պոպովեր:
• Նշեք container: 'body'՝ ավելի բարդ բաղադրիչներում խնդիրներ չարտադրելու համար (օրինակ՝ մեր մուտքային խմբերը, կոճակների խմբերը և այլն):
• Թաքնված տարրերի վրա popover-ների գործարկումը չի աշխատի:
• Պոպովերը .disabledկամ disabledտարրերը պետք է գործարկվեն փաթաթման տարրի վրա:
• Երբ գործարկվում են խարիսխներից, որոնք փաթաթվում են մի քանի գծերի վրայով, պոպովերը կկենտրոնացվեն խարիսխների ընդհանուր լայնության միջև: Օգտագործեք .text-nowrapձեր <a>s-ի վրա՝ այս պահվածքից խուսափելու համար:
• Popover-ները պետք է թաքցվեն նախքան դրանց համապատասխան տարրերը DOM-ից հեռացնելը:
• Popover-ները կարող են գործարկվել ստվերային DOM-ի ներսում գտնվող տարրի շնորհիվ:

Շարունակեք կարդալ՝ որոշ օրինակներով տեսնելու համար, թե ինչպես են աշխատում popover-ները:

Օրինակ. Միացնել popovers ամենուր

Էջի բոլոր popover-ները սկզբնավորելու եղանակներից մեկը կլինի դրանք ընտրելն իրենց data-toggleհատկանիշով.

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

Օրինակ. Օգտագործելով containerտարբերակը

Երբ դուք ունեք որոշ ոճեր ծնող տարրի վրա, որոնք խանգարում են popover-ին, դուք պետք է նշեք սովորական containerտարբերակ, որպեսզի դրա փոխարեն popover-ի 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ձգանը՝ անջատելու տարրից տարբերվող տարրի օգտատիրոջ հաջորդ կտտոցով popover-ները հեռացնելու համար:

<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ինտերակտիվ չեն, ինչը նշանակում է, որ օգտատերերը չեն կարող սավառնել կամ սեղմել դրանց վրա՝ բաց թողնելու համար (կամ գործիքի հուշում): Որպես լուծում, դուք պետք է գործարկեք «popover»-ը փաթաթվածից <div>կամ <span>անտեսեք pointer-eventsանջատված տարրը:

Անջատված popover գործարկիչների դեպքում դուք կարող եք նաև նախընտրել data-trigger="hover", որպեսզի popover-ը հայտնվի որպես անմիջական տեսողական արձագանք ձեր օգտատերերին, քանի որ նրանք չեն ակնկալում սեղմել անջատված տարրի վրա:

<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>

Օգտագործումը

Միացնել popover-ները JavaScript-ի միջոցով.

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Մեթոդներ

$().popover(options)

Նախաձեռնում է popovers տարրերի հավաքածուի համար:

.popover('show')

Բացահայտում է տարրի պոպովեր: Վերադառնում է զանգահարողին նախքան փոփերի փաստացի ցուցադրումը (այսինքն՝ նախքան shown.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում: Փոփերները, որոնց վերնագիրը և բովանդակությունը զրոյական երկարություն ունեն, երբեք չեն ցուցադրվում:

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

.popover('hide')

Թաքցնում է տարրի պոպովերը: Վերադառնում է զանգահարողին նախքան popover-ը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:

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

.popover('toggle')

Անջատում է տարրի popover-ը: Վերադառնում է զանգահարողին նախքան popover-ն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.popoverկամ hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:

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

.popover('dispose')

Թաքցնում և ոչնչացնում է տարրի պոպովերը: Պոպովերը, որոնք օգտագործում են պատվիրակում (որոնք ստեղծվում են selectorտարբերակի միջոցով ) չեն կարող անհատապես ոչնչացվել հետնորդ ձգան տարրերի վրա:

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

.popover('enable')

Տարրի popover-ին ցուցադրվելու հնարավորություն է տալիս: Popover-ները լռելյայն միացված են:

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

.popover('disable')

Հեռացնում է տարրի popover-ի ցուցադրման հնարավորությունը: Popover-ը հնարավոր կլինի ցուցադրել միայն այն դեպքում, եթե այն նորից միացվի:

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

.popover('toggleEnabled')

Անջատում է տարրի popover-ի ցուցադրման կամ թաքցման հնարավորությունը:

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

.popover('update')

Թարմացնում է տարրի popover-ի դիրքը:

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

Իրադարձություններ

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