in English

പോപോവറുകൾ

നിങ്ങളുടെ സൈറ്റിലെ ഏത് ഘടകത്തിലേക്കും iOS-ൽ കാണപ്പെടുന്നത് പോലെ ബൂട്ട്‌സ്‌ട്രാപ്പ് പോപ്പോവറുകൾ ചേർക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

അവലോകനം

പോപോവർ പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ:

  • Popovers പൊസിഷനിംഗിനായി മൂന്നാം കക്ഷി ലൈബ്രറി പോപ്പറിനെ ആശ്രയിക്കുന്നു . bootstrap.js-ന് മുമ്പ് നിങ്ങൾ popper.min.js ഉൾപ്പെടുത്തണം അല്ലെങ്കിൽ പോപ്പവർ പ്രവർത്തിക്കുന്നതിന് പോപ്പർ അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക!bootstrap.bundle.js
  • പോപോവറുകൾക്ക് ഒരു ഡിപൻഡൻസിയായി ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യമാണ്.
  • ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js .
  • പ്രകടന കാരണങ്ങളാൽ പോപോവറുകൾ ഓപ്റ്റ്-ഇൻ ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
  • പൂജ്യം നീളവും titleമൂല്യങ്ങളും contentഒരിക്കലും പോപോവർ കാണിക്കില്ല.
  • container: 'body'കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങളിൽ (ഞങ്ങളുടെ ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ മുതലായവ) റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ വ്യക്തമാക്കുക .
  • മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ പോപോവറുകൾ ട്രിഗർ ചെയ്യുന്നത് പ്രവർത്തിക്കില്ല.
  • ഒരു റാപ്പർ എലമെന്റിൽ പോപ്പോവറുകൾ .disabledഅല്ലെങ്കിൽ disabledഘടകങ്ങൾ ട്രിഗർ ചെയ്യണം.
  • ഒന്നിലധികം ലൈനുകളിൽ പൊതിഞ്ഞിരിക്കുന്ന ആങ്കറുകളിൽ നിന്ന് ട്രിഗർ ചെയ്യുമ്പോൾ, ആങ്കറുകളുടെ മൊത്തത്തിലുള്ള വീതിയ്ക്കിടയിൽ പോപോവറുകൾ കേന്ദ്രീകരിക്കും. ഈ സ്വഭാവം ഒഴിവാക്കാൻ .text-nowrapനിങ്ങളുടെ s-ൽ ഉപയോഗിക്കുക .<a>
  • DOM-ൽ നിന്ന് അവയുടെ അനുബന്ധ ഘടകങ്ങൾ നീക്കംചെയ്യുന്നതിന് മുമ്പ് പോപോവറുകൾ മറച്ചിരിക്കണം.
  • ഷാഡോ DOM-നുള്ളിലെ ഒരു ഘടകത്തിന് നന്ദി പറഞ്ഞ് പോപോവറുകൾ പ്രവർത്തനക്ഷമമാക്കാം.
സ്ഥിരസ്ഥിതിയായി, ഈ ഘടകം ബിൽറ്റ്-ഇൻ ഉള്ളടക്ക സാനിറ്റൈസർ ഉപയോഗിക്കുന്നു, ഇത് വ്യക്തമായി അനുവദനീയമല്ലാത്ത ഏതെങ്കിലും HTML ഘടകങ്ങളെ നീക്കം ചെയ്യുന്നു. കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷനിലെ സാനിറ്റൈസർ വിഭാഗം കാണുക .
ഈ ഘടകത്തിന്റെ ആനിമേഷൻ പ്രഭാവം 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ടോഗിൾ എലമെന്റിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഘടകത്തിന്റെ ഉപയോക്താവിന്റെ അടുത്ത ക്ലിക്കിൽ പോപോവറുകൾ ഡിസ്മിസ് ചെയ്യാൻ ട്രിഗർ ഉപയോഗിക്കുക .

ഡിസ്മിസ്-ഓൺ-അടുത്ത-ക്ലിക്കിന് പ്രത്യേക മാർക്ക്അപ്പ് ആവശ്യമാണ്

ശരിയായ ക്രോസ്-ബ്രൗസറിനും ക്രോസ്-പ്ലാറ്റ്ഫോം പെരുമാറ്റത്തിനും, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കണം, <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 ത്വരണം

ജിപിയു ആക്സിലറേഷനും പരിഷ്കരിച്ച സിസ്റ്റം ഡിപിഐയും കാരണം വിൻഡോസ് 10 ഉപകരണങ്ങളിൽ പോപോവറുകൾ ചിലപ്പോൾ മങ്ങിയതായി കാണപ്പെടും. നിങ്ങളുടെ പോപോവറുകളിൽ ആവശ്യാനുസരണം ജിപിയു ആക്സിലറേഷൻ പ്രവർത്തനരഹിതമാക്കുക എന്നതാണ് v4-ൽ ഇതിനുള്ള പ്രതിവിധി.

നിർദ്ദേശിച്ച പരിഹാരം:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

കീബോർഡ്, അസിസ്റ്റീവ് ടെക്നോളജി ഉപയോക്താക്കൾക്കായി പോപോവറുകൾ പ്രവർത്തിക്കുന്നു

നിങ്ങളുടെ പോപോവറുകൾ സജീവമാക്കാൻ കീബോർഡ് ഉപയോക്താക്കളെ അനുവദിക്കുന്നതിന്, പരമ്പരാഗതമായി കീബോർഡ് ഫോക്കസ് ചെയ്യാവുന്നതും സംവേദനാത്മകവുമായ (ലിങ്കുകളോ ഫോം നിയന്ത്രണങ്ങളോ പോലുള്ളവ) HTML ഘടകങ്ങളിലേക്ക് മാത്രമേ അവയെ ചേർക്കാവൂ. ആട്രിബ്യൂട്ട് ചേർക്കുന്നതിലൂടെ അനിയന്ത്രിതമായ HTML ഘടകങ്ങൾ (ഉദാഹരണത്തിന് <span>) ഫോക്കസ് ചെയ്യാമെങ്കിലും tabindex="0", ഇത് കീബോർഡ് ഉപയോക്താക്കൾക്ക് സംവേദനാത്മകമല്ലാത്ത ഘടകങ്ങളിൽ ശല്യപ്പെടുത്തുന്നതും ആശയക്കുഴപ്പമുണ്ടാക്കുന്നതുമായ ടാബ് സ്റ്റോപ്പുകൾ ചേർക്കും, കൂടാതെ മിക്ക സഹായ സാങ്കേതിക വിദ്യകളും നിലവിൽ ഈ സാഹചര്യത്തിൽ പോപ്പോവറിന്റെ ഉള്ളടക്കം പ്രഖ്യാപിക്കുന്നില്ല. . hoverകൂടാതെ, കീബോർഡ് ഉപയോക്താക്കൾക്ക് പ്രവർത്തനക്ഷമമാക്കുന്നത് അസാധ്യമാക്കുന്നതിനാൽ, നിങ്ങളുടെ പോപോവറുകളുടെ ട്രിഗറായി മാത്രം ആശ്രയിക്കരുത് .

പോപോവറുകളിൽ നിങ്ങൾക്ക് സമ്പന്നമായ, ഘടനാപരമായ HTML htmlഓപ്ഷൻ ഉൾപ്പെടുത്താൻ കഴിയുമെങ്കിലും, അമിതമായ ഉള്ളടക്കം ചേർക്കുന്നത് ഒഴിവാക്കണമെന്ന് ഞങ്ങൾ ശക്തമായി ശുപാർശ ചെയ്യുന്നു. aria-describedbyപോപോവറുകൾ നിലവിൽ പ്രവർത്തിക്കുന്ന രീതി, ഒരിക്കൽ പ്രദർശിപ്പിച്ചാൽ, അവയുടെ ഉള്ളടക്കം ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ട്രിഗർ എലമെന്റുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു എന്നതാണ് . തൽഫലമായി, പോപോവറിന്റെ മുഴുവൻ ഉള്ളടക്കവും സഹായ സാങ്കേതിക ഉപയോക്താക്കൾക്ക് ഒരു നീണ്ട, തടസ്സമില്ലാത്ത സ്ട്രീം ആയി പ്രഖ്യാപിക്കപ്പെടും.

കൂടാതെ, നിങ്ങളുടെ പോപ്പോവറിൽ ഇന്ററാക്ടീവ് നിയന്ത്രണങ്ങളും (ഫോം ഘടകങ്ങളോ ലിങ്കുകളോ പോലുള്ളവ) ഉൾപ്പെടുത്താൻ കഴിയുമെങ്കിലും (ഈ ഘടകങ്ങൾ whiteListഅല്ലെങ്കിൽ അനുവദനീയമായ ആട്രിബ്യൂട്ടുകളിലേക്കും ടാഗുകളിലേക്കും ഈ ഘടകങ്ങൾ ചേർക്കുന്നതിലൂടെ), നിലവിൽ കീബോർഡ് ഫോക്കസ് ക്രമം പോപോവർ നിയന്ത്രിക്കുന്നില്ലെന്ന് അറിയുക. ഒരു കീബോർഡ് ഉപയോക്താവ് ഒരു പോപോവർ തുറക്കുമ്പോൾ, ട്രിഗറിംഗ് എലമെന്റിൽ ഫോക്കസ് നിലനിൽക്കും, കൂടാതെ ഡോക്യുമെന്റിന്റെ ഘടനയിലെ ട്രിഗറിനെ പോപോവർ ഉടനടി പിന്തുടരാത്തതിനാൽ, മുന്നോട്ട് നീങ്ങുന്നു/അമർത്തുന്നു എന്നതിന് യാതൊരു ഉറപ്പുമില്ല.TABകീബോർഡ് ഉപയോക്താവിനെ പോപോവറിലേക്ക് തന്നെ നീക്കും. ചുരുക്കത്തിൽ, ഒരു പോപോവറിലേക്ക് സംവേദനാത്മക നിയന്ത്രണങ്ങൾ ചേർക്കുന്നത് കീബോർഡ് ഉപയോക്താക്കൾക്കും സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്കും ഈ നിയന്ത്രണങ്ങൾ ലഭ്യമല്ലാത്ത/ഉപയോഗയോഗ്യമല്ലാതാക്കാൻ സാധ്യതയുണ്ട്, അല്ലെങ്കിൽ കുറഞ്ഞത് യുക്തിരഹിതമായ മൊത്തത്തിലുള്ള ഫോക്കസ് ഓർഡറിനായി. ഈ സന്ദർഭങ്ങളിൽ, പകരം ഒരു മോഡൽ ഡയലോഗ് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലേക്ക് ഓപ്ഷന്റെ പേര് ചേർക്കുക data-.data-animation=""

സുരക്ഷാ കാരണങ്ങളാൽ ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് sanitize, sanitizeFnകൂടാതെ whiteListഓപ്ഷനുകൾ നൽകാനാവില്ല.
പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം പോപ്പോവറിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
കണ്ടെയ്നർ ചരട് | മൂലകം | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് പോപോവർ കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: container: 'body'. ട്രിഗറിംഗ് എലമെന്റിന് സമീപം ഡോക്യുമെന്റിന്റെ ഒഴുക്കിൽ പോപോവർ സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ ഓപ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് - ഇത് വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ട്രിഗറിംഗ് എലമെന്റിൽ നിന്ന് പൊപ്പോവറിനെ തടയും.

ഉള്ളടക്കം ചരട് | മൂലകം | പ്രവർത്തനം ''

data-contentആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ഉള്ളടക്ക മൂല്യം .

ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, thisപോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.

കാലതാമസം നമ്പർ | വസ്തു 0

പോപ്പോവർ (മി.എസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല

ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും

വസ്തുവിന്റെ ഘടന ഇതാണ്:delay: { "show": 500, "hide": 100 }

html ബൂളിയൻ തെറ്റായ പോപോവറിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, textDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ jQuery-യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ് ചരട് | പ്രവർത്തനം 'ശരി'

പോപോവർ എങ്ങനെ സ്ഥാപിക്കാം - ഓട്ടോ | മുകളിൽ | താഴെ | വിട്ടു | ശരിയാണ്.
വ്യക്തമാക്കുമ്പോൾ, അത് autoപോപ്പോവറിനെ ചലനാത്മകമായി പുനഃക്രമീകരിക്കും.

പ്ലെയ്‌സ്‌മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ പോപ്പോവർ DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേതുമായി വിളിക്കുന്നു. സന്ദർഭം പോപോവർ thisസംഭവത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.

സെലക്ടർ ചരട് | തെറ്റായ തെറ്റായ ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് പോപ്പോവർ ഒബ്‌ജക്റ്റുകൾ ഡെലിഗേറ്റ് ചെയ്യപ്പെടും. പ്രായോഗികമായി, പോപ്പോവറുകൾ ചേർക്കുന്നതിന് ഡൈനാമിക് HTML ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക .
ടെംപ്ലേറ്റ് സ്ട്രിംഗ് '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

പോപോവർ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML.

പോപ്പോവറുകൾ titleഎന്നതിലേക്ക് കുത്തിവയ്ക്കും .popover-header.

പോപ്പോവറുകൾ contentഎന്നതിലേക്ക് കുത്തിവയ്ക്കും .popover-body.

.arrowപോപോവറിന്റെ അസ്ത്രമായി മാറും.

ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് .popoverക്ലാസ് ഉണ്ടായിരിക്കണം.

തലക്കെട്ട് ചരട് | മൂലകം | പ്രവർത്തനം ''

titleആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ശീർഷക മൂല്യം .

ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, thisപോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.

ട്രിഗർ സ്ട്രിംഗ് 'ക്ലിക്ക്' പോപോവർ എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക. manualമറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.
ഓഫ്സെറ്റ് നമ്പർ | സ്ട്രിംഗ് 0 പോപോവറിന്റെ ലക്ഷ്യവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഓഫ്‌സെറ്റ്. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .
ഫാൾബാക്ക് പ്ലേസ്മെന്റ് ചരട് | അറേ 'ഫ്ലിപ്പ്' ഫാൾബാക്കിൽ പോപ്പർ ഏത് സ്ഥാനമാണ് ഉപയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ അനുവദിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ പെരുമാറ്റ ഡോക്‌സ് കാണുക
കസ്റ്റംക്ലാസ് ചരട് | പ്രവർത്തനം ''

പോപോവർ കാണിക്കുമ്പോൾ അതിലേക്ക് ക്ലാസുകൾ ചേർക്കുക. ടെംപ്ലേറ്റിൽ വ്യക്തമാക്കിയിട്ടുള്ള ഏതെങ്കിലും ക്ലാസുകൾക്ക് പുറമെ ഈ ക്ലാസുകൾ ചേർക്കപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഒന്നിലധികം ക്ലാസുകൾ ചേർക്കാൻ, അവയെ സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കുക: 'a b'.

അധിക ക്ലാസ് പേരുകൾ അടങ്ങിയ ഒരു സ്ട്രിംഗ് തിരികെ നൽകേണ്ട ഒരു ഫംഗ്‌ഷൻ നിങ്ങൾക്ക് പാസാക്കാനും കഴിയും.

അതിർത്തി ചരട് | ഘടകം 'സ്ക്രോൾ പേരന്റ്' പോപോവറിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി. 'viewport', 'window', 'scrollParent', അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് (JavaScript മാത്രം) മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ പ്രിവൻഡ് ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .
അണുവിമുക്തമാക്കുക ബൂളിയൻ സത്യം സാനിറ്റൈസേഷൻ പ്രവർത്തനക്ഷമമാക്കുക അല്ലെങ്കിൽ പ്രവർത്തനരഹിതമാക്കുക. സജീവമാക്കിയാൽ 'template', ഓപ്ഷനുകൾ അണുവിമുക്തമാക്കും 'content'. ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷനിലെ സാനിറ്റൈസർ വിഭാഗം'title' കാണുക .
വൈറ്റ് ലിസ്റ്റ് വസ്തു സ്ഥിര മൂല്യം അനുവദനീയമായ ആട്രിബ്യൂട്ടുകളും ടാഗുകളും അടങ്ങുന്ന ഒബ്ജക്റ്റ്
sanitizeFn ശൂന്യം | പ്രവർത്തനം ശൂന്യം ഇവിടെ നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം സാനിറ്റൈസ് ഫംഗ്ഷൻ നൽകാം. സാനിറ്റൈസേഷൻ നടത്താൻ ഒരു സമർപ്പിത ലൈബ്രറി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് ഉപയോഗപ്രദമാകും.
popperConfig ശൂന്യം | വസ്തു ശൂന്യം ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ മാറ്റാൻ, പോപ്പറിന്റെ കോൺഫിഗറേഷൻ കാണുക

വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മുകളിൽ വിശദീകരിച്ചത് പോലെ, വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

രീതികൾ

അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും

എല്ലാ 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')

ഒരു മൂലകത്തിന്റെ പോപോവർ കാണിക്കാനോ മറയ്ക്കാനോ ഉള്ള കഴിവ് ടോഗിൾ ചെയ്യുന്നു.

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

.popover('update')

ഒരു മൂലകത്തിന്റെ പോപോവറിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.

$('#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...
})