ബൂട്ട്സ്ട്രാപ്പ് ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ ഉപയോഗിച്ച് ലിങ്കുകളുടെയും മറ്റും ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിന് സന്ദർഭോചിതമായ ഓവർലേകൾ ടോഗിൾ ചെയ്യുക.
അവലോകനം
ഡ്രോപ്പ്ഡൗണുകൾ ടോഗിൾ ചെയ്യാവുന്നതും ലിങ്കുകളുടെ ലിസ്റ്റുകളും മറ്റും പ്രദർശിപ്പിക്കുന്നതിനുള്ള സന്ദർഭോചിതമായ ഓവർലേകളാണ്. ഉൾപ്പെടുത്തിയിരിക്കുന്ന ബൂട്ട്സ്ട്രാപ്പ് ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിനുമായി അവ സംവേദനാത്മകമാക്കിയിരിക്കുന്നു. അവ ക്ലിക്കുചെയ്യുന്നതിലൂടെയാണ് ടോഗിൾ ചെയ്യുന്നത്, ഹോവർ ചെയ്തല്ല; ഇതൊരു മനഃപൂർവമായ ഡിസൈൻ തീരുമാനമാണ് .
ഡൈനാമിക് പൊസിഷനിംഗും വ്യൂപോർട്ട് കണ്ടെത്തലും നൽകുന്ന മൂന്നാം കക്ഷി ലൈബ്രറിയായ Popper.js- ലാണ് ഡ്രോപ്പ്ഡൗണുകൾ നിർമ്മിച്ചിരിക്കുന്നത്. ബൂട്ട്സ്ട്രാപ്പിന്റെ JavaScript-ന് മുമ്പ് popper.min.js ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക അല്ലെങ്കിൽ Popper.js അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക. bootstrap.bundle.jsഡൈനാമിക് പൊസിഷനിംഗ് ആവശ്യമില്ലെങ്കിലും navbar-ൽ ഡ്രോപ്പ്ഡൗണുകൾ സ്ഥാപിക്കാൻ Popper.js ഉപയോഗിക്കില്ല.
ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js .
പ്രവേശനക്ഷമത
WAI ARIA സ്റ്റാൻഡേർഡ് ഒരു യഥാർത്ഥ role="menu"വിജറ്റ് നിർവചിക്കുന്നു , എന്നാൽ ഇത് പ്രവർത്തനങ്ങളോ പ്രവർത്തനങ്ങളോ ട്രിഗർ ചെയ്യുന്ന ആപ്ലിക്കേഷൻ പോലുള്ള മെനുകൾക്ക് പ്രത്യേകമാണ്. ARIA മെനുകളിൽ മെനു ഇനങ്ങൾ, ചെക്ക്ബോക്സ് മെനു ഇനങ്ങൾ, റേഡിയോ ബട്ടൺ മെനു ഇനങ്ങൾ, റേഡിയോ ബട്ടൺ ഗ്രൂപ്പുകൾ, ഉപമെനുകൾ എന്നിവ മാത്രമേ ഉൾക്കൊള്ളാൻ കഴിയൂ.
മറുവശത്ത്, ബൂട്ട്സ്ട്രാപ്പിന്റെ ഡ്രോപ്പ്ഡൗണുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് പൊതുവായതും വിവിധ സാഹചര്യങ്ങൾക്കും മാർക്ക്അപ്പ് ഘടനകൾക്കും ബാധകവുമാണ്. ഉദാഹരണത്തിന്, തിരയൽ ഫീൽഡുകൾ അല്ലെങ്കിൽ ലോഗിൻ ഫോമുകൾ പോലുള്ള അധിക ഇൻപുട്ടുകളും ഫോം നിയന്ത്രണങ്ങളും അടങ്ങുന്ന ഡ്രോപ്പ്ഡൌണുകൾ സൃഷ്ടിക്കാൻ സാധിക്കും. ഇക്കാരണത്താൽ, യഥാർത്ഥ ARIA മെനുകൾക്ക് ആവശ്യമായ ആട്രിബ്യൂട്ടുകളൊന്നും ബൂട്ട്സ്ട്രാപ്പ് പ്രതീക്ഷിക്കുന്നില്ല (അല്ലെങ്കിൽ roleസ്വയമേവ ചേർക്കുന്നില്ല ) aria-. രചയിതാക്കൾ ഈ കൂടുതൽ നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ടുകൾ സ്വയം ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.
.dropdown-itemഎന്നിരുന്നാലും, കഴ്സർ കീകൾ ഉപയോഗിച്ച് വ്യക്തിഗത ഘടകങ്ങളിലൂടെ നീങ്ങാനും കീ ഉപയോഗിച്ച് മെനു അടയ്ക്കാനുമുള്ള കഴിവ് പോലുള്ള മിക്ക സ്റ്റാൻഡേർഡ് കീബോർഡ് മെനു ഇടപെടലുകൾക്കും ബൂട്ട്സ്ട്രാപ്പ് അന്തർനിർമ്മിത പിന്തുണ ചേർക്കുന്നു ESC.
ഉദാഹരണങ്ങൾ
ഡ്രോപ്പ്ഡൗണിന്റെ ടോഗിളും (നിങ്ങളുടെ ബട്ടൺ അല്ലെങ്കിൽ ലിങ്ക്) ഡ്രോപ്പ്ഡൗൺ മെനുവും .dropdownഅല്ലെങ്കിൽ പ്രഖ്യാപിക്കുന്ന മറ്റൊരു ഘടകവും പൊതിയുക position: relative;. നിങ്ങളുടെ സാധ്യതയുള്ള ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ ഡ്രോപ്പ്ഡൗണുകൾ <a>അല്ലെങ്കിൽ ഘടകങ്ങളിൽ നിന്ന് ട്രിഗർ ചെയ്യാവുന്നതാണ് .<button>
ഒറ്റ ബട്ടൺ
ചില മാർക്ക്അപ്പ് മാറ്റങ്ങളോടെ ഏതൊരു .btnസിംഗിളും ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ആക്കി മാറ്റാം. <button>ഏതെങ്കിലും ഘടകങ്ങളുമായി പ്രവർത്തിക്കാൻ നിങ്ങൾക്ക് അവ എങ്ങനെ നൽകാമെന്നത് ഇതാ :
അതുപോലെ, സിംഗിൾ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളുടെ അതേ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ സൃഷ്ടിക്കുക, എന്നാൽ .dropdown-toggle-splitഡ്രോപ്പ്ഡൗൺ കാരറ്റിന് ചുറ്റും ശരിയായ സ്പെയ്സിംഗിനായി ചേർക്കുക.
paddingക്യാരറ്റിന്റെ ഇരുവശത്തുമുള്ള തിരശ്ചീനം 25% കുറയ്ക്കാനും margin-leftസാധാരണ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾക്കായി ചേർത്തത് നീക്കംചെയ്യാനും ഞങ്ങൾ ഈ അധിക ക്ലാസ് ഉപയോഗിക്കുന്നു. ആ അധിക മാറ്റങ്ങൾ സ്പ്ലിറ്റ് ബട്ടണിൽ കേരറ്റ് കേന്ദ്രീകരിച്ച് പ്രധാന ബട്ടണിന് അടുത്തായി കൂടുതൽ ഉചിതമായ വലിപ്പത്തിലുള്ള ഹിറ്റ് ഏരിയ നൽകുന്നു.
ചരിത്രപരമായി ഡ്രോപ്പ്ഡൗൺ മെനു ഉള്ളടക്കങ്ങൾ ലിങ്കുകളായിരിക്കണം, എന്നാൽ v4 ന്റെ കാര്യത്തിൽ ഇനി അങ്ങനെയല്ല. <button>ഇപ്പോൾ നിങ്ങൾക്ക് ഡ്രോപ്പ്ഡൗണുകളിൽ വെറും <a>s എന്നതിന് പകരം ഓപ്ഷണലായി ഘടകങ്ങൾ ഉപയോഗിക്കാം .
ഉപയോഗിച്ച് നിങ്ങൾക്ക് സംവേദനാത്മകമല്ലാത്ത ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങൾ സൃഷ്ടിക്കാനും കഴിയും .dropdown-item-text. ഇഷ്ടാനുസൃത CSS അല്ലെങ്കിൽ ടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് കൂടുതൽ സ്റ്റൈൽ ചെയ്യാൻ മടിക്കേണ്ടതില്ല.
ഡിഫോൾട്ടായി, ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു സ്വയമേവ 100% അതിന്റെ രക്ഷിതാവിന്റെ മുകളിൽ നിന്നും ഇടത് വശത്തും സ്ഥാനം പിടിക്കുന്നു. ഡ്രോപ്പ്ഡൗൺ മെനു വലത്തേക്ക് വിന്യസിക്കുന്നതിന് .dropdown-menu-righta ലേക്ക് ചേർക്കുക ..dropdown-menu
ഹെഡ്സ് അപ്പുകൾ! Popper.js-ന് നന്ദി ഡ്രോപ്പ്ഡൗണുകൾ സ്ഥാപിച്ചിരിക്കുന്നു (അവ ഒരു navbar-ൽ അടങ്ങിയിരിക്കുമ്പോൾ ഒഴികെ).
പ്രതികരിക്കുന്ന വിന്യാസം
നിങ്ങൾക്ക് റെസ്പോൺസീവ് അലൈൻമെന്റ് ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, ആട്രിബ്യൂട്ട് ചേർത്ത് ഡൈനാമിക് പൊസിഷനിംഗ് പ്രവർത്തനരഹിതമാക്കുകയും data-display="static"പ്രതികരിക്കുന്ന വേരിയേഷൻ ക്ലാസുകൾ ഉപയോഗിക്കുകയും ചെയ്യുക.
നൽകിയിരിക്കുന്ന ബ്രേക്ക്പോയിന്റോ അതിലും വലുതോ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനു വലത്തേക്ക് വിന്യസിക്കാൻ , ചേർക്കുക .dropdown-menu{-sm|-md|-lg|-xl}-right.
തന്നിരിക്കുന്ന ബ്രേക്ക്പോയിന്റോ അതിലും വലുതോ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ ഇടത് വിന്യസിക്കാൻ , .dropdown-menu-rightഒപ്പം ചേർക്കുക .dropdown-menu{-sm|-md|-lg|-xl}-left.
data-display="static"Navbar-ൽ Popper.js ഉപയോഗിക്കാത്തതിനാൽ, navbar-കളിലെ ഡ്രോപ്പ്ഡൗൺ ബട്ടണുകളിലേക്ക് നിങ്ങൾ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കേണ്ടതില്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക.
മെനു ഉള്ളടക്കം
തലക്കെട്ടുകൾ
ഏതെങ്കിലും ഡ്രോപ്പ്ഡൗൺ മെനുവിലെ പ്രവർത്തനങ്ങളുടെ വിഭാഗങ്ങൾ ലേബൽ ചെയ്യുന്നതിന് ഒരു തലക്കെട്ട് ചേർക്കുക.
ഒരു ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ ടെക്സ്റ്റിനൊപ്പം ഏതെങ്കിലും ഫ്രീഫോം ടെക്സ്റ്റ് സ്ഥാപിക്കുക, സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക . മെനു വീതി പരിമിതപ്പെടുത്താൻ നിങ്ങൾക്ക് അധിക വലുപ്പ ശൈലികൾ ആവശ്യമായി വരുമെന്ന കാര്യം ശ്രദ്ധിക്കുക.
ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ സ്വതന്ത്രമായി ഒഴുകുന്ന ചില ഉദാഹരണ വാചകം.
.showഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി , പാരന്റ് ലിസ്റ്റ് ഇനത്തിലെ ക്ലാസ് ടോഗിൾ ചെയ്തുകൊണ്ട് ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ മറഞ്ഞിരിക്കുന്ന ഉള്ളടക്കം (ഡ്രോപ്പ്ഡൗൺ മെനുകൾ) ടോഗിൾ ചെയ്യുന്നു . ഒരു data-toggle="dropdown"ആപ്ലിക്കേഷൻ തലത്തിൽ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ അടയ്ക്കുന്നതിന് ആട്രിബ്യൂട്ട് ആശ്രയിക്കുന്നു, അതിനാൽ ഇത് എപ്പോഴും ഉപയോഗിക്കുന്നത് നല്ലതാണ്.
ടച്ച് പ്രവർത്തനക്ഷമമാക്കിയ ഉപകരണങ്ങളിൽ, ഒരു ഡ്രോപ്പ്ഡൗൺ തുറക്കുന്നത് മൂലകത്തിന്റെ ഉടനടിയുള്ള കുട്ടികളിലേക്ക് ശൂന്യമായ ( $.noop) ഹാൻഡ്ലറുകൾ ചേർക്കുന്നു. ഐഒഎസ് ഇവന്റ് ഡെലിഗേഷനിലെ ഒരു വിചിത്രതയ്ക്ക് ചുറ്റും പ്രവർത്തിക്കാൻ ഈ വൃത്തികെട്ട ഹാക്ക് അനിവാര്യമാണ് , അല്ലാത്തപക്ഷം ഡ്രോപ്പ്ഡൗണിന് പുറത്ത് എവിടെയെങ്കിലും ടാപ്പുചെയ്യുന്നത് ഡ്രോപ്പ്ഡൗൺ അടയ്ക്കുന്ന കോഡ് പ്രവർത്തനക്ഷമമാക്കുന്നതിൽ നിന്ന് തടയും. ഡ്രോപ്പ്ഡൗൺ അടച്ചുകഴിഞ്ഞാൽ, ഈ അധിക ശൂന്യമായ ഹാൻഡ്ലറുകൾ നീക്കം ചെയ്യപ്പെടും.mouseover<body>mouseover
ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി
data-toggle="dropdown"ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ചെയ്യാൻ ഒരു ലിങ്കിലേക്കോ ബട്ടണിലേക്കോ ചേർക്കുക .
JavaScript വഴി
JavaScript വഴി ഡ്രോപ്പ്ഡൗണുകളെ വിളിക്കുക:
data-toggle="dropdown"ഇപ്പോഴും ആവശ്യമാണ്
നിങ്ങൾ JavaScript വഴി നിങ്ങളുടെ ഡ്രോപ്പ്ഡൗണിനെ വിളിച്ചാലും പകരം ഡാറ്റ-എപിഐ ഉപയോഗിക്കുന്നുണ്ടോ എന്നത് പരിഗണിക്കാതെ തന്നെ data-toggle="dropdown", ഡ്രോപ്പ്ഡൗണിന്റെ ട്രിഗർ എലമെന്റിൽ എപ്പോഴും ഉണ്ടായിരിക്കേണ്ടത് ആവശ്യമാണ്.
ഓപ്ഷനുകൾ
ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-offset="".
പേര്
ടൈപ്പ് ചെയ്യുക
സ്ഥിരസ്ഥിതി
വിവരണം
ഓഫ്സെറ്റ്
നമ്പർ | ചരട് | പ്രവർത്തനം
0
ഡ്രോപ്പ്ഡൗൺ അതിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ്.
ഓഫ്സെറ്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായി ഓഫ്സെറ്റ് ഡാറ്റ അടങ്ങിയിരിക്കുന്ന ഒബ്ജക്റ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കുന്നു. ഫംഗ്ഷൻ ഒരേ ഘടനയുള്ള ഒരു വസ്തുവിനെ തിരികെ നൽകണം. ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് രണ്ടാമത്തെ ആർഗ്യുമെന്റായി കൈമാറുന്നു.
boundaryഅല്ലാതെ മറ്റേതെങ്കിലും മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുമ്പോൾ 'scrollParent', സ്റ്റൈൽ കണ്ടെയ്നറിൽ position: staticപ്രയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക ..dropdown
രീതികൾ
രീതി
വിവരണം
$().dropdown('toggle')
തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു ടോഗിൾ ചെയ്യുന്നു.
$().dropdown('show')
തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു കാണിക്കുന്നു.
$().dropdown('hide')
തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു മറയ്ക്കുന്നു.
$().dropdown('update')
ഒരു മൂലകത്തിന്റെ ഡ്രോപ്പ്ഡൗണിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.
$().dropdown('dispose')
ഒരു മൂലകത്തിന്റെ ഡ്രോപ്പ്ഡൗൺ നശിപ്പിക്കുന്നു.
സംഭവങ്ങൾ
എല്ലാ ഡ്രോപ്പ്ഡൗൺ ഇവന്റുകളും .dropdown-menu'പാരന്റ് എലമെന്റിന് relatedTargetനേരെയാണ് പ്രവർത്തിക്കുന്നത്, കൂടാതെ ടോഗിളിംഗ് ആങ്കർ എലമെന്റിന്റെ മൂല്യമുള്ള ഒരു പ്രോപ്പർട്ടിയുണ്ട്. hide.bs.dropdownകൂടാതെ hidden.bs.dropdownഇവന്റുകൾക്ക് ഒരു clickEventപ്രോപ്പർട്ടി ഉണ്ട് (യഥാർത്ഥ ഇവന്റ് തരം ആയിരിക്കുമ്പോൾ മാത്രം click) അതിൽ ക്ലിക്ക് ഇവന്റിന് ഒരു ഇവന്റ് ഒബ്ജക്റ്റ് അടങ്ങിയിരിക്കുന്നു.
സംഭവം
വിവരണം
show.bs.dropdown
ഷോ ഇൻസ്റ്റൻസ് രീതി എന്ന് വിളിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി ഫയർ ചെയ്യുന്നു.
shown.bs.dropdown
ഡ്രോപ്പ്ഡൗൺ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (പൂർത്തിയാകാൻ CSS സംക്രമണങ്ങൾക്കായി കാത്തിരിക്കും).
hide.bs.dropdown
ഹൈഡ് ഇൻസ്റ്റൻസ് മെത്തേഡ് വിളിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി പ്രവർത്തനക്ഷമമാകും.
hidden.bs.dropdown
ഡ്രോപ്പ്ഡൗൺ ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (പൂർത്തിയാകാൻ CSS സംക്രമണത്തിനായി കാത്തിരിക്കും).