އާންމު ޔޫޒަރ އެކްޝަންތަކަށް ކޮންޓެކްސްޗުއަލް ފީޑްބެކް މެސެޖުތައް ފޯރުކޮށްދިނުން، ލިބެންހުރި އަދި ފްލެކްސިބަލް އެލާޓް މެސެޖުތަކުގެ ތެރެއިން އަތްމަތި ދަތި މެސެޖުތަކާއެކު ފޯރުކޮށްދިނުން.
މިސާލުތަކެވެ
ކޮންމެ ދިގުމިނެއްގެ ލިޔުމަކަށް ވެސް އެލާޓް ލިބޭއިރު، އިޚްތިޔާރީ ޑިސްމިސް ބަޓަން ވެސް ލިބެ އެވެ. ރަނގަޅަށް ސްޓައިލިންގ އަށްޓަކައި، ބޭނުންވާ އަށް ކޮންޓެކްސްޗުއަލް ކްލާސްގެ ތެރެއިން އެއް ކްލާސް ބޭނުން ކުރާށެވެ (އެބަހީ، .alert-success
). އިންލައިން ޑިސްމިސަލް ކުރުމަށްޓަކައި، އެލާޓްސް jQuery ޕްލަގިން ބޭނުން ކުރާށެވެ .
އާދައިގެ ޕްރައިމަރީ އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ ސެކަންޑަރީ އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ ކާމިޔާބީ އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ ނުރައްކާތެރި އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ އިންޒާރު އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ އިންފޯ އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ ލައިޓް އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އާދައިގެ ޑާކް އެލާޓެއް- ޗެކްކޮށްލައްވާ!
އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން
މާނަ އިތުރުކުރުމަށް ކުލަ ބޭނުންކުރުމަކީ ހަމައެކަނި ވިޝުއަލް އިންޑިކޭޝަނެއް ލިބިގެންދާ ކަމެއް ކަމަށާއި، އެއީ އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް - ސްކްރީން ރީޑަރ ފަދަ ތަކެތި - ފޯރުކޮށްނުދޭނެ ކަމެއް ކަމަށެވެ. ކުލައިން ދައްކުވައިދޭ މަޢުލޫމާތަކީ ޚުދު ކޮންޓެންޓުން (މިސާލަކަށް ފެންނަ ލިޔުން) ސާފު މަޢުލޫމާތެއްކަން، ނުވަތަ ކްލާހާއެކު ފޮރުވިފައިވާ އިތުރު ލިޔުން ފަދަ ބަދަލު ގޮތްތަކުން ހިމަނާފައިވާ މަޢުލޫމާތެއްކަން ޔަޤީންކުރުން .sr-only
.
ލިންކް ކުލަ
.alert-link
ކޮންމެ އެލާޓެއްގެ ތެރޭގައި ވެސް މެޗިންގ ކުލަކުލައިގެ ލިންކްތައް އަވަހަށް ފޯރުކޮށްދިނުމަށް ޔުޓިލިޓީ ކްލާސް ބޭނުން ކުރާށެވެ .
މިސާލު ލިންކެއް
އެކުލެވޭ ސާދާ ޕްރައިމަރީ އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
އެކުލެވޭ ސާދާ ސެކަންޑަރީ އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
އެކުލެވޭ އާދައިގެ ކާމިޔާބީ އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
ޖަހާފައިވާ އާދައިގެ ނުރައްކާ އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
އެކުލެވޭ އާދައިގެ އިންޒާރު އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
އެކުލެވޭ ސާދާ އިންފޯ އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
ޖަހާފައިވާ އާދައިގެ ލައިޓް އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
މިސާލު ލިންކެއް
ޖަހާފައިވާ އާދައިގެ ޑާކް އެލާޓެއް
. ކަމުދާނަމަ ކްލިކް ކޮށްލާށެވެ.
އިތުރު ކޮންޓެންޓެއް
އަދި އެލާޓްތަކުގައި ހެޑިންގ، ޕެރެގްރާފް އަދި ޑިވައިޑަރ ފަދަ އިތުރު އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ހިމެނިދާނެއެވެ.
ވަރަށް ފުރިހަމަ!
އަވް އާނ، ތިޔަ ކާމިޔާބުކަމާއެކު މި މުހިންމު އެލާޓް މެސެޖު ކިޔައިފިން. މި މިސާލު ޓެކްސްޓް ތަންކޮޅެއް ދިގުކޮށް ހިނގަން އުޅޭތީ އެލާޓެއްގެ ތެރޭގައި ސްޕޭސިންގ މި ބާވަތުގެ ކޮންޓެންޓާއެކު މަސައްކަތްކުރާ ގޮތް ފެންނާނެއެވެ.
ބޭނުންވާ ކޮންމެ ވަގުތެއްގައި ކަންކަން ރީތިކޮށް ތަރުތީބުކޮށް ބެހެއްޓުމަށްޓަކައި މާރޖިން ޔުޓިލިޓީސް ބޭނުންކުރުން ޔަގީން ކުރައްވާށެވެ.
ވަޒީފާއިން ވަކިކުރަމުންނެވެ
އެލާޓް ޖާވާސްކްރިޕްޓް ޕްލަގިން ބޭނުންކޮށްގެން، އިންލައިން އިން އެއްވެސް އެލާޓެއް ބާތިލް ކުރެވޭނެ އެވެ. މިއޮތީ ކިހިނެއް:
- އެލާޓް ޕްލަގިން، ނުވަތަ ކޮމްޕައިލް ކޮށްފައިވާ ބޫޓްސްޓްރެޕް ޖާވާސްކްރިޕްޓް ލޯޑްކޮށްފައިވާކަން ޔަގީން ކުރައްވާށެވެ.
- އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީ
util.js
. ކޮމްޕައިލް ކުރެވިފައިވާ ވާޝަންގައި މިކަން ހިމެނެއެވެ.
- ޑިސްމިސް ބަޓަނެއް
.alert-dismissible
އިތުރުކޮށް ކްލާސް އިތުރުކޮށް، އެލާޓްގެ ވާތްފަރާތަށް އިތުރު ޕެޑިން އިތުރުކޮށް .close
ބަޓަން ބެހެއްޓޭނެ އެވެ.
- ޑިސްމިސް ބަޓަންގައި،
data-dismiss="alert"
އެޓްރިބިއުޓް އިތުރުކޮށް، ޖާވާސްކްރިޕްޓް ފަންކްޝަނަލިޓީ ޓްރިގަރ ކޮށްދެއެވެ. <button>
ހުރިހާ ޑިވައިސްތަކެއްގައި ވެސް ރަނގަޅު ސުލޫކަށްޓަކައި އެ އެލިމެންޓް އެއާއެކު ބޭނުންކުރުން ޔަގީންކުރައްވާށެވެ .
.fade
އެލާޓްތައް ޑިސްމިސް ކުރާއިރު އެނިމޭޓް ކުރުމަށްޓަކައި، އަދި .show
ކްލާސްތައް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ .
މިކަން ލައިވް ޑެމޯއަކުން ޢަމަލީ ގޮތުން ފެނިވަޑައިގަންނަވާނެއެވެ:
މާތް ގުއަކަމޯލް! ތިރީގައިވާ ބައެއް ދާއިރާތަކުން ޗެކް އިން ކުރަން ޖެހެއެވެ.
ޖާވާސްކްރިޕްޓް ސުލޫކު
ޓްރިގަރސް އެވެ
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެލާޓެއް ޑިސްމިސް ކުރުން އެނެބަލް ކުރުން:
ނުވަތަ އެލާޓްގެ ތެރޭގައިވާdata
ބަޓަނެއްގައި ހުންނަ އެޓްރިބިއުޓްތަކާއެކު , މަތީގައި ދައްކާފައިވާ ފަދައިން:
އެލާޓެއް ބަންދުކުރުމުން އެލާޓް ޑީއޯއެމް އިން ނައްތާލެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.
ގޮތްތައް
ގޮތް |
ތަފްޞީލު |
$().alert() |
data-dismiss="alert" އެޓްރިބިއުޓް ހުންނަ ޑެސެންޑެންޓް އެލިމެންޓްތަކުގައި ކްލިކް އިވެންޓްތައް އަޑުއަހާ އެލާޓެއް ހަދައެވެ . (ޑޭޓާ-އެޕީގެ އޮޓޯ-އިނިޝިއަލައިޒޭޝަން ބޭނުންކުރާއިރު ކޮންމެހެން ބޭނުން ނުވާނެ.) |
$().alert('close') |
އެލާޓެއް ޑީއޯއެމް އިން ނައްތާލައިގެން ބަންދުކުރެއެވެ. .fade އެލިމެންޓްގައި އަދި .show ކްލާސްތައް ހުރިނަމަ ، އެލާޓް ނައްތާލުމުގެ ކުރިން އެލާޓް ފޭޑް އައުޓް ވާނެއެވެ. |
$().alert('dispose') |
އެލިމެންޓެއްގެ އެލާޓް ނައްތާލައެވެ. |
އިވެންޓްސް
ބޫޓްސްޓްރެޕްގެ އެލާޓް ޕްލަގިން އިން އެލާޓް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް ދިމާވާ މަދު ހާދިސާތަކެއް ހާމަކޮށްދެ އެވެ.
ހަރަކާތް |
ތަފްޞީލު |
close.bs.alert |
މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ close އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
closed.bs.alert |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލާޓް ބަންދުކޮށްފައި އޮތުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |