पोपोवर्स
तुंदी साइट पर कुसै बी तत्व च आईओएस च पाए जाने आह् ले जनेह् बूटस्ट्रैप पॉपओवरें गी जोड़ने आस्तै दस्तावेजीकरण ते उदाहरण।
अवलोकन करना
पॉपओवर प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:
- पोपोवर्स पोजीशनिंग लेई 3rd पार्टी लाइब्रेरी पॉपर पर भरोसा करदे न। तुसें गी bootstrap.js थमां पैह् ले popper.min.js गी शामल करना होग जां
bootstrap.bundle.min.js
/ दा इस्तेमाल करना होगbootstrap.bundle.js
जेह् ड़ा Popper गी शामल करदा ऐ तां जे popovers कम्म करने आस्तै! - पोपोवर्स गी इक निर्भरता दे रूप च टूलटिप प्लगइन दी लोड़ होंदी ऐ।
- जेकर तुस स्रोत थमां साढ़ी जावास्क्रिप्ट बना करदे ओ तां इसगी
util.js
. - पोपोवर्स प्रदर्शन कारणें कन्नै ऑप्ट-इन होंदे न , इसलेई तुसेंगी अपने आपै गी उनेंगी आरंभ करना होग .
- शून्य-लंबाई
title
तेcontent
मूल्य कदें बी पोपोवर नेईं दस्सन। - होर जटिल घटकें च रेंडरिंग समस्याएं थमां बचने आस्तै निर्दिश्ट करो
container: 'body'
(जियां साढ़े इनपुट समूह, बटन समूह, बगैरा)। - छिपे दे तत्वें पर पोपोवर गी ट्रिगर करना कम्म नेईं करग।
.disabled
या तत्वें लेई पोपोवर्सdisabled
गी इक रैपर तत्व पर ट्रिगर करना होग।- जदूं लंगरें थमां ट्रिगर कीता जंदा ऐ जेह् ड़े मते सारे लाइनें दे पार लपेटदे न, तां पोपोवर लंगरें दी समग्र चौड़ाई दे बिच्च केंद्रत होङन। इस बर्ताव कोला बचने लेई
.text-nowrap
अपने एस पर इस्तेमाल करो ।<a>
- पोपोवर्स गी डीओएम थमां उंदे अनुरूप तत्वें गी हटाने थमां पैह् ले छिपाना जरूरी ऐ।
- पोपोवर्स गी इक शैडो डीओएम दे अंदर इक तत्व दी बदौलत ट्रिगर कीता जाई सकदा ऐ।
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 च इसदे आस्तै वर्कअराउंड अपने पॉपोवरें पर जरूरत मताबक GPU त्वरण गी अक्षम करना ऐ.
सुझाया गया ठीक करना:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
कीबोर्ड ते सहायक तकनीक दे बरतूनी आस्तै पोपोवरें गी कम्म करने आस्तै बनाना
कीबोर्ड बरतूनी गी अपने पॉपओवरें गी सक्रिय करने दी इजाजत देने आस्तै, तुसेंगी उनेंगी सिर्फ HTML तत्वें च गै जोड़ना चाहिदा जेह् ड़े परंपरागत रूप कन्नै कीबोर्ड-केंद्रित ते इंटरएक्टिव (जिऱयां लिंक जां फार्म नियंत्रण) होंदे न। हालांकि मनमानी HTML तत्वें (जिऱयां <span>
s) गी विशेषता गी जोड़ियै फोकस करने योग्य बनाया जाई सकदा ऐ tabindex="0"
, एह् कीबोर्ड बरतूनी आस्तै गैर-इंटरएक्टिव तत्वें पर संभावित परेशान करने आह् ले ते भ्रमित करने आह् ले टैब स्टॉप जोड़ग , ते इस स्थिति च मते सारे सहायक तकनीकें इसलै पोपोवर दी सामग्री दी घोशणा नेईं करदियां न ऐ . इसदे अलावा, अपने पॉपओवरें लेई ट्रिगर दे रूप च सिर्फ इस पर भरोसा नेईं hover
करो, की जे इस कन्नै कीबोर्ड बरतूनी आस्तै उनेंगी ट्रिगर करना असंभव होई जाग.
जदके तुस विकल्प कन्नै पोपोवर्स च समृद्ध, संरचित HTML सम्मिलित करी सकदे ओ html
, तां अस सख्त सलाह दिंदे आं जे तुस मती मात्रा च सामग्री जोड़ने थमां बचो। पोपोवरें दा इसलै कम्म करने दा तरीका एह् ऐ जे, इक बारी प्रदर्शत होने पर, उंदी सामग्री aria-describedby
विशेषता कन्नै ट्रिगर तत्व कन्नै जुड़ी दी ऐ। नतीजे च, पोपोवर दी पूरी सामग्री गी सहायक तकनीक दे बरतूनकर्ताएं गी इक लम्मी, निर्बाध धारा दे रूप च घोशित कीता जाग।
इसदे अलावा, जदूं के अपने पोपोवर च इंटरएक्टिव नियंत्रणें (जिऱयां फार्म तत्व जां लिंक) गी बी शामल करना संभव ऐ (इ’नें तत्वें गी whiteList
जां अनुमति दित्ती गेदी विशेषताएं ते टैगें च जोड़ियै), तां एह् ध्यान रक्खो जे इसलै पोपोवर कीबोर्ड फोकस क्रम गी प्रबंधत नेईं करदा ऐ. जदूं कोई कीबोर्ड बरतूनी इक पोपोवर खोह् लदा ऐ तां ध्यान ट्रिगर करने आह् ले तत्व पर गै रौंह् दा ऐ , ते जिऱयां पॉपओवर आमतौर पर दस्तावेज दी संरचना च ट्रिगर दा तुरत पालन नेईं करदा ऐ , इस करियै अग्गें बधने / दबाने दी कोई गारंटी नेईं ऐTABइक कीबोर्ड बरतूनी गी अपने आपै च पोपोवर च लेई जाह् ग। संक्षेप च, बस इक पॉपओवर च इंटरएक्टिव नियंत्रणें गी जोड़ने कन्नै संभावना ऐ जे इनें नियंत्रणें गी कीबोर्ड बरतूनी ते सहायक तकनीकें दे बरतूनकर्ताएं आस्तै अप्राप्य/अप्रयोग्य बनाई दित्ता जा, जां घट्ट शा घट्ट इक गैर-तार्किक समग्र फोकस आर्डर बनाने दी संभावना ऐ। इनें मामलें च, इसदे बजाय इक मोडल संवाद दा इस्तेमाल करने पर विचार करो।
विकल्प ऐ
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-animation=""
.
sanitize
,
sanitizeFn
ते
whiteList
विकल्पें गी डेटा विशेषताएं दा इस्तेमाल करियै सप्लाई नेईं कीता जाई सकदा ऐ.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
एनीमेशन दा | बूलियन | सच्च | पोपोवर पर इक सीएसएस फीड संक्रमण लागू करो |
कंटेनर दा | तार | तत्व | गलत | गलत | पोपोवर गी इक विशिष्ट तत्व कन्नै जोड़दा ऐ। उदाहरण : |
समग्गरी | तार | तत्व | फंक्शन | '' ऐ। |
|
चिर | नंबर | चीज | ० ऐ | पोपोवर गी दस्सने ते छिपाने च देरी (ms) - मैन्युअल ट्रिगर प्रकार पर लागू नेईं होंदा ऐ जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ वस्तु संरचना ऐ : |
एचटीएमएल ऐ | बूलियन | गलत | पोपोवर च एचटीएमएल सम्मिलित करो। जेकर गलत ऐ तां jQuery दी text विधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो. |
प्लेसमेंट दा | तार | फंक्शन | 'स्हेई' | पोपोवर गी कैसे पोजीशन देना - ऑटो | टॉप | नीचे | बाईं ओर | स्हेई. जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी पोपोवर डीओएम नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व डीओएम नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। |
चयनकर्ता ऐ | तार | गलत | गलत | जेकर कोई चयनकर्ता उपलब्ध करोआया गेआ ऐ तां पोपोवर वस्तुएं गी निर्दिश्ट लक्ष्यें गी सौंपेआ जाग। व्यवहार च, इसदा इस्तेमाल गतिशील HTML सामग्री गी पॉपओवर जोड़ने च सक्षम बनाने लेई कीता जंदा ऐ। एह् ते इक जानकारीपूर्ण उदाहरण दिक्खो . |
टेम्पलेट ऐ | डोर | '<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 डॉक्स दिक्खो . |
सेनेटाइज करना | बूलियन | सच्च | सेनेटाइजेशन गी सक्षम जां अक्षम करो। अगर सक्रिय कीता गेआ ऐ '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 इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बी.एस.पोपोवर | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपओवर गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
छिपाओ।बीएस.पोपोवर | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपा।बीएस.गरीबी | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपोवर बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
डाला।बीएस.गरीबी | इस घटना गी उस show.bs.popover घटना दे बाद फायर कीता जंदा ऐ जिसलै पोपोवर टेम्पलेट गी डीओएम च जोड़ेआ गेआ ऐ. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})