პოპოვერები

დოკუმენტაცია და მაგალითები Bootstrap popover-ების დასამატებლად, როგორიცაა iOS-ში ნაპოვნი ნებისმიერი ელემენტი თქვენს საიტზე.

მიმოხილვა

რა უნდა იცოდეთ popover მოდულის გამოყენებისას:

პოპოვერები პოზიციონირებისთვის ეყრდნობიან მესამე მხარის ბიბლიოთეკას Popper- ს. თქვენ უნდა შეიყვანოთ popper.min.js bootstrap.js-მდე ან გამოიყენოთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს პოპერს, რათა პოპოვერებმა იმუშაონ!
პოპოვერები საჭიროებენ ინსტრუმენტთა მითითების დანამატს , როგორც დამოკიდებულებას.
თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .
Popover-ები დაშვებულია შესრულების მიზეზების გამო, ასე რომ თქვენ თავად უნდა მოაწყოთ ისინი .
ნულოვანი სიგრძე titleდა contentმნიშვნელობები არასოდეს აჩვენებს პოპოვერს.
მიუთითეთ container: 'body', რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.).
დამალულ ელემენტებზე პოპოვერების გააქტიურება არ იმუშავებს.
პოპოვერები .disabledან disabledელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე.
როდესაც ამოქმედდება წამყვანებიდან, რომლებიც ხვდება რამდენიმე ხაზს, პოვერები ორიენტირებული იქნება წამყვანების საერთო სიგანეს შორის. გამოიყენეთ .text-nowrapთქვენი <a>s, რათა თავიდან აიცილოთ ეს ქცევა.
პოპოვერები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები DOM-დან წაიშლება.
პოპოვერების გააქტიურება შესაძლებელია ჩრდილოვანი DOM-ის შიგნით არსებული ელემენტის წყალობით.

ნაგულისხმევად, ეს კომპონენტი იყენებს ჩაშენებულ კონტენტის გამაჯანსაღებელს, რომელიც აშორებს HTML ელემენტებს, რომლებიც აშკარად დაუშვებელია. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში დამატებითი ინფორმაციისთვის.

ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია 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ტრიგერი, რათა გააუქმოთ popovers მომხმარებლის შემდეგი დაწკაპუნებით სხვა ელემენტზე, ვიდრე გადართვის ელემენტი.

საჭიროა კონკრეტული მარკირება შემდეგი დაწკაპუნებით გაუქმებისთვის

ბრაუზერის და კროს პლატფორმის სწორი ქცევისთვის, თქვენ უნდა გამოიყენოთ <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>

გამოყენება

ჩართეთ პოპოვერები JavaScript-ით:

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

GPU აჩქარება

Popovers ზოგჯერ ბუნდოვანი ჩანს Windows 10 მოწყობილობებზე GPU აჩქარებისა და შეცვლილი სისტემის DPI-ის გამო. ამის გამოსავალი v4-ში არის GPU აჩქარების გამორთვა, როგორც საჭიროა თქვენს პოპოვერებზე.

შემოთავაზებული გამოსწორება:

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

კლავიატურის და დამხმარე ტექნოლოგიების მომხმარებლებისთვის პოპოვერების დამზადება

იმისათვის, რომ კლავიატურის მომხმარებლებს საშუალება მისცეთ გაააქტიურონ თქვენი popovers, თქვენ უნდა დაამატოთ ისინი მხოლოდ HTML ელემენტებში, რომლებიც ტრადიციულად კლავიატურაზე ფოკუსირებადი და ინტერაქტიულია (როგორიცაა ბმულები ან ფორმის კონტროლი). მიუხედავად იმისა, რომ თვითნებური HTML ელემენტები (როგორიცაა <span>s) შეიძლება ფოკუსირებადი გახდეს tabindex="0"ატრიბუტის დამატებით, ეს დაამატებს პოტენციურად შემაწუხებელ და დამაბნეველ ჩანართებს არაინტერაქტიულ ელემენტებზე კლავიატურის მომხმარებლებისთვის და დამხმარე ტექნოლოგიების უმეტესობა ამჟამად არ აცხადებს პოპოვერის კონტენტს ამ სიტუაციაში. . გარდა ამისა, არ დაეყრდნოთ მხოლოდ hoverთქვენი პოპოვერების გამომწვევს, რადგან ეს შეუძლებელს გახდის მათ გაშვებას კლავიატურის მომხმარებლებისთვის.

მიუხედავად იმისა, რომ თქვენ შეგიძლიათ ჩასვათ მდიდარი, სტრუქტურირებული HTML პოპოვერებში ამ ოფციით html, ჩვენ გირჩევთ, რომ თავიდან აიცილოთ ზედმეტი რაოდენობის კონტენტის დამატება. პოპოვერების ამჟამად მუშაობის გზა არის ის, რომ, როდესაც გამოჩნდება, მათი შინაარსი მიბმულია ტრიგერის ელემენტთან aria-describedbyატრიბუტით. შედეგად, პოპოვერის მთლიანი შინაარსი გამოცხადდება დამხმარე ტექნოლოგიების მომხმარებლებს, როგორც ერთი გრძელი, უწყვეტი ნაკადი.

გარდა ამისა, მიუხედავად იმისა, რომ შესაძლებელია თქვენს პოპოვერში ინტერაქტიული კონტროლის (როგორიცაა ფორმის ელემენტები ან ბმულები) ჩართვა (ამ ელემენტების whiteListან დაშვებულ ატრიბუტებსა და ტეგებში დამატებით), გაითვალისწინეთ, რომ ამჟამად პოპოვერი არ მართავს კლავიატურის ფოკუსის წესრიგს. როდესაც კლავიატურის მომხმარებელი ხსნის პოპოვერს, ფოკუსირება რჩება გამომწვევ ელემენტზე და რადგან პოპოვერი, როგორც წესი, დაუყოვნებლივ არ მიჰყვება ტრიგერს დოკუმენტის სტრუქტურაში, არ არსებობს გარანტია, რომ წინსვლა/დაჭერაTABგადაიყვანს კლავიატურის მომხმარებელს თავად პოპოვერში. მოკლედ, პოპოვერზე ინტერაქტიული კონტროლის უბრალოდ დამატება, სავარაუდოდ, ამ კონტროლს მიუწვდომელ/გამოუყენებელს გახდის კლავიატურის მომხმარებლებისთვის და დამხმარე ტექნოლოგიების მომხმარებლებისთვის, ან სულ მცირე, ალოგიკური საერთო ფოკუსის წესრიგს. ამ შემთხვევაში, განიხილეთ მოდალური დიალოგის ნაცვლად.

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

გაითვალისწინეთ, რომ უსაფრთხოების მიზეზების გამო sanitize, sanitizeFnდა whiteListპარამეტრების მიწოდება შეუძლებელია მონაცემთა ატრიბუტების გამოყენებით.

სახელი	ტიპი	ნაგულისხმევი	აღწერა
ანიმაცია	ლოგიკური	მართალია	გამოიყენეთ CSS fade გადასვლა პოპოვერზე
კონტეინერი	სიმებიანი \| ელემენტი \| ყალბი	ყალბი	ანიჭებს პოპოვერს კონკრეტულ ელემენტს. მაგალითი `container: 'body'`:. ეს პარამეტრი განსაკუთრებით სასარგებლოა იმით, რომ საშუალებას გაძლევთ მოათავსოთ პოპოვერი დოკუმენტის ნაკადში გამომწვევ ელემენტთან ახლოს - რაც ხელს შეუშლის პოპოვერს ტრიგერის ელემენტისგან მოშორებას ფანჯრის ზომის შეცვლის დროს.
შინაარსი	სიმებიანი \| ელემენტი \| ფუნქცია	''	კონტენტის ნაგულისხმევი მნიშვნელობა, თუ `data-content`ატრიბუტი არ არის. თუ ფუნქცია მოცემულია, ის გამოიძახება მისი `this`მითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.
დაგვიანებით	ნომერი \| ობიექტი	0	პოპოვერის (ms) ჩვენება და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის:`delay: { "show": 500, "hide": 100 }`
html	ლოგიკური	ყალბი	ჩადეთ HTML პოპოვერში. თუ არასწორია, jQuery-ის `text`მეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.
განთავსება	სიმებიანი \| ფუნქცია	"მართალი"	როგორ განვათავსოთ პოპოვერი - ავტო \| ზედა \| ქვედა \| მარცხენა \| უფლება. როდესაც `auto`მითითებულია, ის დინამიურად გადააბრუნებს პოპოვერს. როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება popover DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძი, როგორც მისი მეორე. `this`კონტექსტი დაყენებულია პოპოვერის მაგალითზე .
სელექტორი	სიმებიანი \| ყალბი	ყალბი	თუ სელექტორი არის მოწოდებული, popover ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი .
შაბლონი	სიმებიანი	`'<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`მითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.
გამომწვევი	სიმებიანი	"დაწკაპუნება"	როგორ ხდება პოპოვერის გააქტიურება - დააწკაპუნეთ \| hover \| ფოკუსირება \| სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. `manual`არ შეიძლება გაერთიანდეს სხვა ტრიგერთან.
ოფსეტური	ნომერი \| სიმებიანი	0	პოპოვერის კომპენსირება მის სამიზნეთან შედარებით. დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები .
ჩანაცვლების განთავსება	სიმებიანი \| მასივი	"გადაბრუნება"	ნება მიეცით მიუთითოთ რომელ პოზიციას გამოიყენებს პოპერი სარეზერვო. დამატებითი ინფორმაციისთვის იხილეთ პოპერის ქცევის დოკუმენტები
customClass	სიმებიანი \| ფუნქცია	''	დაამატეთ კლასები popover-ში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: `'a b'`. თქვენ ასევე შეგიძლიათ გადასცეთ ფუნქცია, რომელიც უნდა დააბრუნოს ერთი სტრიქონი, რომელიც შეიცავს დამატებით კლასის სახელებს.
საზღვარი	სიმებიანი \| ელემენტი	'scrollParent'	პოპოვერის გადინების შეზღუდვის საზღვარი. იღებს `'viewport'`, `'window'`, `'scrollParent'`, ან HTMLElement მითითების მნიშვნელობებს (მხოლოდ JavaScript). დამატებითი ინფორმაციისთვის იხილეთ Popper's preventOverflow docs .
გაწმენდა	ლოგიკური	მართალია	ჩართეთ ან გამორთეთ სანიტარიზაცია. თუ გააქტიურებულია `'template'`, `'content'`და `'title'`ოფციები გასუფთავდება. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში .
თეთრი სია	ობიექტი	ნაგულისხმევი მნიშვნელობა	ობიექტი, რომელიც შეიცავს დაშვებულ ატრიბუტებსა და ტეგებს
sanitizeFn	null \| ფუნქცია	null	აქ შეგიძლიათ მიაწოდოთ თქვენი საკუთარი სადეზინფექციო ფუნქცია. ეს შეიძლება იყოს სასარგებლო, თუ გირჩევნიათ გამოიყენოთ გამოყოფილი ბიბლიოთეკა სანიტარიულობის შესასრულებლად.
popperConfig	null \| ობიექტი	null	Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია

მონაცემთა ატრიბუტები ინდივიდუალური პოპოვერებისთვის

ცალკეული პოპოვერების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

`$().popover(options)`

ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.

`.popover('show')`

ავლენს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე (ანუ shown.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის „სახელმძღვანელო“ გამომწვევად. პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასოდეს გამოჩნდება.

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

ცვლის ელემენტის popover-ის ჩვენების ან დამალვის შესაძლებლობას.

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

`.popover('update')`

განაახლებს ელემენტის პოპოვერის პოზიციას.

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

Ივენთი

ღონისძიების ტიპი	აღწერა
შოუ.ბს.პოპოვერი	ეს მოვლენა მაშინვე ირთვება, როდესაც `show`გამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.პოპოვერი	ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.პოპოვერი	ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც `hide`გამოიძახება ინსტანციის მეთოდი.
დამალული.ბს.პოპოვერი	ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი დაასრულებს მომხმარებლისგან დამალვას (დაელოდება CSS გადასვლების დასრულებას).
ჩასმული.ბს.პოპოვერი	ეს ღონისძიება `show.bs.popover`გააქტიურებულია ღონისძიების შემდეგ, როდესაც popover-ის შაბლონი დაემატება DOM-ს.

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