ലഭ്യമായതും വഴക്കമുള്ളതുമായ ഒരുപിടി അലേർട്ട് സന്ദേശങ്ങൾക്കൊപ്പം സാധാരണ ഉപയോക്തൃ പ്രവർത്തനങ്ങൾക്കായി സന്ദർഭോചിതമായ ഫീഡ്ബാക്ക് സന്ദേശങ്ങൾ നൽകുക.
ഉദാഹരണങ്ങൾ
വാചകത്തിന്റെ ഏത് ദൈർഘ്യത്തിനും അലേർട്ടുകൾ ലഭ്യമാണ്, കൂടാതെ ഓപ്ഷണൽ ഡിസ്മിസ് ബട്ടണും ലഭ്യമാണ്. ശരിയായ സ്റ്റൈലിംഗിനായി, ആവശ്യമുള്ള എട്ട് സന്ദർഭോചിത ക്ലാസുകളിൽ ഒന്ന് ഉപയോഗിക്കുക (ഉദാ, .alert-success). ഇൻലൈൻ ഡിസ്മിസലിനായി, അലേർട്ടുകൾ ഉപയോഗിക്കുക jQuery പ്ലഗിൻ .
ഒരു ലളിതമായ പ്രാഥമിക അലേർട്ട്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ ദ്വിതീയ മുന്നറിയിപ്പ്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ വിജയ മുന്നറിയിപ്പ്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ അപകട മുന്നറിയിപ്പ്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ മുന്നറിയിപ്പ് മുന്നറിയിപ്പ്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ വിവര മുന്നറിയിപ്പ്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ ലൈറ്റ് അലേർട്ട്-ഇത് പരിശോധിക്കുക!
ഒരു ലളിതമായ ഇരുണ്ട അലേർട്ട്-ഇത് പരിശോധിക്കുക!
സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു
അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്സ്റ്റ്), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
ലിങ്ക് നിറം
.alert-linkഏത് അലേർട്ടിലും പൊരുത്തപ്പെടുന്ന വർണ്ണ ലിങ്കുകൾ വേഗത്തിൽ നൽകാൻ യൂട്ടിലിറ്റി ക്ലാസ് ഉപയോഗിക്കുക .
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ പ്രാഥമിക മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ഒരു ലളിതമായ ദ്വിതീയ മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ വിജയ മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ഒരു ലളിതമായ അപകട മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ മുന്നറിയിപ്പ് മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ വിവര മുന്നറിയിപ്പ്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ ലൈറ്റ് അലേർട്ട്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
ഒരു ഉദാഹരണ ലിങ്കുള്ള
ലളിതമായ ഡാർക്ക് അലേർട്ട്
. നിങ്ങൾക്ക് ഇഷ്ടമാണെങ്കിൽ അതിൽ ക്ലിക്ക് ചെയ്യുക.
അധിക ഉള്ളടക്കം
അലേർട്ടുകളിൽ തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ, വിഭജനങ്ങൾ എന്നിവ പോലുള്ള അധിക HTML ഘടകങ്ങളും അടങ്ങിയിരിക്കാം.
നന്നായി!
അതെ, നിങ്ങൾ ഈ പ്രധാനപ്പെട്ട മുന്നറിയിപ്പ് സന്ദേശം വിജയകരമായി വായിച്ചു. ഈ ഉദാഹരണ വാചകം അൽപ്പം കൂടി പ്രവർത്തിക്കാൻ പോകുന്നതിനാൽ, ഇത്തരത്തിലുള്ള ഉള്ളടക്കത്തിൽ ഒരു അലേർട്ടിനുള്ളിലെ സ്പെയ്സിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നിങ്ങൾക്ക് കാണാനാകും.
നിങ്ങൾക്ക് ആവശ്യമുള്ളപ്പോഴെല്ലാം, കാര്യങ്ങൾ ഭംഗിയായും വൃത്തിയായും സൂക്ഷിക്കാൻ മാർജിൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക.
പിരിച്ചുവിടുന്നു
ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ ഉപയോഗിച്ച്, ഏത് അലേർട്ടും ഇൻലൈനിൽ നിരസിക്കാൻ കഴിയും. എങ്ങനെയെന്നത് ഇതാ:
നിങ്ങൾ അലേർട്ട് പ്ലഗിൻ അല്ലെങ്കിൽ കംപൈൽ ചെയ്ത ബൂട്ട്സ്ട്രാപ്പ് ജാവാസ്ക്രിപ്റ്റ് ലോഡ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js . സമാഹരിച്ച പതിപ്പിൽ ഇത് ഉൾപ്പെടുന്നു.
ഒരു ഡിസ്മിസ് ബട്ടണും .alert-dismissibleക്ലാസും ചേർക്കുക, അത് അലേർട്ടിന്റെ വലതുവശത്ത് അധിക പാഡിംഗ് ചേർക്കുകയും .closeബട്ടൺ സ്ഥാനപ്പെടുത്തുകയും ചെയ്യുന്നു.
ഡിസ്മിസ് ബട്ടണിൽ, data-dismiss="alert"ആട്രിബ്യൂട്ട് ചേർക്കുക, അത് JavaScript പ്രവർത്തനത്തെ ട്രിഗർ ചെയ്യുന്നു. <button>എല്ലാ ഉപകരണങ്ങളിലുടനീളവും ശരിയായ പെരുമാറ്റത്തിനായി ഈ ഘടകം ഉപയോഗിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക .
.fadeഅലേർട്ടുകൾ ഡിസ്മിസ് ചെയ്യുമ്പോൾ അവയെ ആനിമേറ്റ് ചെയ്യാൻ , .showക്ലാസുകളും ചേർക്കുന്നത് ഉറപ്പാക്കുക .
ഒരു തത്സമയ ഡെമോ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് പ്രവർത്തനക്ഷമമായി കാണാൻ കഴിയും:
വിശുദ്ധ ഗ്വാക്കാമോൾ! ചുവടെയുള്ള ആ ഫീൽഡുകളിൽ ചിലത് നിങ്ങൾ പരിശോധിക്കണം.
JavaScript പെരുമാറ്റം
ട്രിഗറുകൾ
JavaScript വഴി ഒരു അലേർട്ട് നിരസിക്കുന്നത് പ്രവർത്തനക്ഷമമാക്കുക:
അല്ലെങ്കിൽ മുകളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, അലേർട്ടിനുള്ളിലെdata ഒരു ബട്ടണിലെ ആട്രിബ്യൂട്ടുകൾക്കൊപ്പം :
ഒരു അലേർട്ട് അടയ്ക്കുന്നത് DOM-ൽ നിന്ന് നീക്കം ചെയ്യുമെന്നത് ശ്രദ്ധിക്കുക.
രീതികൾ
രീതി
വിവരണം
$().alert()
data-dismiss="alert"ആട്രിബ്യൂട്ട് ഉള്ള ഡിസെൻഡന്റ് എലമെന്റുകളിൽ ക്ലിക്ക് ഇവന്റുകൾ കേൾക്കാൻ ഒരു അലേർട്ട് ഉണ്ടാക്കുന്നു . (ഡാറ്റാ-എപിഐയുടെ ഓട്ടോ-ഇനീഷ്യലൈസേഷൻ ഉപയോഗിക്കുമ്പോൾ ആവശ്യമില്ല.)
$().alert('close')
DOM-ൽ നിന്ന് നീക്കം ചെയ്തുകൊണ്ട് ഒരു അലേർട്ട് അടയ്ക്കുന്നു. എലമെന്റിൽ ക്ലാസുകളും ഉണ്ടെങ്കിൽ, .fadeഅത് .showനീക്കം ചെയ്യുന്നതിനുമുമ്പ് അലേർട്ട് മങ്ങിപ്പോകും.
$().alert('dispose')
ഒരു മൂലകത്തിന്റെ മുന്നറിയിപ്പ് നശിപ്പിക്കുന്നു.
ഇവന്റുകൾ
ബൂട്ട്സ്ട്രാപ്പിന്റെ അലേർട്ട് പ്ലഗിൻ അലേർട്ട് ഫംഗ്ഷണലിറ്റിയിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.
സംഭവം
വിവരണം
close.bs.alert
closeഇൻസ്റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
closed.bs.alert
അലേർട്ട് അടച്ചുകഴിഞ്ഞാൽ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).