პოპოვერები
დოკუმენტაცია და მაგალითები 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-ის შიგნით არსებული ელემენტის წყალობით.
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 გადასვლა პოპოვერზე |
კონტეინერი | სიმებიანი | ელემენტი | ყალბი | ყალბი | ანიჭებს პოპოვერს კონკრეტულ ელემენტს. მაგალითი |
შინაარსი | სიმებიანი | ელემენტი | ფუნქცია | '' | კონტენტის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
დაგვიანებით | ნომერი | ობიექტი | 0 | პოპოვერის (ms) ჩვენება და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
html | ლოგიკური | ყალბი | ჩადეთ HTML პოპოვერში. თუ არასწორია, jQuery-ის text მეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები. |
განთავსება | სიმებიანი | ფუნქცია | "მართალი" | როგორ განვათავსოთ პოპოვერი - ავტო | ზედა | ქვედა | მარცხენა | უფლება. როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება popover DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძი, როგორც მისი მეორე. |
სელექტორი | სიმებიანი | ყალბი | ყალბი | თუ სელექტორი არის მოწოდებული, popover ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი . |
შაბლონი | სიმებიანი | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ბაზის HTML გამოყენება პოპოვერის შექმნისას. პოპოვერის პოპოვერის
ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს |
სათაური | სიმებიანი | ელემენტი | ფუნქცია | '' | სათაურის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
გამომწვევი | სიმებიანი | "დაწკაპუნება" | როგორ ხდება პოპოვერის გააქტიურება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manual არ შეიძლება გაერთიანდეს სხვა ტრიგერთან. |
ოფსეტური | ნომერი | სიმებიანი | 0 | პოპოვერის კომპენსირება მის სამიზნეთან შედარებით. დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები . |
ჩანაცვლების განთავსება | სიმებიანი | მასივი | "გადაბრუნება" | ნება მიეცით მიუთითოთ რომელ პოზიციას გამოიყენებს პოპერი სარეზერვო. დამატებითი ინფორმაციისთვის იხილეთ პოპერის ქცევის დოკუმენტები |
customClass | სიმებიანი | ფუნქცია | '' | დაამატეთ კლასები popover-ში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: თქვენ ასევე შეგიძლიათ გადასცეთ ფუნქცია, რომელიც უნდა დააბრუნოს ერთი სტრიქონი, რომელიც შეიცავს დამატებით კლასის სახელებს. |
საზღვარი | სიმებიანი | ელემენტი | '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...
})