Source

पोपोवर्स इति

भवतः साइट् मध्ये कस्मिन् अपि तत्त्वे iOS मध्ये दृश्यमानानि इव Bootstrap popovers योजयितुं दस्तावेजीकरणं उदाहरणानि च ।

अवलोकनम्

popover प्लगिन् इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:

  • Popovers स्थितिनिर्धारणार्थं 3rd party library Popper.js इत्यस्य उपरि अवलम्बन्ते । भवन्तः bootstrap.js इत्यस्मात् पूर्वं popper.min.js इत्येतत्bootstrap.bundle.min.js अवश्यमेव समाविष्टं कुर्वन्तु अथवा / इत्यस्य उपयोगं कुर्वन्तु bootstrap.bundle.jsयस्मिन् Popper.js अस्ति यत् popovers कार्यं कर्तुं शक्नोति!
  • Popovers इत्यस्य आश्रयरूपेण tooltip plugin इत्यस्य आवश्यकता भवति ।
  • यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकताutil.js अस्ति .
  • Popovers कार्यप्रदर्शनकारणात् opt-in भवन्ति, अतः भवान् स्वयमेव तान् आरभणीयम् .
  • शून्य-दीर्घता titleतथा contentमूल्यानि कदापि पोपोवरं न दर्शयिष्यन्ति।
  • container: 'body'अधिकजटिलघटकेषु (यथा अस्माकं निवेशसमूहाः, बटनसमूहाः इत्यादयः) रेण्डरिंगसमस्याः परिहरितुं निर्दिशन्तु ।
  • गुप्ततत्त्वेषु पोपोवर्स-प्रवर्तनं कार्यं न करिष्यति ।
  • Popovers for .disabledor disabledelements इत्यस्य कृते wrapper element इत्यस्य उपरि अवश्यमेव ट्रिगर करणीयम् ।
  • यदा बहुरेखाः वेष्टयन्ति लंगरात् प्रेरिताः भवन्ति तदा पोपोवर्स लंगरस्य समग्रविस्तारस्य मध्ये केन्द्रीकृताः भविष्यन्ति । एतत् व्यवहारं परिहरितुं .text-nowrapभवतः s इत्यस्य उपयोगं कुर्वन्तु।<a>
  • DOM तः तेषां तत्सम्बद्धानां तत्त्वानां निष्कासनात् पूर्वं पोपोवर्सः अवश्यमेव गोपनीयाः ।
  • छाया DOM इत्यस्य अन्तः एकस्य तत्त्वस्य धन्यवादेन Popovers ट्रिगर कर्तुं शक्यते ।

अस्य घटकस्य एनिमेशन प्रभावः prefers-reduced-motionमीडिया प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

केनचित् उदाहरणैः सह popovers कथं कार्यं कुर्वन्ति इति द्रष्टुं पठन्तः भवन्तु।

उदाहरणम् : सर्वत्र popovers सक्षमं कुर्वन्तु

पृष्ठे सर्वान् popovers आरम्भयितुं एकः उपायः स्यात् तेषां data-toggleविशेषताद्वारा चयनं करणीयम्:

$(function () {
  $('[data-toggle="popover"]').popover()
})

उदाहरणम् : containerविकल्पस्य उपयोगः

यदा भवतां समीपे मूलतत्त्वे काश्चन शैल्याः सन्ति ये popover इत्यनेन सह बाधां जनयन्ति तदा भवान् कस्टम् निर्दिष्टुम् इच्छति containerयेन popover इत्यस्य 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टॉगल-तत्त्वात् भिन्नस्य तत्त्वस्य उपयोक्तुः अग्रिम-क्लिक्-करणे पोपोवर्स-निराकरणाय ट्रिगरस्य उपयोगं कुर्वन्तु ।

dismiss-on-next-click कृते विशिष्टं मार्कअप आवश्यकम्

सम्यक् क्रॉस्-ब्राउजर तथा क्रॉस्-प्लेटफॉर्म व्यवहाराय भवद्भिः टैग् इत्यस्य उपयोगः अवश्यं करणीयः <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अन्तरक्रियाशीलाः न सन्ति, अर्थात् उपयोक्तारः पोपोवर (अथवा टूल्टिप्) प्रेरयितुं तान् माउण्ड् कर्तुं वा क्लिक् कर्तुं वा न शक्नुवन्ति । एकं कार्यपरिहाररूपेण, भवान् एकस्मात् wrapper तः popover ट्रिगर कर्तुम् इच्छति <div>अथवा तथा च on the disabled element इति <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>

प्रयोगः

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

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

कीबोर्डस्य सहायकप्रौद्योगिकीप्रयोक्तृणां कृते च पोपोवर्स् कार्यं कर्तुं करणम्

कीबोर्ड-उपयोक्तृभ्यः स्वस्य पोपोवर-सक्रियीकरणस्य अनुमतिं दातुं, भवान् केवलं HTML-तत्त्वेषु योजयितव्यः ये पारम्परिकरूपेण कीबोर्ड-केन्द्रित-अन्तर्क्रियाशीलाः (यथा लिङ्क् अथवा रूप-नियन्त्रणानि) सन्ति यद्यपि मनमाना HTML तत्त्वानि (s इत्यादीनि <span>) विशेषतां योजयित्वा केन्द्रीकृतानि कर्तुं शक्यन्ते tabindex="0", तथापि एतेन कीबोर्ड-उपयोक्तृणां कृते गैर-अन्तर्क्रियाशील-तत्त्वेषु सम्भाव्य-कष्टप्रदं भ्रान्तं च ट्याब्-स्टॉप् योजितं भविष्यति, तथा च अधिकांश-सहायक-प्रौद्योगिकीः सम्प्रति अस्मिन् परिस्थितौ पोपोवरस्य सामग्रीं न घोषयन्ति . अतिरिक्तरूपेण, केवलं भवतः popovers कृते trigger इति न अवलम्बयन्तु hover, यतः एतेन कीबोर्ड-उपयोक्तृणां कृते trigger कर्तुं असम्भवाः भविष्यन्ति ।

यद्यपि भवान् विकल्पेन सह popovers मध्ये समृद्धं, संरचितं HTML सम्मिलितुं शक्नोति तथापि htmlवयं दृढतया अनुशंसयामः यत् भवान् अत्यधिकमात्रायां सामग्रीं योजयितुं परिहरतु। सम्प्रति popovers इत्यस्य कार्यं यथा भवति तत् अस्ति यत्, एकवारं प्रदर्शितं जातं चेत्, तेषां सामग्री aria-describedbyविशेषतायुक्तेन trigger element इत्यनेन सह बद्धा भवति । फलतः, ​​popover इत्यस्य सामग्रीयाः सम्पूर्णता सहायकप्रौद्योगिकीप्रयोक्तृभ्यः एकः दीर्घः, अबाधितः धारारूपेण घोषितः भविष्यति।

अतिरिक्तरूपेण, यद्यपि भवतः popover मध्ये अन्तरक्रियाशीलनियन्त्रणानि (यथा रूपतत्त्वानि अथवा लिङ्कानि) अपि समावेशयितुं शक्यते (एतानि तत्त्वानि whiteListअथवा अनुमतविशेषतासु टैग्षु च योजयित्वा), तदा अवगच्छन्तु यत् सम्प्रति popover कीबोर्ड फोकस क्रमं न प्रबन्धयति यदा कीबोर्ड-उपयोक्ता एकं पोपोवरं उद्घाटयति तदा ट्रिगर-तत्त्वे एव ध्यानं तिष्ठति, तथा च यतः पोपोवरः सामान्यतया दस्तावेजस्य संरचनायां ट्रिगरस्य तत्क्षणं अनुसरणं न करोति, अतः अग्रे गमनस्य/निपीडनस्य गारण्टी नास्तिTABएकं कीबोर्ड-उपयोक्तारं स्वयं popover मध्ये स्थापयिष्यति । संक्षेपेण, केवलं एकस्मिन् popover मध्ये अन्तरक्रियाशीलनियन्त्रणानि योजयित्वा एतानि नियन्त्रणानि कीबोर्ड-उपयोक्तृणां सहायक-प्रौद्योगिकीनां च उपयोक्तृणां कृते अप्राप्य/अप्रयोज्य-करणस्य सम्भावना वर्तते, अथवा न्यूनतया अतार्किक-समग्र-केन्द्रीकरण-क्रमस्य कृते भवति एतेषु सति, तस्य स्थाने मोडल् संवादस्य उपयोगं विचारयन्तु ।

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""

ध्यानं कुर्वन्तु यत् सुरक्षाकारणात् sanitize, sanitizeFnतथा whiteListविकल्पाः दत्तांशविशेषतानां उपयोगेन आपूर्तिं कर्तुं न शक्यन्ते ।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ popover मध्ये CSS fade संक्रमणं प्रयोजयन्तु
पात्रम् तार | तत्व | असत्य असत्य

विशिष्टतत्त्वे पोपोवरं योजयति । उदाहरणम् : container: 'body'. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग-तत्त्वस्य समीपे दस्तावेजस्य प्रवाहे पोपोवरं स्थापयितुं शक्नोति - यत् विण्डो-आकार-परिवर्तनस्य समये पोपोवरं ट्रिगरिंग-तत्त्वात् दूरं प्लवितुं न निवारयिष्यति

विषयः तार | तत्व | नियोग '' इति ।

data-contentयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं सामग्रीमूल्यम् ।

यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।

विलम्बः संख्या | वस्तु

popover (ms) दर्शयितुं गोपनं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { "show": 500, "hide": 100 }

html बूलियन इति असत्य popover मध्ये HTML सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य textविधिः उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम् तार | नियोग 'दक्षिणः'

पोपोवर को कैसे रखें - ऑटो | शीर्ष | तले | वाम | दक्षिणः।
यदा autoनिर्दिष्टं भवति तदा गतिशीलरूपेण पोपोवरं पुनः उन्मुखं करिष्यति ।

यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं उपयुज्यते तदा तत् popover DOM नोड् इत्यनेन सह प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM नोड् इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः thispopover दृष्टान्तं प्रति सेट् भवति ।

चयनकर्ता तार | असत्य असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्यं प्रति popover वस्तुनि प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशील HTML सामग्रीं popovers योजयितुं सक्षमीकरणाय भवति । एतत् एकं च सूचनाप्रदं उदाहरणं पश्यन्तु .
टेम्पलेट सूत्र '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

popover इत्यस्य निर्माणकाले उपयोक्तुं HTML आधारं कुर्वन्तु ।

पोपोवरस्य titleअन्तः प्रविष्टं भविष्यति .popover-header.

पोपोवरस्य contentअन्तः प्रविष्टं भविष्यति .popover-body.

.arrowपोपोवरस्य बाणः भविष्यति।

बाह्यतमस्य आवरणतत्त्वस्य .popoverवर्गः भवेत् ।

शीर्षक तार | तत्व | नियोग '' इति ।

titleयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् ।

यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।

प्रवर्त्यम् सूत्र 'क्लिक्' इति । popover कथं प्रवर्तते - क्लिक् कुर्वन्तु | भ्रमति | फोकस | शास्त्र। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। manualअन्येन कस्यचित् उत्प्रेरकेन सह संयोजितुं न शक्यते।
offset इति संख्या | सूत्र अपने लक्ष्य के सापेक्ष पोपोवर का ऑफसेट। अधिकविवरणार्थं Popper.js इत्यस्य offset docs पश्यन्तु ।
fallbackस्थापनम् तार | सरणी 'पर्यस्' Fallback इत्यत्र Popper इत्यस्य उपयोगः कस्य स्थानस्य उपयोगं करिष्यति इति निर्दिष्टुं अनुमन्यताम् । अधिकविवरणार्थं Popper.js इत्यस्य व्यवहारदस्तावेजं पश्यन्तु
सीमा तार | तत्व 'scrollParent' इति । पोपोवर की अतिप्रवाह बाध्यता सीमा। 'viewport', 'window', 'scrollParent', अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति (केवलं JavaScript) । अधिकसूचनार्थं Popper.js इत्यस्य preventOverflow docs पश्यन्तु ।
सेनेटाइज करें बूलियन इति सत्यम्‌ सेनेटाइजेशनं सक्षमं निष्क्रियं वा कुर्वन्तु। यदि सक्रियम् 'template'अस्ति , 'content'तथा 'title'विकल्पाः सेनिट् कृताः भविष्यन्ति।
whiteList इति वस्तु पूर्वनिर्धारितं मूल्यम् वस्तु यस्मिन् अनुमतविशेषताः टैग् च सन्ति
सेनेटाइजFn शून्य | नियोग लुप्तमूल्य अत्र भवान् स्वस्य सेनिटाइज् फंक्शन् आपूर्तिं कर्तुं शक्नोति। यदि भवान् स्वच्छीकरणं कर्तुं समर्पितं पुस्तकालयं उपयोक्तुं रोचते तर्हि एतत् उपयोगी भवितुम् अर्हति ।
popperConfig इति शून्य | वस्तु लुप्तमूल्य Bootstrap इत्यस्य पूर्वनिर्धारितं Popper.js विन्यासं परिवर्तयितुं, Popper.js इत्यस्य विन्यासं पश्यन्तु

व्यक्तिगत पोपोवर्स् कृते आँकडा विशेषताः

व्यक्तिगत पोपोवर्स् कृते विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते, यथा उपरि व्याख्यातम् ।

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

$().popover(options)

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

.popover('show')

एकस्य तत्त्वस्य पोपोवरं प्रकाशयति। popover यथार्थतः दर्शितस्य पूर्वं (अर्थात् shown.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते । येषां शीर्षकं सामग्री च शून्य-दीर्घतायाः द्वौ अपि भवतः पोपोवर्सः कदापि न प्रदर्शिताः भवन्ति ।

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

.popover('hide')

एकस्य तत्त्वस्य पोपोवरं गोपयति। पोपोवरस्य वास्तविकरूपेण गोपनात् पूर्वं (अर्थात् hidden.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।

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

.popover('toggle')

एकस्य तत्त्वस्य popover इत्येतत् टॉगल करोति । popover इत्यस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.popoveror hidden.bs.popoverevent इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।

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

.popover('dispose')

एकस्य तत्त्वस्य पोपोवरं गोपयति, नाशयति च। प्रतिनिधिमण्डलस्य उपयोगं कुर्वन्तः पोपोवर्स् (ये विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टं कर्तुं न शक्यते ।

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

.popover('enable')

एकस्य तत्त्वस्य popover दर्शयितुं क्षमता ददाति। Popovers पूर्वनिर्धारितरूपेण सक्षमम् अस्ति ।

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

.popover('disable')

तत्त्वस्य पोपोवरस्य दर्शयितुं क्षमताम् अपसारयति । पोपोवरः केवलं पुनः सक्षमीकरणे एव दर्शयितुं समर्थः भविष्यति ।

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

.popover('toggleEnabled')

एकस्य तत्त्वस्य popover दर्शयितुं गोपनीयं वा क्षमता टॉग्ल करोति ।

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

.popover('update')

एकस्य तत्त्वस्य popover इत्यस्य स्थितिं अद्यतनं करोति ।

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

घटनाः

घटना प्रकार वर्णनम्‌
show.bs.popover इति दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.popover इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.popover इति इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
गुप्त.ब्स्.दरिद्रम् इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
सम्मिलितम्।ब्स्.दरिद्रम् इदं इवेण्ट् इवेण्ट् इत्यस्य अनन्तरं show.bs.popoverयदा popover टेम्पलेट् DOM मध्ये योजितं भवति तदा निष्कासितम् अस्ति ।
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})