പോപോവറുകൾ
നിങ്ങളുടെ സൈറ്റിലെ ഏത് ഘടകത്തിലേക്കും iOS-ൽ കാണപ്പെടുന്നത് പോലെ ബൂട്ട്സ്ട്രാപ്പ് പോപ്പോവറുകൾ ചേർക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.
പോപോവർ പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ:
- Popovers സ്ഥാനനിർണ്ണയത്തിനായി മൂന്നാം കക്ഷി ലൈബ്രറി Popper.js- നെ ആശ്രയിക്കുന്നു . bootstrap.js-ന് മുമ്പ് നിങ്ങൾ popper.min.js ഉൾപ്പെടുത്തണം അല്ലെങ്കിൽ പോപ്പവർ പ്രവർത്തിക്കുന്നതിന് Popper.js അടങ്ങിയിരിക്കുന്ന
bootstrap.bundle.min.js/ ഉപയോഗിക്കുക!bootstrap.bundle.js - Popovers ഒരു ഡിപൻഡൻസിയായി ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യമാണ്.
- ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്
util.js. - പ്രകടന കാരണങ്ങളാൽ പോപോവറുകൾ ഓപ്റ്റ്-ഇൻ ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
- പൂജ്യം നീളവും
titleമൂല്യങ്ങളുംcontentഒരിക്കലും പോപോവർ കാണിക്കില്ല. container: 'body'കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങളിൽ (ഞങ്ങളുടെ ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ മുതലായവ) റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ വ്യക്തമാക്കുക .- മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ പോപോവറുകൾ ട്രിഗർ ചെയ്യുന്നത് പ്രവർത്തിക്കില്ല.
- ഒരു റാപ്പർ എലമെന്റിൽ പോപ്പോവറുകൾ
.disabledഅല്ലെങ്കിൽdisabledഘടകങ്ങൾ ട്രിഗർ ചെയ്യണം. - ഒന്നിലധികം ലൈനുകളിൽ പൊതിഞ്ഞിരിക്കുന്ന ആങ്കറുകളിൽ നിന്ന് ട്രിഗർ ചെയ്യുമ്പോൾ, ആങ്കറുകളുടെ മൊത്തത്തിലുള്ള വീതിയ്ക്കിടയിൽ പോപോവറുകൾ കേന്ദ്രീകരിക്കും. ഈ സ്വഭാവം ഒഴിവാക്കാൻ
.text-nowrapനിങ്ങളുടെ s-ൽ ഉപയോഗിക്കുക .<a> - DOM-ൽ നിന്ന് അവയുടെ അനുബന്ധ ഘടകങ്ങൾ നീക്കംചെയ്യുന്നതിന് മുമ്പ് പോപോവറുകൾ മറച്ചിരിക്കണം.
ചില ഉദാഹരണങ്ങൾക്കൊപ്പം പോപോവറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണാൻ വായന തുടരുക.
ഒരു പേജിലെ എല്ലാ പോപോവറുകളും ആരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ data-toggleആട്രിബ്യൂട്ട് അനുസരിച്ച് അവയെ തിരഞ്ഞെടുക്കുന്നതാണ്:
$(function () {
$('[data-toggle="popover"]').popover()
})
ഒരു പാരന്റ് എലമെന്റിൽ നിങ്ങൾക്ക് ഒരു പോപോവറിനെ തടസ്സപ്പെടുത്തുന്ന ചില ശൈലികൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾ ഒരു ഇഷ്ടാനുസൃതം വ്യക്തമാക്കാൻ ആഗ്രഹിക്കും, 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ടോഗിൾ എലമെന്റിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഘടകത്തിന്റെ ഉപയോക്താവിന്റെ അടുത്ത ക്ലിക്കിൽ പോപോവറുകൾ ഡിസ്മിസ് ചെയ്യാൻ ട്രിഗർ ഉപയോഗിക്കുക .
ഡിസ്മിസ്-ഓൺ-അടുത്ത-ക്ലിക്കിന് പ്രത്യേക മാർക്ക്അപ്പ് ആവശ്യമാണ്
ശരിയായ ക്രോസ്-ബ്രൗസറിനും ക്രോസ്-പ്ലാറ്റ്ഫോം പെരുമാറ്റത്തിനും, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കണം, <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 ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക |
| കണ്ടെയ്നർ | ചരട് | മൂലകം | തെറ്റായ | തെറ്റായ | ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് പോപോവർ കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: |
| ഉള്ളടക്കം | ചരട് | മൂലകം | പ്രവർത്തനം | '' |
ഒരു ഫംഗ്ഷൻ നൽകിയാൽ, |
| കാലതാമസം | നമ്പർ | വസ്തു | 0 | പോപ്പോവർ (മി.എസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്ക്ക് കാലതാമസം ബാധകമാകും വസ്തുവിന്റെ ഘടന ഇതാണ്: |
| html | ബൂളിയൻ | തെറ്റായ | പോപോവറിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, textDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ jQuery-യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക. |
| പ്ലേസ്മെന്റ് | ചരട് | പ്രവർത്തനം | 'ശരി' | പോപോവർ എങ്ങനെ സ്ഥാപിക്കാം - ഓട്ടോ | മുകളിൽ | താഴെ | വിട്ടു | ശരിയാണ്. പ്ലെയ്സ്മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ പോപ്പോവർ DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേയും ആയി വിളിക്കുന്നു. സന്ദർഭം പോപോവർ |
| സെലക്ടർ | ചരട് | തെറ്റായ | തെറ്റായ | ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് പോപ്പോവർ ഒബ്ജക്റ്റുകൾ ഡെലിഗേറ്റ് ചെയ്യപ്പെടും. പ്രായോഗികമായി, പോപ്പോവറുകൾ ചേർക്കുന്നതിന് ഡൈനാമിക് HTML ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക . |
| ടെംപ്ലേറ്റ് | സ്ട്രിംഗ് | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
പോപ്പോവർ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML. പോപ്പോവറുകൾ പോപ്പോവറുകൾ
ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് |
| തലക്കെട്ട് | ചരട് | മൂലകം | പ്രവർത്തനം | '' |
ഒരു ഫംഗ്ഷൻ നൽകിയാൽ, |
| ട്രിഗർ | സ്ട്രിംഗ് | 'ക്ലിക്ക്' | പോപോവർ എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക. manualമറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല. |
| ഓഫ്സെറ്റ് | നമ്പർ | സ്ട്രിംഗ് | 0 | പോപോവറിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ്. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ ഓഫ്സെറ്റ് ഡോക്സ് കാണുക . |
| ഫാൾബാക്ക് പ്ലേസ്മെന്റ് | ചരട് | അറേ | 'ഫ്ലിപ്പ്' | ഫാൾബാക്കിൽ പോപ്പർ ഏത് സ്ഥാനമാണ് ഉപയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ അനുവദിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ പെരുമാറ്റ ഡോക്സ് കാണുക |
| അതിർത്തി | ചരട് | ഘടകം | 'സ്ക്രോൾ പേരന്റ്' | പോപോവറിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി. 'viewport', 'window', 'scrollParent', അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് (JavaScript മാത്രം) മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക്, Popper.js-ന്റെ പ്രിവൻറോ ഓവർഫ്ലോ ഡോക്സ് കാണുക . |
വ്യക്തിഗത പോപോവറുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ
മുകളിൽ വിശദീകരിച്ചത് പോലെ, വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.
അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും
എല്ലാ API രീതികളും അസമന്വിതവും ഒരു പരിവർത്തനം ആരംഭിക്കുന്നതുമാണ് . പരിവർത്തനം ആരംഭിച്ചയുടൻ അവർ വിളിക്കുന്ന ആളിലേക്ക് മടങ്ങുന്നു, പക്ഷേ അത് അവസാനിക്കുന്നതിന് മുമ്പ് . കൂടാതെ, ഒരു സംക്രമണ ഘടകത്തിലെ ഒരു മെത്തേഡ് കോൾ അവഗണിക്കപ്പെടും .
കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷൻ കാണുക.
ഒരു മൂലക ശേഖരണത്തിനായി പോപോവറുകൾ ആരംഭിക്കുന്നു.
ഒരു മൂലകത്തിന്റെ പോപോവർ വെളിപ്പെടുത്തുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു. ശീർഷകവും ഉള്ളടക്കവും പൂജ്യം നീളമുള്ള പോപോവറുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.
$('#element').popover('show')
ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.
$('#element').popover('hide')
ഒരു മൂലകത്തിന്റെ പോപോവർ ടോഗിൾ ചെയ്യുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.popoverഅല്ലെങ്കിൽ hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.
$('#element').popover('toggle')
ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു. ഡെലിഗേഷൻ ഉപയോഗിക്കുന്ന പോപോവറുകൾ ( ഓപ്ഷൻ ഉപയോഗിച്ച് സൃഷ്ടിച്ചവ )selector ഡിസെൻഡന്റ് ട്രിഗർ ഘടകങ്ങളിൽ വ്യക്തിഗതമായി നശിപ്പിക്കാൻ കഴിയില്ല.
$('#element').popover('dispose')
ഒരു മൂലകത്തിന്റെ പോപ്പോവറിന് കാണിക്കാനുള്ള കഴിവ് നൽകുന്നു. പോപോവറുകൾ ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുന്നു.
$('#element').popover('enable')
ഒരു മൂലകത്തിന്റെ പോപോവർ കാണിക്കാനുള്ള കഴിവ് നീക്കം ചെയ്യുന്നു. വീണ്ടും പ്രവർത്തനക്ഷമമാക്കിയാൽ മാത്രമേ പോപ്പോവർ കാണിക്കാൻ കഴിയൂ.
$('#element').popover('disable')
ഒരു മൂലകത്തിന്റെ പോപോവർ കാണിക്കാനോ മറയ്ക്കാനോ ഉള്ള കഴിവ് ടോഗിൾ ചെയ്യുന്നു.
$('#element').popover('toggleEnabled')
ഒരു മൂലകത്തിന്റെ പോപോവറിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.
$('#element').popover('update')
| ഇവന്റ് തരം | വിവരണം |
|---|---|
| show.bs.popover | showഇൻസ്റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു . |
| കാണിച്ചിരിക്കുന്നു.bs.popover | പോപോവർ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും). |
| hide.bs.popover | hideഇൻസ്റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും. |
| മറഞ്ഞിരിക്കുന്നു.bs.popover | പോപോവർ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും). |
| insert.bs.popover | show.bs.popoverDOM-ലേക്ക് പോപോവർ ടെംപ്ലേറ്റ് ചേർത്തപ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})