Source

პოპოვერები

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

მიმოხილვა

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

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

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

Პარამეტრები

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

სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ 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 პოპოვერის კომპენსირება მის სამიზნეთან შედარებით. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის ოფსეტური დოკუმენტები .
ჩანაცვლების განთავსება სიმებიანი | მასივი "გადაბრუნება" ნება მიეცით მიუთითოთ რომელ პოზიციას გამოიყენებს პოპერი სარეზერვო. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის ქცევის დოკუმენტები
საზღვარი სიმებიანი | ელემენტი 'scrollParent' პოპოვერის გადინების შეზღუდვის საზღვარი. იღებს 'viewport', 'window', 'scrollParent', ან HTMLElement მითითების მნიშვნელობებს (მხოლოდ JavaScript). დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის preventOverflow docs .

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

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

მეთოდები

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

ყველა 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…
})