पोपोवर्स
बूटस्ट्रैप पॉपओवर कें जोड़य कें लेल दस्तावेजीकरण आ उदाहरण, जेना कि आईओएस मे भेटय छै, अहां कें साइट पर कोनों तत्व मे.
अवलोकन
पॉपओवर प्लगइन के उपयोग करय के समय जानय के बात:
- पोपोवर्स पोजीशनिंग के लेल 3rd पार्टी लाइब्रेरी पॉपर पर निर्भर रहैत अछि | अहाँ के bootstrap.js स पहिने popper.min.js
bootstrap.bundle.min.js
शामिल करय पड़त या / के प्रयोग करय पड़तbootstrap.bundle.js
जाहि में Popper अछि जाहि स पॉपओवर काज करय ! - पोपोवर्स कें एकटा निर्भरता कें रूप मे टूलटिप प्लगइन कें आवश्यकता होयत छै.
- यदि अहाँ हमर जावास्क्रिप्ट स्रोत सँ बना रहल छी, त' एकरा आवश्यकता
util.js
अछि . - Popovers प्रदर्शन कारण सं ऑप्ट-इन अछि, तें अहां कें स्वयं ओकरा इनिशियलाइज करय पड़त .
- शून्य-लंबाई
title
आcontent
मूल्य कहियो पोपोवर नहि देखाओत। container: 'body'
अधिक जटिल घटक (जैना कि हमरऽ इनपुट समूह, बटन समूह, आदि) म॑ रेंडरिंग समस्या स॑ बचै लेली निर्दिष्ट करलऽ जाय ।- नुकायल तत्व पर पोपोवर ट्रिगर करब काज नहि करत।
.disabled
या तत्वक कें लेल पोपोवर्स केंdisabled
एकटा रैपर तत्व पर ट्रिगर करनाय आवश्यक छै.- जखन अनेक रेखाक कें पार लपेटय वाला लंगर सं ट्रिगर कैल जैतय, तखन पोपोवर लंगर कें समग्र चौड़ाई कें बीच केंद्रित होयत.
.text-nowrap
एहि व्यवहार सँ बचबाक लेल अपन<a>
s पर प्रयोग करू । - पोपोवर कें डीओएम सं ओकर संगत तत्वक कें हटावय सं पहिले नुकायल करनाय आवश्यक छै.
- एक छाया डीओएम के अंदर एक तत्व के बदौलत पोपोवर्स ट्रिगर करलऽ जाब॑ सकै छै ।
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू
.
किछु उदाहरणक संग पोपोवर कोना काज करैत अछि से देखबाक लेल पढ़ैत रहू।
जेना : सब ठाम पोपोवर सक्षम करू
कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर data-toggle
विशेषता द्वारा चुनल जाय:
$(function () {
$('[data-toggle="popover"]').popover()
})
जेना : container
विकल्पक प्रयोग करब
जब॑ आपकऽ पास कोनों मूल तत्व प॑ कुछ शैली छै जे पॉपओवर म॑ हस्तक्षेप करै छै, त॑ आप एगो कस्टम निर्दिष्ट करना चाहबै container
ताकि पॉपओवर केरऽ एचटीएमएल एकरऽ बदला म॑ वू तत्व के भीतर दिखाई दै ।
$(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)
जीपीयू त्वरण
जीपीयू एक्सेलरेशन आरू संशोधित सिस्टम डीपीआई के कारण विंडोज 10 डिवाइस प॑ कखनी-कखनी पॉपओवर धुंधला नजर आबै छै । v4 म॑ एकरऽ लेलऽ वर्कअराउंड ई छै कि अपनऽ पॉपोवर प॑ जरूरत के हिसाब स॑ जीपीयू त्वरण क॑ अक्षम करलऽ जाय ।
सुझाव देल गेल ठीक:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
पोपोवर बनाना कीबोर्ड आ सहायक तकनीक उपयोगकर्ताक कें लेल काज करय छै
कीबोर्ड उपयोगकर्ताक कें अपनय पॉपओवर कें सक्रिय करय कें अनुमति देवय कें लेल, अहां कें ओकरा केवल HTML तत्वक मे जोड़ना चाहि जे परंपरागत रूप सं कीबोर्ड-केंद्रित आ इंटरैक्टिव (जैना लिंक या फॉर्म नियंत्रण) छै. यद्यपि मनमानी एचटीएमएल तत्व (जैना कि <span>
s) क॑ विशेषता जोड़ै स॑ फोकस करलऽ जाब॑ सकै छै tabindex="0"
, ई स॑ कीबोर्ड उपयोगकर्ता लेली गैर-इंटरएक्टिव तत्वऽ प॑ संभावित रूप स॑ परेशान करै वाला आरू भ्रमित करै वाला टैब स्टॉप जोड़लऽ जैतै, आरू अधिकांश सहायक प्रौद्योगिकी वर्तमान म॑ ई स्थिति म॑ पॉपओवर केरऽ सामग्री के घोषणा नै करै छै . एकरऽ अलावा, केवल अपनऽ पॉपओवर लेली ट्रिगर के रूप म॑ भरोसा नै करलऽ hover
जाय, कैन्हेंकि ई स॑ कीबोर्ड उपयोगकर्ता लेली ओकरा ट्रिगर करना असंभव होय जैतै ।
जखन कि आप विकल्प के साथ पोपोवर म॑ समृद्ध, संरचित एचटीएमएल डाल॑ सकै html
छियै, हम्मं॑ दृढ़ता स॑ अनुशंसा करै छियै कि आप अधिक मात्रा म॑ सामग्री जोड़ै स॑ बचै । पोपोवर क॑ वर्तमान म॑ काम करै के तरीका ई छै कि, एक बार प्रदर्शित करला के बाद, ओकरऽ सामग्री aria-describedby
विशेषता वाला ट्रिगर तत्व स॑ बान्हलऽ जाय छै । एकरऽ परिणामस्वरूप, पोपोवर केरऽ सामग्री केरऽ संपूर्णता क॑ सहायक तकनीक उपयोगकर्ता सिनी क॑ एक लम्बा, निर्बाध धारा के रूप म॑ घोषित करलऽ जैतै ।
एकरऽ अतिरिक्त, जबकि ई संभव छै कि अपनऽ पॉपओवर म॑ इंटरएक्टिव नियंत्रण (जैना कि फॉर्म तत्व या लिंक) क॑ भी शामिल करलऽ जाय (ई तत्वऽ क॑ whiteList
या अनुमत विशेषता आरू टैग म॑ जोड़ क॑), ई बात के ध्यान रखऽ कि वर्तमान म॑ पॉपओवर कीबोर्ड फोकस क्रम क॑ प्रबंधित नै करै छै । जखन कोनों कीबोर्ड उपयोगकर्ता पॉपओवर खोलै छै, तखन ध्यान ट्रिगर करय वाला तत्व पर रहय छै, आ जैना कि पॉपओवर आमतौर पर दस्तावेज कें संरचना मे ट्रिगर कें तुरंत पालन नै करय छै, अइ कें कोनों गारंटी नै छै कि आगू बढ़य/दबाबै छैTABएकटा कीबोर्ड उपयोगकर्ता केँ स्वयं पोपोवर मे ल' जायत. संक्षेप म॑, बस एक पॉपओवर म॑ इंटरैक्टिव नियंत्रण जोड़ला स॑ संभावना छै कि ई नियंत्रणऽ क॑ कीबोर्ड उपयोगकर्ता आरू सहायक प्रौद्योगिकी के उपयोगकर्ता लेली अप्राप्य/अप्रयोग्य बनाबै के संभावना छै, या कम स॑ कम एक तर्कहीन समग्र फोकस आदेश बनाबै के संभावना छै । एहि मामला मे, एकर बदला मे मोडल संवाद क उपयोग करबा पर विचार करू.
विकल्प
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-animation=""
.
sanitize
,
sanitizeFn
आ
whiteList
विकल्पक कें डेटा विशेषताक कें उपयोग करयत आपूर्ति नहि कैल जा सकय छै.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
एनीमेशन | बूलियन | सत्य | पोपोवर पर एकटा CSS फेड संक्रमण लागू करू |
पात्र | तार | तत्व | झूठ | झूठ | एकटा विशिष्ट तत्व मे पोपोवर जोड़ैत अछि। जेना : |
सामग्री | तार | तत्व | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त' ओकरा अपन |
देरी | नम्बर | वस्तु | ० | पोपोवर (ms) कें देखएय आ नुकाएय मे देरी - मैनुअल ट्रिगर प्रकार पर लागू नहि होयत छै यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै वस्तु संरचना अछि : १. |
एचटीएमएल | बूलियन | झूठ | पोपोवर मे एचटीएमएल डालू। यदि गलत छै, त jQuery कें text विधि कें उपयोग DOM मे सामग्री डालय कें लेल करल जैतय. यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू. |
प्लेसमेंट के लिये | तार | आयोजन | 'ठीक' | पोपोवर के पोजीशन कैसे करे - ऑटो | ऊपर | नीचे | बाएँ | ठीक. जब॑ कोनों फंक्शन क॑ प्लेसमेंट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा पॉपओवर डीओएम नोड क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ आरू ट्रिगरिंग एलिमेंट डीओएम नोड क॑ ओकरऽ दोसरऽ के रूप म॑ कॉल करलऽ जाय छै । |
चयनकर्ता | तार | झूठ | झूठ | यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त पॉपओवर वस्तुअक कें निर्दिष्ट लक्ष्यक कें लेल प्रत्यायोजित कैल जेतय. व्यवहार म॑ एकरऽ उपयोग डायनामिक एचटीएमएल सामग्री क॑ पॉपओवर जोड़ै लेली सक्षम करै लेली करलऽ जाय छै । ई आ एकटा जानकारीपूर्ण उदाहरण देखू . |
टेम्पलेट | डोरी | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
पोपोवर बनाबय काल उपयोग करबाक लेल एचटीएमएल बेस करू. पोपोवर के पोपोवर के
सबसँ बाहरी रैपर तत्व मे |
शीर्षक | तार | तत्व | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त' ओकरा अपन |
उत्प्रेरक | डोरी | 'क्लिक' करू। | पोपोवर कोना ट्रिगर होइत अछि - क्लिक करू | मंडराइत | फोकस | हाथ सं कएल गेल. अहाँ अनेक ट्रिगर पास क सकैत छी; एकरा सभकेँ एकटा रिक्त स्थानसँ अलग करू। manual कोनों अन्य ट्रिगर कें साथ संयोजित नहि कैल जा सकय छै. |
ऑफसेट | नम्बर | डोरी | ० | अपन लक्ष्य के सापेक्ष पोपोवर के ऑफसेट। अधिक जानकारी के लेल पॉपर के ऑफसेट डॉक्स देखू . |
fallbackप्लेसमेंट के बारे में | तार | सरणी | 'पलटी मरनाइ' | ई निर्दिष्ट करबाक अनुमति दिअ जे पॉपर फॉलबैक पर कोन स्थितिक उपयोग करत. अधिक जानकारी के लेल पॉपर के व्यवहार डॉक्स देखू |
कस्टमक्लास | तार | आयोजन | '' . | जखन पोपोवर देखाओल जायत तखन ओकरा मे क्लास जोड़ू। ध्यान रहे कि ई वर्ग टेम्पलेट म॑ निर्दिष्ट कोनो भी वर्ग के अलावा जोड़लऽ जैतै । एक सँ बेसी वर्ग जोड़बाक लेल, ओकरा रिक्त स्थान सँ अलग करू: अहां एकटा एहन फंक्शन सेहो पास क सकय छी जे एकटा स्ट्रिंग रिटर्न करबाक चाही जाहि मे अतिरिक्त क्लास नाम होएत. |
सीमा | तार | तत्त्व | 'स्क्रॉलपैरेंट'। | पोपोवर के ओवरफ्लो बाधा सीमा। 'viewport' , 'window' , 'scrollParent' , अथवा एकटा HTMLElement संदर्भ (केवल जावास्क्रिप्ट) क' मान स्वीकार करैत अछि . अधिक जानकारी क लेल Popper क preventOverflow docs देखू . |
सेनेटाइज करब | बूलियन | सत्य | सेनेटाइजेशन सक्षम या अक्षम करू। यदि सक्रिय भ 'template' गेल , 'content' आ 'title' विकल्प सेनेटाइज भ जायत। हमर जावास्क्रिप्ट दस्तावेजीकरण मे सेनेटाइजर खंड देखू . |
श्वेतसूची | वस्तु | पूर्वनिर्धारित मान | ऑब्जेक्ट जइ मे अनुमत विशेषता आ टैग होयत छै |
सेनेटाइज करबFn | शून्य | आयोजन | सुन्ना | एतय अहां अपन सेनेटाइज फंक्शन के सप्लाई क सकय छी. यदि अहां सेनेटाइजेशन करएय कें लेल समर्पित पुस्तकालय कें उपयोग करनाय पसंद करएयत छी त इ उपयोगी भ सकएय छै. |
पॉपरकॉन्फिग | शून्य | वस्तु | सुन्ना | बूटस्ट्रैप क' डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन बदलबाक लेल, पॉपर क कॉन्फ़िगरेशन देखू |
व्यक्तिगत पोपोवर के लिये डेटा विशेषताएँ
व्यक्तिगत पॉपओवर कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.
विधियाँ
अतुल्यकालिक विधि एवं संक्रमण
सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .
$().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')
कोनों तत्व कें पॉपओवर कें दिखावा या छिपाबै कें क्षमता कें टॉगल करयत छै.
$('#element').popover('toggleEnabled')
.popover('update')
कोनो तत्व क' पोपोवर क' स्थिति अपडेट करैत अछि.
$('#element').popover('update')
घटनाक्रम
घटना प्रकार | वर्णन |
---|---|
शो.बीएस.पोपओवर | show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. |
देखाओल गेल.bs.popover | ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
छिपाएँ.बीएस.पोपोवर | ई घटना तुरंत फायर कएल जाइत अछि जखन hide इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.गरीबी | ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
डालल गेल.bs.popover | ई घटना घटना के बाद फायर करलऽ जाय छै show.bs.popover जब॑ पॉपओवर टेम्पलेट क॑ डीओएम म॑ जोड़लऽ गेलऽ छै । |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})