ޖާވާސްކްރިޕްޓް
ބޫޓްސްޓްރެޕްގެ ކޮމްޕޯނެންޓްތައް ދިރުމަކަށް ގެނައުމަށް ޑަޒަނަކަށް ވުރެ ގިނަ ކަސްޓަމް ޖީކުއަރީ ޕްލަގިންސް ތަކެއް ލިބިގެންދެއެވެ. ފަސޭހައިން އެ ހުރިހާ އެއްޗެއް ހިމަނާފައި، ނުވަތަ އެއްބަޔަކު އަނެއްބަޔަކަށް ހިމަނާށެވެ.
ބޫޓްސްޓްރެޕްގެ ކޮމްޕޯނެންޓްތައް ދިރުމަކަށް ގެނައުމަށް ޑަޒަނަކަށް ވުރެ ގިނަ ކަސްޓަމް ޖީކުއަރީ ޕްލަގިންސް ތަކެއް ލިބިގެންދެއެވެ. ފަސޭހައިން އެ ހުރިހާ އެއްޗެއް ހިމަނާފައި، ނުވަތަ އެއްބަޔަކު އަނެއްބަޔަކަށް ހިމަނާށެވެ.
ޕްލަގިންތައް ވަކިވަކިން (ބޫޓްސްޓްރެޕްގެ ވަކިވަކި *.js
ފައިލްތައް ބޭނުންކޮށްގެން)، ނުވަތަ އެއްފަހަރާ ( ބޭނުންކޮށްގެން bootstrap.js
ނުވަތަ މިނިފައިޑް bootstrap.min.js
) ޕްލަގިންތައް ހިމަނާލެވިދާނެއެވެ.
ދެ ޕްލަގިންސް bootstrap.js
އެއް bootstrap.min.js
ފައިލެއްގައި ހިމެނޭ ހުރިހާ ޕްލަގިންތަކެކެވެ. އެކަނި ހިމަނާށެވެ.
ބައެއް ޕްލަގިންސް އާއި ސީއެސްއެސް ކޮމްޕޯނެންޓްތައް ބަރޯސާވެފައިވަނީ އެހެން ޕްލަގިންސް ތަކުގެ މައްޗަށެވެ. ވަކިވަކިން ޕްލަގިންސް ހިމަނާނަމަ، ޑޮކްސްގައި މި ޑިޕެންޑެންސީތައް ޗެކްކުރުން ޔަގީންކުރައްވާށެވެ. އަދި ހުރިހާ ޕްލަގިންތަކެއް ބަރޯސާވެފައިވަނީ ޖޭކުއަރީއަށްކަން ފާހަގަކޮށްލަން (މީގެ މާނައަކީ ޕްލަގިން ފައިލްތަކުގެ ކުރިން ޖޭކުއަރީ ހިމަނަން ޖެހޭނެ ކަމެވެ). ޖޭކުއަރީގެ ކޮން ވަރޝަންތަކަށް ސަޕޯޓް ކުރެވޭތޯ ބަލަން އަޅުގަނޑުމެންގެ ކޮންސަލްޓް ކުރާށެވެ.bower.json
ޖާވާސްކްރިޕްޓްގެ އެންމެ ލައިނެއް ނުލިޔެ ޚުދު މާކަޕް އެޕީއައި މެދުވެރިކޮށް ހުރިހާ ބޫޓްސްޓްރެޕް ޕްލަގިންސް ބޭނުންކުރެވޭނެއެވެ. މިއީ ބޫޓްސްޓްރެޕްގެ ފުރަތަމަ ދަރަޖައިގެ އެޕީއައި ކަމަށާއި، މިއީ ޕްލަގިން ބޭނުންކުރާއިރު ފުރަތަމަ ވިސްނަންޖެހޭ ކަމެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ.
އެހެން ނަމަވެސް، ބައެއް ހާލަތްތަކުގައި މި ފަންކްޝަނަލިޓީ ނިއްވާލުމަކީ އެދެވޭ ކަމެއް ކަމަށް ވެދާނެއެވެ. އެހެންކަމުން، ޑޮކިއުމަންޓް ނަންސްޕޭސް ކޮށްފައިވާ ހުރިހާ އިވެންޓްތަކެއް އަންބައިންޑްކޮށްގެން ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި ޑިސެބިލް ކުރުމުގެ ޤާބިލުކަން ވެސް އަޅުގަނޑުމެން ފޯރުކޮށްދެމެވެ data-api
. މިއީ މިގޮތަށެވެ.
ނުވަތަ، ވަކި ޕްލަގިންއަކަށް އަމާޒުކުރުމަށްޓަކައި، ހަމައެކަނި ޕްލަގިންގެ ނަން ނަންސްޕޭސްއެއްގެ ގޮތުގައި ޑޭޓާ-އެޕީއައި ނޭމްސްޕޭސްއާއެކު މިގޮތަށް ހިމަނާށެވެ:
އެއް އެލިމެންޓެއްގައި އެތައް ޕްލަގިންތަކެއްގެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުން ނުކުރާށެވެ. މިސާލަކަށް ބަޓަނެއްގައި ޓޫލްޓިޕް އެއް އޮތުމާއި މޮޑަލް ޓޮގްލް ވެސް ނުކުރެވޭނެއެވެ. މިކަން ފުރިހަމަ ކުރުމަށްޓަކައި ރެޕިންގ އެލިމެންޓެއް ބޭނުން ކުރާށެވެ.
އަދި ބޫޓްސްޓްރެޕްގެ ހުރިހާ ޕްލަގިންސްތަކެއް ބޭނުންކުރެވޭނީ ހަމައެކަނި ޖާވާސްކްރިޕްޓް އެޕީއައި މެދުވެރިކޮށް ކަމަށް ވެސް އަޅުގަނޑުމެން ގަބޫލުކުރަމެވެ. ހުރިހާ ޕަބްލިކް އެޕީއައިތަކަކީ އެއް، ޗޭން ކުރެވޭ ގޮތްތަކެއް ކަމަށާއި، އެކްޓް ކުރެވުނު ކަލެކްޝަން ރިޓަރން ކުރާ އެއްޗެކެވެ.
ހުރިހާ މެތޯޑްތަކުންވެސް އިޚްތިޔާރީ އޮޕްޝަންސް އޮބްޖެކްޓެއް، ވަކި މެތޯޑަކަށް ޓާގެޓްކުރާ ސްޓްރިންގްއެއް، ނުވަތަ އެއްވެސް އެއްޗެއް (ޑިފޯލްޓް ސުލޫކާއެކު ޕްލަގިންއެއް އިނިޝިއޭޓްކުރާ) ބަލައިގަންނަންވާނެއެވެ:
ކޮންމެ ޕްލަގިންއަކުން ވެސް އޭގެ ރޯ ކޮންސްޓްރަކްޓަރ Constructor
ޕްރޮޕަޓީއެއްގެ މައްޗަށް ހާމަކުރެއެވެ: $.fn.popover.Constructor
. ވަކި ޕްލަގިން އިންސްޓޭންސްއެއް ހޯދަން ބޭނުންނަމަ، ސީދާ އެލިމެންޓަކުން ހޯދާށެވެ: $('[rel="popover"]').data('popover')
.
ޕްލަގިންއެއްގެ ޑިފޯލްޓް ސެޓިންގސް ބަދަލުކުރެވޭނީ ޕްލަގިންގެ Constructor.DEFAULTS
އޮބްޖެކްޓް ބަދަލުކޮށްގެންނެވެ:
ބައެއް ފަހަރު ބޫޓްސްޓްރެޕް ޕްލަގިންސްތައް އެހެން ޔޫއައި ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރަން ޖެހެއެވެ. މި ހާލަތްތަކުގައި ދޭތެރެ ދޭތެރެއިން ނޭމްސްޕޭސް ކޮލިޝަންތައް ދިމާވެދާނެ އެވެ. .noConflict
މިހެން ދިމާވެއްޖެނަމަ، އަގު އަނބުރާ ގެންނަން ބޭނުންވާ ޕްލަގިންއަށް ގޮވާލެވިދާނެއެވެ .
ބޫޓްސްޓްރަޕް އިން ގިނަ ޕްލަގިންސްތަކުގެ ޔުނިކް އެކްޝަންތަކަށް ކަސްޓަމް އިވެންޓްތައް ފޯރުކޮށްދެއެވެ. އާންމު ގޮތެއްގައި މިކަންކަން އަންނަނީ އިންފިނިޓިވް އަދި މާޒީގެ ޕާޓިސިޕަލް ފޯމެއްގައި - މިތަނުގައި އިންފިނިޓިވް (ex. show
) ހާދިސާއެއް ފެށުމުން ޓްރިގަރ ކުރެވި، އޭގެ މާޒީ ޕާޓިސިޕަލް ފޯމް (ex. shown
) ޓްރިގަރ ކުރެވެނީ ޢަމަލެއް ފުރިހަމަވުމުންނެވެ.
3.0.0 އިން ފެށިގެން، ހުރިހާ ބޫޓްސްޓްރެޕް އިވެންޓްތަކަކީ ނަންސްޕޭސް ކުރެވިފައިވާ އިވެންޓްތަކެކެވެ.
ހުރިހާ އިންފިނިޓިވް އިވެންޓްތަކުން ވެސް preventDefault
ފަންކްޝަނަލިޓީ ފޯރުކޮށްދެއެވެ. މިއީ ޢަމަލެއް ފެށުމުގެ ކުރިން އެ ޢަމަލެއް ހިންގުން ހުއްޓުވުމުގެ ޤާބިލުކަން ލިބިގެންދާ ކަމެކެވެ.
VERSION
ބޫޓްސްޓްރެޕްގެ ކޮންމެ ޖީކުއަރީ ޕްލަގިންއެއްގެ ވަރޝަނަށް ޕްލަގިންގެ ކޮންސްޓްރަކްޓަރުގެ ޕްރޮޕަޓީ މެދުވެރިކޮށް ވަދެވޭނެއެވެ . މިސާލަކަށް ޓޫލްޓިޕް ޕްލަގިން އަށް:
ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުންނައިރު ބޫޓްސްޓްރެޕްގެ ޕްލަގިންސްތައް ވަކިން ޝަރަފުވެރިކަމާއެކު ފަހަތަށް ނުޖެހެ އެވެ. މި ހާލަތުގައި ޔޫޒަރ އެކްސްޕީރިއަންސްއަށް ފަރުވާތެރިވާނަމަ، ޔޫޒަރުންނަށް <noscript>
ހާލަތު ބަޔާންކޮށްދިނުމަށް (އަދި ޖާވާސްކްރިޕްޓް އަލުން އެނެބަލް ކުރާނެ ގޮތް) ބޭނުންކޮށް، އަދި/ނުވަތަ އަމިއްލަ ކަސްޓަމް ފޯލްބެކްތައް އިތުރުކޮށްލާށެވެ.
ބޫޓްސްޓްރެޕް އިން ޕްރޮޓޯޓައިޕް ނުވަތަ ޖޭކުއަރީ ޔޫއައި ފަދަ ތިންވަނަ ފަރާތެއްގެ ޖާވާސްކްރިޕްޓް ލައިބްރަރީތަކަށް ރަސްމީކޮށް ސަޕޯޓް ނުކުރެއެވެ . ނަމަވެސް .noConflict
އަދި ނަން ޖާގަ ކުރެވިފައިވާ އިވެންޓްތައް، ކޮމްޕެޓިބިލިޓީ މައްސަލަތައް ހުރެދާނެ ކަމަށާއި އެކަންކަން އަމިއްލައަށް ހައްލުކުރަން ޖެހޭ ކަމަށެވެ.
ސާދާ ޓްރާންސިޝަން އިފެކްޓްތަކަށްޓަކައި، transition.js
އަނެއް ޖޭއެސް ފައިލްތަކުގެ ކައިރީގައި އެއްފަހަރު ހިމަނާށެވެ. ކޮމްޕައިލްޑް (ނުވަތަ މިނިފައިޑް) ބޭނުންކުރާނަމަ bootstrap.js
، މިކަން ހިމަނަން ނުޖެހޭނެ—މިހާރުވެސް އެބައޮތެވެ.
Transition.js އަކީ transitionEnd
އިވެންޓްތަކަށް ބޭނުންވާ އަސާސީ އެހީތެރިއެއްގެ އިތުރުން ސީއެސްއެސް ޓްރާންސިޝަން އެމިއުލޭޓަރެކެވެ. އެއީ އެހެން ޕްލަގިންތަކުން ސީއެސްއެސް ޓްރާންސިޝަން ސަޕޯޓް ހުރިތޯ ބެލުމަށާއި ހެންގް ޓްރާންސިޝަންތައް ހިފެހެއްޓުމަށް ބޭނުންކުރާ އެއްޗެކެވެ.
ތިރީގައިވާ ޖާވާސްކްރިޕްޓް ސްނިޕެޓް ބޭނުންކޮށްގެން ޓްރާންސިޝަންތައް ގްލޯބަލްކޮށް ޑިސެބިލް ކުރެވޭނެ، މިއީ ލޯޑް ވުމަށްފަހު transition.js
(ނުވަތަ bootstrap.js
ނުވަތަ bootstrap.min.js
, ހާލަތަށް ބަލާއިރު) އަންނަން ޖެހޭ އެއްޗެކެވެ:
މޮޑަލްސް އަކީ ސްޓްރީމްލައިންޑް، އެކަމަކު ފްލެކްސިބަލް، ޑައިލޮގް ޕްރޮމްޕްޓްސް އާއި އެކު އެންމެ ކުޑަމިނުން ބޭނުންވާ ފަންކްޝަނަލިޓީ އާއި ސްމާޓް ޑިފޯލްޓްސް އެވެ.
މޮޑަލްއެއް އަދިވެސް ފެންނަން ހުއްޓާ މޮޑަލްއެއް ނުހުޅުވުން ޔަގީން ކުރައްވާށެވެ. އެއްފަހަރާ އެއް މޮޑަލްއަށްވުރެ ގިނަ މޮޑަލް ދައްކާލުމަށް ކަސްޓަމް ކޯޑް ބޭނުންވެއެވެ.
އަބަދުވެސް މޮޑަލްގެ އެޗްޓީއެމްއެލް ކޯޑް ތިބާގެ ލިޔުމުގައި މަތީ ފެންވަރުގެ މަޤާމެއްގައި ބަހައްޓަން މަސައްކަތް ކުރާށެވެ، މޯޑަލްގެ ސިފައާއި/ނުވަތަ ފުންޝަނަލިޓީއަށް އެހެން ކޮމްޕޯނެންޓްތަކުން އަސަރު ނުކުރާނެއެވެ.
މޯބައިލް ޑިވައިސްތަކުގައި މޮޑަލް ބޭނުންކުރުމާ ގުޅޭ ގޮތުން ބައެއް ކެވިއޭޓްތައް އެބަހުއްޓެވެ. ތަފްސީލު ހޯދުމަށް އަޅުގަނޑުމެންގެ ބްރައުޒާ ސަޕޯޓް ޑޮކްސް ބައްލަވާށެވެ .
އެޗްޓީއެމްއެލް5 އިން އޭގެ ސެމެންޓިކްސް މާނަކުރާ ގޮތުގެ ސަބަބުން، autofocus
އެޗްޓީއެމްއެލް އެޓްރިބިއުޓް އަށް ބޫޓްސްޓްރެޕް މޮޑަލްތަކުގައި އެއްވެސް އަސަރެއް ނުކުރެއެވެ. ހަމަ އެ އަސަރު ހާސިލް ކުރުމަށްޓަކައި، ކޮންމެވެސް ކަސްޓަމް ޖާވާސްކްރިޕްޓެއް ބޭނުން ކުރާށެވެ:
ފޫޓަރގައި ހެޑަރ، ބޮޑީ، އަދި އެކްޝަންތަކުގެ ސެޓާއެކު ރެންޑަރ ކުރެވިފައިވާ މޮޑަލްއެކެވެ.
ތިރީގައިވާ ބަޓަންއަށް ފިތާލުމުން ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް މޮޑަލްއެއް ޓޮގްލް ކުރާށެވެ. އެއީ ތިރިއަށް ސްލައިޑްކޮށް ޕޭޖުގެ މަތިން ފޭޑް އިން ވާނެ އެއްޗެކެވެ.
role="dialog"
އަދި އަދި aria-labelledby="..."
, މޮޑަލް ސުރުޚީއަށް ރިފަރެންސްކޮށް، އަށް .modal
, އަދި ޚުދު role="document"
އަށް އިތުރުކުރުން ޔަޤީންކުރައްވާށެވެ ..modal-dialog
aria-describedby
މީގެ އިތުރުން، ތިބާގެ މޮޑަލް ޑައިލޮގްގެ ބަޔާނެއް އޮން އިން ދީފާނެއެވެ .modal
.
ޔޫޓިއުބް ވީޑިއޯތައް މޮޑަލްތަކުގައި އެންބެޑް ކުރުމަށް ބޫޓްސްޓްރެޕްގައި ނުހިމެނޭ އިތުރު ޖާވާސްކްރިޕްޓް ބޭނުންވެ، ޕްލޭބެކް އޮޓޮމެޓިކުން ހުއްޓާލުމަށް އަދި އެއަށްވުރެ ގިނަ ކަންތައްތަކެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް މި އެހީތެރި ސްޓޭކް އޮވަރފްލޯ ޕޯސްޓް ބައްލަވާށެވެ .
މޮޑަލްތަކުގައި އިޚްތިޔާރީ ދެ ސައިޒެއް ހުންނައިރު، މޮޑިފައި ކްލާސްތައް މެދުވެރިކޮށް ލިބެން ހުންނަނީ އެއް .modal-dialog
.
ބަލާލުމަށް ފޭޑް އިން ވުމުގެ ބަދަލުގައި ފަސޭހައިން ފެންނަ މޮޑަލްތަކަށް، .fade
ތިބާގެ މޮޑަލް މާކަޕް އިން ކްލާސް ނައްތާލާށެވެ.
މޮޑަލްއެއްގެ ތެރޭގައި ބޫޓްސްޓްރެޕް ގްރިޑް ސިސްޓަމްގެ ފައިދާ ނަގަން، ހަމައެކަނި ނެސްޓް .row
s ގެ ތެރޭގައި .modal-body
އަދި އެއަށްފަހު އާދައިގެ ގްރިޑް ސިސްޓަމް ކްލާސްތައް ބޭނުން ކުރާށެވެ.
ހުރިހާ ބަޓަންތަކެއް އެއް މޮޑަލް ޓްރިގަރ ކުރާ، ހަމައެކަނި ކުޑަކޮށް ތަފާތު ކޮންޓެންޓްތަކާއެކު ޓްރިގަރ ކުރާ ބަޓަންތަކެއް ލިބިފައިވޭތޯ؟ ކްލިކް ކުރި ބަޓަނަކަށް ބަލާފައި މޮޑަލްގެ ކޮންޓެންޓް ތަފާތު ކުރުމަށް ބޭނުން event.relatedTarget
އަދި އެޗްޓީއެމްއެލް data-*
އެޓްރިބިއުޓްސް (ޕޮސިބިލީ ވިއާ ޖޭކުއަރީ ) އެވެ. relatedTarget
, ގެ ތަފްސީލު ހޯދުމަށް މޮޑަލް އިވެންޓްސް ޑޮކްސް ބައްލަވާށެވެ.
މޮޑަލް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ފޮރުވިފައިވާ ކޮންޓެންޓް ޓޮގްލް ކޮށްދެނީ، ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށެވެ. އަދި ޓޫ އޮވަރރައިޑް ޑިފޯލްޓް ސްކްރޯލިންގ ބިހޭވިއަރ އަށް އިތުރުކޮށް، މޮޑަލްގެ ބޭރުން ކްލިކް ކުރާއިރު ދައްކާފައިވާ މޮޑަލްތައް ޑިސްމިސް ކުރުމަށް ކްލިކް އޭރިއާއެއް ފޯރުކޮށްދިނުމަށް a ޖެނެރޭޓް .modal-open
ކުރެއެވެ .<body>
.modal-backdrop
ޖާވާސްކްރިޕްޓް ނުލިޔެ މޮޑަލްއެއް އެކްޓިވޭޓް ކުރާށެވެ. data-toggle="modal"
ކޮންޓްރޯލަރ އެލިމެންޓެއްގައި، ބަޓަންއެއް ފަދައިން، އެއް data-target="#foo"
ނުވަތަ href="#foo"
ޓޮގްލް ކުރުމަށް ވަކި މޮޑަލަކަށް އަމާޒު ކުރުމަށް ސެޓް ކުރާށެވެ .
myModal
ޖާވާސްކްރިޕްޓްގެ އެއް ލައިނަކާއެކު id އާއެކު މޮޑަލް އަކަށް ގޮވާލާށެވެ :
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-backdrop=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
ބެކްޑްރޯޕް އެވެ | ބޫލިއަން ނުވަތަ ސްޓްރިންގް އެވެ'static' |
ރަނގަޅު | މޮޑަލް-ބެކްޑްރޯޕް އެލިމެންޓެއް ހިމެނެއެވެ. ނުވަތަ static ކްލިކް ކުރުމުން މޮޑަލް ބަންދު ނުކުރާ ބެކްޑްރޯޕަކަށް ކަނޑައަޅާށެވެ. |
ކީބޯޑެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | އެސްކޭޕް ކީ އަށް ފިތާލުމުން މޮޑަލް ބަންދުކުރެއެވެ |
ދެއްކުން | ބޫލިއަން އެވެ | ރަނގަޅު | އިނިޝިއަލައިޒް ކުރާއިރު މޮޑަލް ދައްކައެވެ. |
ރިމޯޓް | މަގު | ރަނގަޅުނޫން | މި އިޚްތިޔާރަކީ v3.3.0 އިން ފެށިގެން ޑިޕްރެކޭޓް ކުރެވިފައިވާ އިޚްތިޔާރަކަށް ވާއިރު، v4 ގައި ނައްތާލެވިފައިވާ އިޚްތިޔާރެކެވެ. އަޅުގަނޑުމެން ލަފާދެނީ އޭގެ ބަދަލުގައި ކްލައިންޓް ސައިޑް ޓެމްޕްލޭޓިންގ ނުވަތަ ޑޭޓާ ބައިންޑިންގ ފްރޭމްވޯކެއް ބޭނުންކުރުމަށާއި، ނުވަތަ އަމިއްލައަށް jQuery.load އަށް ގޮވާލުމަށެވެ . ރިމޯޓް ޔޫ.އާރ.އެލް އެއް ފޯރުކޮށްދީފިނަމަ، ޖީކުއަރީގެ މެތޯޑް މެދުވެރިކޮށް އެއްފަހަރު ކޮންޓެންޓް ލޯޑްކޮށް ، ޑިވް |
.modal(options)
މޮޑަލްއެއްގެ ގޮތުގައި ތިމާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object
.
.modal('toggle')
މެނުއަލްކޮށް މޮޑަލް އެއް ޓޮގްލް ކުރެއެވެ. މޮޑަލް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ ނުވަތަ އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ .shown.bs.modal
hidden.bs.modal
.modal('show')
މެނުއަލްކޮށް މޮޑަލްއެއް ހުޅުވާލައެވެ. މޮޑަލް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ .shown.bs.modal
.modal('hide')
މެނުއަލްކޮށް މޮޑަލް އެއް ފޮރުވައެވެ. މޮޑަލް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ .hidden.bs.modal
.modal('handleUpdate')
ސްކްރޯލްބާރެއް ފެންނަން ޖެހިއްޖެ ހާލަތެއްގައި މޮޑަލްގެ ޕޮޒިޝަނިންގ ރީޖަސްޓްކޮށް، މޮޑަލް ކަނާތްފަރާތަށް ފުންމާލާނެއެވެ.
ބޭނުންވަނީ ހަމައެކަނި ހުޅުވާފައި ހުންނައިރު މޮޑަލްގެ އުސްމިން ބަދަލުވާ ވަގުތުގައެވެ.
ބޫޓްސްޓްރެޕްގެ މޮޑަލް ކްލާހުގައި މޯޑަލް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.
ހުރިހާ މޮޑަލް އިވެންޓްތަކެއް ފަޔަރ ކުރެވެނީ ޚުދު މޮޑަލް އަށް (އެބަހީ <div class="modal">
) އަށް.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.މޯޑަލް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. ކްލިކް އެއްގެ ސަބަބުން ދިމާވާނަމަ، ކްލިކް ކުރެވުނު އެލިމެންޓް relatedTarget އިވެންޓްގެ ޕްރޮޕަޓީއެއްގެ ގޮތުގައި ލިބެން ހުންނާނެއެވެ. |
ދައްކާފައިވާ.bs.modal | މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. ކްލިކް އެއްގެ ސަބަބުން ދިމާވާނަމަ، ކްލިކް ކުރެވުނު އެލިމެންޓް relatedTarget އިވެންޓްގެ ޕްރޮޕަޓީއެއްގެ ގޮތުގައި ލިބެން ހުންނާނެއެވެ. |
ފޮރުވާ.ބީއެސް.މޮޑަލް | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.ބީއެސް.މޮޑަލް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ލޯޑްޑް.ބީއެސް.މޮޑަލް | remote މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް އިން އޮޕްޝަން ބޭނުންކޮށްގެން ކޮންޓެންޓް ލޯޑް ކޮށްފައި އޮތުމުންނެވެ . |
މި ސާދާ ޕްލަގިން އިން ގާތްގަނޑަކަށް ކޮންމެ އެއްޗަކަށް ޑްރޮޕްޑައުން މެނޫތައް އިތުރުކޮށްލާއިރު، އޭގެ ތެރޭގައި ނެވްބާރ، ޓެބްސް، އަދި ގިތެޔޮ ހިމެނެއެވެ.
.open
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް، ޑްރޮޕްޑައުން ޕްލަގިން އިން ޕޭރެންޓް ލިސްޓް އައިޓަމްގައި ހުންނަ ކްލާސް ޓޮގްލްކޮށްގެން ފޮރުވިފައިވާ ކޮންޓެންޓް (ޑްރޮޕްޑައުން މެނޫތައް) ޓޮގްލް ކުރެއެވެ .
މޯބައިލް ޑިވައިސްތަކުގައި ޑްރޮޕްޑައުން ހުޅުވުމުން .dropdown-backdrop
މެނޫއިން ބޭރުގައި ޓެޕް ކުރާއިރު ޑްރޮޕްޑައުން މެނޫތައް ބަންދުކުރުމަށް ޓެޕް އޭރިއާއެއްގެ ގޮތުގައި އިތުރު ކުރެވޭއިރު، މިއީ އައިއޯއެސްގެ ރަނގަޅު ސަޕޯޓަކަށް ބޭނުންވާ ކަމެކެވެ. މާނައަކީ އޯޕަން ޑްރޮޕްޑައުން މެނޫއަކުން ތަފާތު ޑްރޮޕްޑައުން މެނޫއަކަށް ބަދަލުވުމަށް މޯބައިލްގައި އިތުރަށް ޓެޕް ކުރަން ޖެހޭ ކަމެވެ.
ނޯޓް: data-toggle="dropdown"
އެޕްލިކޭޝަން ލެވެލްއެއްގައި ޑްރޮޕްޑައުން މެނޫތައް ބަންދުކުރުމަށް މި އެޓްރިބިއުޓް ބަރޯސާވެވޭތީ އަބަދުވެސް ބޭނުންކުރުމަކީ ރަނގަޅު ގޮތެކެވެ.
data-toggle="dropdown"
ޑްރޮޕްޑައުން އެއް ޓޮގްލް ކުރުމަށް ލިންކަކަށް ނުވަތަ ބަޓަނަކަށް އެޑް ކުރާށެވެ .
ލިންކް ބަޓަންތަކުން ޔޫ.އާރ.އެލް ތައް އެއްގޮތަކަށްވެސް ނުގެއްލޭ ގޮތަށް ބެހެއްޓުމަށްޓަކައި، ގެ data-target
ބަދަލުގައި އެޓްރިބިއުޓް ބޭނުންކުރާށެވެ href="#"
.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންތަކަށް ގުޅާލާ:
data-toggle="dropdown"
އަދިވެސް ބޭނުންވެއެވެޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންއަށް ގޮވާލިޔަސް ނުވަތަ އޭގެ ބަދަލުގައި ޑޭޓާ-އޭޕީއައި ބޭނުންކުރިޔަސް، data-toggle="dropdown"
އަބަދުވެސް ޑްރޮޕްޑައުންގެ ޓްރިގަރ އެލިމެންޓްގައި ހުންނަން ޖެހެއެވެ.
އެއްޗެއްނޫން
$().dropdown('toggle')
ދީފައިވާ ނެވްބާރެއް ނުވަތަ ޓެބް ކުރެވިފައިވާ ނެވިގޭޝަނެއްގެ ޑްރޮޕްޑައުން މެނޫ ޓޮގްލް ކުރެއެވެ.
ހުރިހާ ޑްރޮޕްޑައުން އިވެންޓްތަކެއް ފަޔަރ ކުރެވެނީ .dropdown-menu
's ޕޭރެންޓް އެލިމެންޓަށެވެ.
ހުރިހާ ޑްރޮޕްޑައުން އިވެންޓްތަކެއްގައިވެސް relatedTarget
ޕްރޮޕަޓީއެއް ހުންނައިރު، އޭގެ އަގަކީ ޓޮގްލިންގ އެންކަރ އެލިމެންޓެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
show.bs.ޑްރޮޕްޑައުން | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ ޝޯ އިންސްޓޭންސް މެތޯޑަށް ގޮވާލުމުންނެވެ. |
shown.bs.ޑްރޮޕްޑައުން | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ. |
hide.bs.ޑްރޮޕްޑައުން | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ ހައިޑް އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.ބީއެސް.ޑްރޮޕްޑައުން | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ. |
ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޮމެޓިކުން ނެވް ޓާގެޓްތައް އަޕްޑޭޓް ކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. ނަވްބާރުގެ ތިރީގައިވާ ސަރަހައްދު ސްކްރޯލްކޮށް އެކްޓިވް ކްލާސް ބަދަލުވާތަން ބަލާށެވެ. އަދި ޑްރޮޕްޑައުން ސަބް އައިޓަމްތައް ވެސް ހައިލައިޓް ކުރެވޭނެ އެވެ.
އެޑް ލެގިންސް ކީޓަރ، ބްރަންޗް އައިޑީ އާޓް ޕާޓީ ޑޮލޯރ ލޭބަރ. ޕިޗްފޯކް ޔަރ އެނިމް ލޯ-ފައި ކުރިން އެމީހުން ވިކި ހުސްވީ ކި. ޓަމްބްލަރ ފާމް ޓު ޓޭބަލް ސައިކަލް ރައިޓްސް ކޮންމެ ގޮތެއް ވިޔަސް. އަނިމް ކެފިޔޭ ކާލްސް ކާޑިގަން. ވެލިޓް ސެއިޓަން mcsweeney ގެ ފޮޓޯ ޖަގަހަ 3 ވޯލްފް މޫން irure. ކޮސްބީ ސްވެޓަރ ލޯމޯ ޖީން ޝޯޓްސް، ވިލިއަމްސްބަރގް ހޫޑީ މިނިމް ކުއީ ޔޫ ޕްރޮބަބަލީ ހެވް ނޮޓް ހެއިޑް އޮފް ދިސް އެޓް ކާޑިގަން ޓްރަސްޓް ފަންޑް ކަލްޕާ ބަޔޯޑީސެލް ވޭސް އެންޑަސަން އެސްތެޓިކް. ނިހިލް ޓެޓޫ ޖަހާފައިވާ އެކިއުމަސް، ކްރެޑް އިރޮނީ ބަޔޯޑީސަލް ކެފިޔޭ އާޓިޒަން އުލަމްކޯ ކޮންސެކިއުޓް.
ވެނިއަމް މާރފާ މޫނުމަތީގެ ސްކޭޓްބޯޑް، އެޑިޕިސިސިންގ ފުޖިއަޓް ވެލިޓް ޕިޗްފޯކް ތުނބުޅި. ފްރީގަން ތުނބުޅި އަލިކުއާ ކިއުޕިޑޭޓަޓް މެކްސްވީނީގެ ވެރޯ އެވެ. ކިއުޕިޑޭޓަޓް ހަތަރު ލޮކޯ ނިސީ، އީއޭ ހެލްވެޓިކާ ނޫލާ ކާރލްސް. ޓެޓޫ ޖަހާފައިވާ ކޮސްބީ ސްވެޓަރ ފުޑް ޓްރަކް، މެކްސްވީނީގެ ކުއިސް ނޮން ފްރީގަން ވައިނައިލް އެވެ. ލޯ-ފައި ވެސް އެންޑަސަން +1 ސާޓޯރިއަލް. ކާލްސް ނޮން އެސްތެޓިކް އެކްސަސައިޓޭޝަން ކުއިސް ޖެންޓްރިފައި. ބްރޫކްލިން އެޑިޕިސިސިންގ ކްރާފްޓް ބިޔަރު ވައިސް ކީޓަރ ޑެސެރަންޓް.
އޮކެއެކެޓް ކޮމޮޑޯ އެލިކުއާ ޑެލެކްޓަސް އެވެ. ފަޕް ކްރާފްޓް ބިޔަރު ޑެސެރަންޓް ސްކޭޓްބޯޑް އީއޭ. ލޯމޯ ސައިކަލް ރައިޓްސް އެޑިޕިސިސިންގ ބަންހް މީ، ވެލިޓް އީއޭ ސުންޓް ނެކްސްޓް ލެވެލް ލޮކަވޯރ ސިންގަލް-އޮރިޖިން ކޮފީ އިން މެގްނާ ވެނިއަމް. ހައި ލައިފް އައިޑީ ވައިނައިލް، އެކޯ ޕާކް ކޮންސެކުއަޓް ކުއިސް އަލިކިޕް ބަންހް މީ ޕިޗްފޯކް. ވެރޯ ވީއެޗްއެސް އެސްޓް އެޑިޕިސިސިންގ. ކޮންސެކްޓެޓަރ ނިސީ ޑައައިއީ މިނިމް މެސެންޖަރ ބެގް. ކްރެޑް އެކްސް އިން، ދެމެހެއްޓެނިވި ޑެލެކްޓަސް ކޮންސެކްޓެޓަރ ފަނީ ޕެކް އައިފޯން.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
ކޭޓަރ ޓްވީ ބްލޮގް، ކަލްޕާ މެސެންޖަރ ބެގް މާރފާ ކޮންމެ އެއްޗެއް ޑިލެކްޓަސް ފުޑް ޓްރަކް. ސެޕިއެންޓޭ ސިންތު އައިޑީ އަސުމެންޑާ. ލޮކަވޯރ ސެޑް ހެލްވެޓިކާ ކްލިޝް އިރޮނީ، ތަންޑަރކެޓްސް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ވާހަކައެއް އަޑުއިވިފައި ނުވާތީ ކޮންސެކިއުޓް ހޫޑީ ގްލޫޓެން ފްރީ ލޯ-ފައި ފަޕް އެލިކިއުޕް. ލޭބަރ އެލިޓް ޕްލޭސެޓް ކުރިން އެމީހުން ވިކި ހުސްވުމުގެ ކުރިން، ޓެރީ ރިޗާޑްސަން ޕްރޮއިޑެންޓް ބްރަންޗް ނެސްސިއުންޓް ކުއިސް ކޮސްބީ ސްވެޓަރ ޕަރިއޭޓަރ ކެފިޔޭ އުޓް ހެލްވެޓިކާ އާޓިޒަން. ކާޑިގަން ކްރާފްޓް ބިޔަރު ސެއިޓަން ރެޑީމޭޑް ވެލިޓް. ވީއެޗްއެސް ޗެމްބްރޭ ލެބޯރިސް ޓެމްޕަރ ވެނިއަމް އެވެ. އަނިމް މޮލިޓް މިނިމް ކޮމޮޑޯ އުލަމްކޯ ތަންޑަރކެޓްސް.
ނަވްބާރ ލިންކްތަކުގައި ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ހުންނަން ޖެހެއެވެ. މިސާލަކަށް <a href="#home">home</a>
ޑީއޯއެމްގައި ހުންނަ އެއްޗަކާ ދިމާވާން ޖެހޭނީ <div id="home"></div>
.
:visible
ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާށެވެ:visible
ޖީކުއަރީއާ އެއްގޮތަށް ނުވާ ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާ އެ އެލިމެންޓްތަކާ ގުޅޭ ނެވް އައިޓަމްތައް ދުވަހަކުވެސް ހައިލައިޓް ނުކުރެވޭނެއެވެ.
އިމްޕްލިމެންޓޭޝަން މެތޯޑް ކޮންމެ ގޮތަކަށް ވިޔަސް، ސްކްރޯލްސްޕީ އަށް ބޭނުން ކުރަން ޖެހެނީ position: relative;
ތިބާ ޖާސޫސް ކުރަމުންދާ އެލިމެންޓްގެ މައްޗަށެވެ. ގިނަ ހާލަތްތަކުގައި މިއީ <body>
. ގެ ނޫން އެހެން އެލިމެންޓްތަކުގައި ސްކްރޯލްސްޕައި ކުރާއިރު ، ސެޓެއް އޮވެގެން އެޕްލައި <body>
ކޮށްފައި ހުރިކަން ޔަގީން ކުރަންވާނެއެވެ .height
overflow-y: scroll;
ޓޮޕްބާ ނެވިގޭޝަނަށް ފަސޭހައިން ސްކްރޯލްސްޕީ ބިހޭވިއަރ އިތުރުކުރުމަށްޓަކައި، data-spy="scroll"
ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އިތުރުކުރުން (ގިނައިން އާންމުކޮށް މިއީ ވާނީ <body>
). ދެން ކޮންމެ ބޫޓްސްޓްރެޕް ކޮމްޕޮނެންޓެއްގެ data-target
ޕޭރެންޓް އެލިމެންޓްގެ އައިޑީ ނުވަތަ ކްލާސް އާއި އެކު އެޓްރިބިއުޓް އިތުރު ކުރާށެވެ..nav
ސީއެސްއެސް އަށް އެޑް position: relative;
ކުރުމަށްފަހު ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސްކްރޯލްސްޕައި އަށް ގުޅާލާށެވެ:
.scrollspy('refresh')
ޑޮމް އިން އެލިމެންޓްތައް އިތުރުކުރުމާއި ނުވަތަ ނައްތާލުމާ ގުޅިގެން ސްކްރޯލްސްޕީ ބޭނުންކުރާއިރު، ރިފްރެޝް މެތޯޑަށް ގޮވާލަން ޖެހޭނީ މިގޮތަށެވެ:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އޮފްސެޓް ކޮށްލާށެވެ | ނަންބަރު | 10 | ސްކްރޯލްގެ މަޤާމު ހިސާބުކުރާއިރު މަތިން އޮފްސެޓް ކުރުމަށް ޕިކްސެލްތައް. |
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
އެކްޓިވޭޓް.ބީއެސް.ސްކްރޯލްސްޕީ | މި އިވެންޓް ސްކްރޯލްސްޕީ އިން އާ އެއްޗެއް އެކްޓިވޭޓް ކުރާ ކޮންމެ ފަހަރަކު ފަޔަރ ވެއެވެ. |
ޑްރޮޕްޑައުން މެނޫތަކުގެ ތެރެއިން ވެސް ލޯކަލް ކޮންޓެންޓްގެ ޕޭންތަކުގެ ތެރެއިން ޓްރާންސިޝަން ކުރުމަށް އަވަސް، ޑައިނަމިކް ޓެބް ފަންކްޝަނަލިޓީ އިތުރުކުރުން. ނެސްޓް ޓެބްތަކަށް ސަޕޯޓް ނުކުރެއެވެ.
ރޯ ޑެނިމް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ޖީން ޝޯޓްސް އޮސްޓިންގެ ވާހަކަ އަޑުއިވިފައެއް ނުވޭ. ނެސިއުންޓް ޓޯފޫ ސްޓަމްޕްޓައުން އެލިކުއާ، ރެޓްރޯ ސިންތު މާސްޓަރ ކްލީންސް. މޫނުމަތީގެ ކްލިޝް ޓެމްޕަރ، ވިލިއަމްސްބަރގް ކާރލްސް ވީގަން ހެލްވެޓިކާ. ރިޕްރެހެންޑަރިޓް ބުޗަރ ރެޓްރޯ ކެފިޔޭ ޑްރީމްކެޗަރ ސިންތް. ކޮސްބީ ސްވެޓަރ އީއު ބަންހް މީ، ކުއި އިރޫރޭ ޓެރީ ރިޗާޑްސަން އެކްސް ސްކިޑް. އެލިކިއުޕް ޕްލޭސެޓް ސަލްވިއާ ސިލަމް އައިފޯން. ސެއިޓަން އަލިކިޕް ކުއިސް ކާޑިގަން އެމެރިކަން އެޕަރަލް، ބުޗަރ ވޮލަޕްޓޭޓް ނިސީ ކުއީ.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
މި ޕްލަގިން ޓެބް ކުރެވިފައިވާ ނެވިގޭޝަން ކޮމްޕޮނެންޓް ފުޅާކޮށް ޓެބް ކުރެވޭ ސަރަހައްދުތައް އިތުރުކޮށްދެއެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓެބް ކުރެވޭ ޓެބްތައް އެނެބަލް ކުރުން (ކޮންމެ ޓެބެއް ވަކިވަކިން އެކްޓިވޭޓް ކުރަން ޖެހޭނެ):
ވަކިވަކި ޓެބްތައް އެތައް ގޮތަކުން އެކްޓިވޭޓް ކުރެވިދާނެއެވެ:
އެއްވެސް ޖާވާސްކްރިޕްޓެއް ނުލިޔެ ޓެބް ނުވަތަ ޕިލް ނެވިގޭޝަން އެކްޓިވޭޓް ކުރެވޭނީ ފަސޭހައިން އެލިމެންޓެއް ކަނޑައަޅައިގެން data-toggle="tab"
ނުވަތަ data-toggle="pill"
އެލިމެންޓެއްގެ މައްޗަށް ޖަހައިގެންނެވެ. nav
ޓެބަށް އަދި nav-tabs
ކްލާސްތައް އިތުރުކުރުމުން ul
ބޫޓްސްޓްރެޕް ޓެބް ސްޓައިލިންގnav
އަށް އަމަލުކުރާނެ ކަމަށާއި އަދި އަދި nav-pills
ކްލާސްތައް އިތުރުކުރުމުން ޕިލް ސްޓައިލިންގ އަށް އަމަލުކުރާނެ ކަމަށް ވެސް ވިދާޅުވިއެވެ .
ޓެބްތައް ފޭޑް އިން ކޮށްލުމަށްޓަކައި، .fade
ކޮންމެ ޓެބް އަކަށް އިތުރު ކުރާށެވެ .tab-pane
. އަދި ފުރަތަމަ ޓެބް ޕޭން އިން ވެސް .in
ފުރަތަމަ ކޮންޓެންޓް ފެންނަން ހުންނަން ޖެހެ އެވެ.
$().tab
ޓެބް އެލިމެންޓަކާއި ކޮންޓެންޓް ކޮންޓެއިނަރ އެއް އެކްޓިވޭޓް ކުރެއެވެ. ޓެބްގައި ޑީއޯއެމްގައި ކޮންޓެއިނަރ ނޯޑަކަށް ޓާގެޓްކުރާ އެއްޗެއް data-target
ނުވަތަ އެއްޗެއް ހުންނަންވާނެއެވެ. href
މަތީގައިވާ މިސާލުތަކުގައި ޓެބްތަކަކީ އެޓްރިބިއުޓްތަކާއެކު <a>
s އެވެ .data-toggle="tab"
.tab('show')
ދީފައިވާ ޓެބް ހޮވައި، އެއާ ގުޅުންހުރި ކޮންޓެންޓް ދައްކާލައެވެ. ކުރިން ހޮވާފައިވާ އެހެން އެއްވެސް ޓެބެއް ހޮވާފައި ނުވާ ޓެބެއް ވެގެން ގޮސް އެއާ ގުޅުންހުރި ކޮންޓެންޓް ފޮރުވިގެން ދެއެވެ. ޓެބް ޕޭން ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ .shown.bs.tab
އާ ޓެބެއް ދައްކާއިރު، އިވެންޓްތައް ފަޔަރ ކުރަނީ ތިރީގައިވާ ތަރުތީބުންނެވެ.
hide.bs.tab
(މިހާރު އެކްޓިވް ޓެބްގައި)show.bs.tab
(ދައްކާނެ ޓެބްގައި)hidden.bs.tab
(ކުރިން އެކްޓިވް ޓެބްގައި، hide.bs.tab
އިވެންޓަށް ހެދި ޓެބްގައި)shown.bs.tab
(އަލަށް އެކްޓިވް ވެފައިވާ ދެންމެ ދައްކާފައިވާ ޓެބްގައި، show.bs.tab
އިވެންޓަށް ހެދި ޓެބްގައި)އެއްވެސް ޓެބެއް ކުރިން އެކްޓިވް ނުވާނަމަ، ދެން hide.bs.tab
އަދި hidden.bs.tab
އިވެންޓްތައް ފަޔަރ ނުކުރެވޭނެއެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޓެބް | މި އިވެންޓް ފަޔަރ ކުރަނީ ޓެބް ޝޯގައި ނަމަވެސް އާ ޓެބް ދައްކާލުމުގެ ކުރިންނެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.target އަދި ބޭނުން ކުރާށެވެ .event.relatedTarget |
ދައްކާފައިވާ.bs.tab | މި އިވެންޓް ޓެބް ޝޯގައި ފަޔަރ ކުރަނީ ޓެބެއް ދެއްކުމަށްފަހުގައެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.target އަދި ބޭނުން ކުރާށެވެ .event.relatedTarget |
hide.bs.tab އަށް ފޮރުވާށެވެ | މި އިވެންޓް ފަޔަރ ވާނީ އާ ޓެބެއް ދައްކަން ޖެހޭ ވަގުތު (އަދި މިހެން ވުމުން ކުރީގެ އެކްޓިވް ޓެބް ފޮރުވަން ޖެހޭ ވަގުތު) އެވެ. މިހާރު އެކްޓިވް ޓެބާއި ވަރަށް އަވަހަށް އެކްޓިވް ވާނެ އާ ޓެބަށް އަމާޒު ކުރުމަށް event.target އަދި ބޭނުން ކުރާށެވެ .event.relatedTarget |
ފޮރުވިފައިވާ.ބީއެސް.ޓެބް | މި އިވެންޓް ފަޔަރ ކުރަނީ އާ ޓެބެއް ދެއްކުމަށްފަހު (އަދި މިހެން ވުމުން ކުރީގެ އެކްޓިވް ޓެބް ފޮރުވިގެން ދިއުމުންނެވެ). ކުރީގެ އެކްޓިވް ޓެބާއި އާ އެކްޓިވް ޓެބަށް ޓާގެޓް ކުރުމަށް event.target އަދި ބޭނުން ކުރާށެވެ .event.relatedTarget |
ޖޭސަން ފްރޭމް ލިޔެފައިވާ މޮޅު jQuery.tipsy ޕްލަގިން އިން އިންސްޕަޔަރ ކޮށްގެން؛ ޓޫލްޓިޕްސް އަކީ އަޕްޑޭޓް ކުރެވިފައިވާ ވަރޝަނެއް ކަމަށާއި، މިއީ ތަސްވީރުތަކަށް ބަރޯސާ ނުވާ، އެނިމޭޝަންތަކަށް ސީއެސްއެސް3 ބޭނުންކުރާ، އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް ބޭނުންކުރާ ވަރޝަނެކެވެ.
ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.
ޓޫލްޓިޕްސް ބަލާލުމަށް ތިރީގައިވާ ލިންކްތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލައްވާ:
ޓައިޓް ޕެންޓްސް ނެކްސްޓް ލެވެލް ކެފިޔޭ ތިޔަބޭފުޅުންނަށް ފަހަރެއްގައި އެތަކެތީގެ ވާހަކައެއް އަޑުއިވިފައެއް ނެތް. ފޮޓޯ ޖަގަހަ ތުނބުޅި ރޯ ޑެނިމް ލެޓަރޕްރެސް ވީގަން މެސެންޖަރ ބެގް ސްޓަމްޕްޓައުން. ފާމް ޓު ޓޭބަލް ސެއިޓަން، އެމްސީއެސްވީނީގެ ފިކްސީ ސަސްޓެއިނަބަލް ކިނޯއާ 8 ބިޓް އެމެރިކަން އެޕަރަލްގައި ޓެރީ ރިޗާޑްސަން ވައިނައިލް ޗެމްބްރޭ އެއް ހުންނާނެ އެވެ. ތުނބުޅި ސްޓަމްޕްޓައުން، ކާޑިގަންސް ބަންހް މި ލޯމޯ ތަންޑަރކެޓްސް. ޓޯފޫ ބަޔޯޑީސަލް ވިލިއަމްސްބަރގް މާރފާ، ހަތަރު ލޮކޯ މެކްސްވީނީގެ ކްލީންސް ވީގަން ޗެމްބްރޭ. A really ironic artisan whatever keytar , ސީންސްޓަރ ފާމް-ޓު-ޓޭބަލް ބޭންކްސީ އޮސްޓިން ޓްވިޓަރ ހެންޑްލް ފްރީގަން ކްރެޑް ރޯ ޑެނިމް ސިންގަލް-އޮރިޖިން ކޮފީ ވައިރަލް.
ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.
ޕާފޯމަންސް ސަބަބުތަކާހުރެ، ޓޫލްޓިޕް އަދި ޕޮޕޯވަރ ޑޭޓާ-އެޕީސް އަކީ އޮޕްޓް-އިން އެއް ކަމުގައި ވާއިރު، މާނައަކީ އަމިއްލައަށް އެކަންކަން އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
ޕޭޖެއްގައި ހުރި ހުރިހާ ޓޫލްޓިޕްތަކެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޓޫލްޓިޕްތަކުގެ data-toggle
އެޓްރިބިއުޓް އަށް ބަލައިގެން އެ ޓޫލްޓިޕްތައް ހޮވުމެވެ:
ޓޫލްޓިޕް ޕްލަގިން އިން ޑިމާންޑް ކުރުމުން ކޮންޓެންޓާއި މާކަޕް އުފައްދައި، ޑިފޯލްޓްކޮށް ޓޫލްޓިޕްތައް އެމީހުންގެ ޓްރިގަރ އެލިމެންޓްގެ ފަހަތުގައި ބެހެއްޓޭނެއެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:
ޓޫލްޓިޕަކަށް ބޭނުންވާ މާކަޕަކީ ހަމައެކަނި data
އެޓްރިބިއުޓެއް ކަމަށާއި title
އެޗްޓީއެމްއެލް އެލިމެންޓްގައި ޓޫލްޓިޕް އެއް ހުންނަން ބޭނުންވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. ޓޫލްޓިޕްގެ ޖެނެރޭޓް ކުރެވޭ މާކަޕް އަކީ ތަންކޮޅެއް ސާދާ އެއްޗެއް ނަމަވެސް، އެއަށް ޕޮޒިޝަނެއް ބޭނުންވާ ނަމަވެސް (ޑިފޯލްޓްކޮށް، top
ޕްލަގިން އިން ސެޓް ކޮށްފައި ހުންނަނީ) އެވެ.
ބައެއް ފަހަރު ގިނަ ލައިނެއް އޮޅާލާ ހައިޕަރލިންކަކަށް ޓޫލްޓިޕް އެއް އިތުރުކުރަން ބޭނުންވެއެވެ. ޓޫލްޓިޕް ޕްލަގިންގެ ޑިފޯލްޓް ސުލޫކަކީ ހޮރޮޒޮންޓަލީ އަދި ވަރޓިކަލީ ސެންޓަރ ކުރުމެވެ. white-space: nowrap;
މިކަމުން ސަލާމަތްވުމަށްޓަކައި ތިމާގެ ނަކަތްތަކަށް އިތުރުކޮށްލާށެވެ .
.btn-group
a ނުވަތަ an ގެ ތެރޭގައި ހުންނަ އެލިމެންޓްތަކުގައި .input-group
ނުވަތަ ޓޭބަލްއާ ގުޅުންހުރި އެލިމެންޓްތަކުގައި ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) ޓޫލްޓިޕްސް ބޭނުންކުރާއިރު ، container: 'body'
ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށްޓަކައި (އެލިމެންޓް ފުޅާވުމާއި/ ނުވަތަ ޓޫލްޓިޕް ޓްރިގަރ ކުރުމުން އޭގެ ވަށައިގެންވާ ކޮޅުތައް ގެއްލިގެން ދިއުން).
ކީބޯޑަކުން ދަތުރުކުރާ ޔޫޒަރުންނަށް، އަދި ޚާއްޞަކޮށް އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް، ކީބޯޑަށް ފޯކަސް ކުރެވޭ ލިންކްތަކާއި، ފޯމް ކޮންޓްރޯލްތަކާއި، ނުވަތަ tabindex="0"
އެޓްރިބިއުޓެއް ހުންނަ އެއްވެސް އަމިއްލައަށް އުފެދޭ އެލިމެންޓަކަށް ޓޫލްޓިޕްތައް އިތުރުކުރަންވާނެއެވެ.
disabled
a ނުވަތަ އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރުމަށްޓަކައި، .disabled
އެލިމެންޓް a ގެ އެތެރޭގައި ބަހައްޓައި، އޭގެ ބަދަލުގައި <div>
އެއަށް ޓޫލްޓިޕް ޖަހާށެވެ .<div>
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އެނިމޭޝަން އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ޓޫލްޓިޕް އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
ކޮންޓެއިނަރެވެ | ސްޓްރިންގް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ވަކި އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރެއެވެ. މިސާލު: |
ލަސްވުން | ނަންބަރު | އެއްޗެއް | 0 | ޓޫލްޓިޕް ދައްކައި ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html އެވެ | ބޫލިއަން އެވެ | ރަނގަޅުނޫން | ޓޫލްޓިޕް އަށް އެޗްޓީއެމްއެލް ޖައްސަވާށެވެ. ދޮގުނަމަ ޖީކުއަރީގެ text މެތޯޑް ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
ޕްލޭސްމަންޓް | ސްޓްރިންގް | ފަންކްޝަން | 'މަތި' | ޓޫލްޓިޕް ޕޮޒިޝަން ކުރާނެ ގޮތް - މަތީ | ތިރީގައި | ކަނާތްފަރާތުން | ރަނގަޅަށް | އޮޓޯ. ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވާލަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓޫލްޓިޕް ޑީއޯއެމް ނޯޑް އަދި ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ސެލެކްޓަރ އެވެ | ސްޓްރިންގ | ރަނގަޅުނޫން | ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޓޫލްޓިޕްސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
ޓެމްޕްލޭޓް | ސްޓްރިންގ | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ޓޫލްޓިޕް އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބޭސްކުރުން. ޓޫލްޓިޕްގެ
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
މަޤާމު | ސްޓްރިންގް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު | ސްޓްރިންގ | 'ހޯވަރ ފޯކަސް'. | ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manual އެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ. |
ވިއުޕޯޓް | ސްޓްރިންގް | އެއްޗެއް | ފަންކްޝަން | { ސެލެކްޓަރ: 'ހަށިގަނޑު'، ޕެޑިންގ: 0 } | މި އެލިމެންޓްގެ ޙައްދުތަކުގެ ތެރޭގައި ޓޫލްޓިޕް ބެހެއްޓޭނެއެވެ. މިސާލު: ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ ހަމައެކަނި އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ވަކިވަކި ޓޫލްޓިޕްތަކުގެ އިޚްތިޔާރުތައް، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިން، ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކުރުމުގެ ތެރެއިން ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެއެވެ.
$().tooltip(options)
އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޫލްޓިޕް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.
.tooltip('show')
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ހާމަކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.tooltip
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.
.tooltip('hide')
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.tooltip
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
.tooltip('toggle')
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ޓޮގްލް ކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.tooltip
ނުވަތަ hidden.bs.tooltip
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޓޫލްޓިޕްގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
.tooltip('destroy')
އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައި ހަލާކުކޮށްލައެވެ. ޑެލިގޭޝަން ބޭނުންކުރާ ޓޫލްޓިޕްތައް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector
) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޓޫލްޓިޕް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައިވާ.bs.tooltip | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
hide.bs.ޓޫލްޓިޕް | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.ބީއެސް.ޓޫލްޓިޕް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
އިންސަރޓެޑް.ބީއެސް.ޓޫލްޓިޕް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltip އިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ. |
އައިޕެޑްގައި ހުންނަ ފަދައިން ކޮންޓެންޓްގެ ކުދިކުދި އޯވަރލޭތައް، ސެކަންޑަރީ މައުލޫމާތު ހިފެހެއްޓުމަށް ބޭނުންކުރާ ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުން.
ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.
ޕޮޕޯވަރސް އަށް ބޭނުންވަނީ ޓޫލްޓިޕް ޕްލަގިން ތިބާގެ ބޫޓްސްޓްރެޕްގެ ވަރޝަންގައި ހިމަނާށެވެ.
ޕާފޯމަންސް ސަބަބުތަކާހުރެ، ޓޫލްޓިޕް އަދި ޕޮޕޯވަރ ޑޭޓާ-އެޕީސް އަކީ އޮޕްޓް-އިން އެއް ކަމުގައި ވާއިރު، މާނައަކީ އަމިއްލައަށް އެކަންކަން އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
ޕޭޖެއްގައި ހުންނަ ހުރިހާ ޕޮޕޯވަރސް އެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޕޮޕޯވަރސް data-toggle
އެޓްރިބިއުޓް އަށް ބަލައިގެން ހޮވުމެވެ:
.btn-group
a ނުވަތަ an ގެ ތެރޭގައިވާ އުފެއްދުންތަކުގައި ޕޮޕޯވަރސް ބޭނުންކުރާއިރު .input-group
، ނުވަތަ ތާވަލާ ގުޅުންހުރި އުފެއްދުންތަކުގައި ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
)، container: 'body'
ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށްޓަކައި (އެލިމެންޓް ފުޅާވުން ފަދަ އަދި/ ނުވަތަ ޕޮޕޯވަރ ޓްރިގަރ ކުރުމުން އޭގެ ވަށައިގެންވާ ކޮޅުތައް ގެއްލިގެން ދިއުން).
ޕޮޕޯވަރ އެއް disabled
ނުވަތަ .disabled
އެލިމެންޓަކަށް އިތުރު ކުރުމަށްޓަކައި، އެ އެލިމެންޓް އޭގެ ތެރެއަށް ލާފައި އޭގެ ބަދަލުގައި <div>
އެއަށް ޕޮޕޯވަރ އުނގުޅާށެވެ .<div>
ބައެއް ފަހަރު ގިނަ ލައިންތަކެއް އޮޅާލާ ހައިޕަރލިންކަކަށް ޕޮޕޯވަރ އެއް އިތުރުކުރަން ބޭނުންވެއެވެ. ޕޮޕޯވަރ ޕްލަގިންގެ ޑިފޯލްޓް ބިހޭވިއަރ އަކީ ހޮރޮޒޮންޓަލީ އަދި ވަރޓިކަލީ ސެންޓަރ ކުރުމެވެ. white-space: nowrap;
މިކަމުން ސަލާމަތްވުމަށްޓަކައި ތިމާގެ ނަކަތްތަކަށް އިތުރުކޮށްލާށެވެ .
ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.
ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.
ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.
ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.
ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.
focus
ޔޫޒަރ ދެން ކުރާ ކްލިކް ކުރުމުން ޕޮޕޯވަރސް ޑިސްމިސް ކުރުމަށް ޓްރިގަރ ބޭނުން ކުރާށެވެ .
ރަނގަޅަށް ކްރޮސް ބްރައުޒަރ އަދި ކްރޮސް ޕްލެޓްފޯމް ސުލޫކަށްޓަކައި، ޓެގް ނޫން ޓެގް ބޭނުން ކުރަން ޖެހޭއިރު ، <a>
އަދި އަދި އެޓްރިބިއުޓްސް ވެސް <button>
ހިމަނަން ޖެހެއެވެ .role="button"
tabindex
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޕޮޕޯވަރސް އެނެބަލް ކުރުން:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އެނިމޭޝަން އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ޕޮޕޯވަރ އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
ކޮންޓެއިނަރެވެ | ސްޓްރިންގް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެ. މިސާލު: |
ކޮންޓެންޓް | ސްޓްރިންގް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ލަސްވުން | ނަންބަރު | އެއްޗެއް | 0 | ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html އެވެ | ބޫލިއަން އެވެ | ރަނގަޅުނޫން | ޕޮޕޯވަރ އަށް އެޗްޓީއެމްއެލް ޖައްސާށެވެ. ދޮގުނަމަ ޖީކުއަރީގެ text މެތޯޑް ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
ޕްލޭސްމަންޓް | ސްޓްރިންގް | ފަންކްޝަން | 'ކަނާތް' | ޕޮޕޯވަރ ޕޮޒިޝަން ކުރާނެ ގޮތް - ޓޮޕް | ތިރީގައި | ކަނާތްފަރާތުން | ރަނގަޅަށް | އޮޓޯ. ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕޯވަރ ޑީއޯއެމް ނޯޑް އަދި އޭގެ ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ސެލެކްޓަރ އެވެ | ސްޓްރިންގ | ރަނގަޅުނޫން | ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޕޮޕޯވަރ އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޕޮޕޯވަރސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
ޓެމްޕްލޭޓް | ސްޓްރިންގ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
ޕޮޕޯވަރ އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބެސްޓް ކުރާށެވެ. އެ ޕޮޕޯވަރސް އެ ޕޮޕޯވަރސް
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
މަޤާމު | ސްޓްރިންގް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު | ސްޓްރިންގ | 'ކްލިކް' ކޮށްލާށެވެ. | ޕޮޕޯވަރ ޓްރިގަރ ވާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manual އެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ. |
ވިއުޕޯޓް | ސްޓްރިންގް | އެއްޗެއް | ފަންކްޝަން | { ސެލެކްޓަރ: 'ހަށިގަނޑު'، ޕެޑިންގ: 0 } | މި އުނިއިތުރުގެ ޙައްދުތަކުގެ ތެރޭގައި ޕޮޕޯވަރ ބެހެއްޓޭނެއެވެ. މިސާލު: ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ ހަމައެކަނި އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ވަކިވަކި ޕޮޕޯވަރތަކަށް އޮޕްޝަންތައް ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިންނެވެ.
$().popover(options)
އެލިމެންޓް ކަލެކްޝަނަކަށް ޕޮޕޯވަރސް އިނިޝިއަލައިޒް ކުރެއެވެ.
.popover('show')
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ހާމަކޮށްދެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.
.popover('hide')
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ފޮރުވައެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
.popover('toggle')
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ޓޮގްލް ކުރެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.popover
ނުވަތަ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ "މެނުއަލް" ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
.popover('destroy')
އުނިއިތުރެއްގެ ޕޮޕޮވަރ ފޮރުވައި ހަލާކުކޮށްލައެވެ. ޑެލިގޭޝަން ބޭނުންކުރާ ޕޮޕޯވަރސް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector
) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޕޮޕޯވަރ އެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ފޮރުވާ.ބީ.އެސް.ޕޮޕޯވަރ | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
އިންސަރޓް ކޮށްފައި.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.popover އިވެންޓަށްފަހު ޕޮޕޯވަރ ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައި އޮތުމުންނެވެ. |
މި ޕްލަގިން އާއި އެކު ހުރިހާ އެލާޓް މެސެޖުތަކަށް ޑިސްމިސް ފަންކްޝަނަލިޓީ އިތުރުކުރުން.
ބަޓަނެއް ބޭނުންކުރާއިރު .close
، އެއީ ފުރަތަމަ ދަރިއަކަށް ވާންޖެހޭނެ ކަމަށާއި، .alert-dismissible
މާކަޕްގައި އޭގެ ކުރިން އެއްވެސް ޓެކްސްޓް ކޮންޓެންޓެއް އައިސްގެން ނުވާނެއެވެ.
މިއާއި އެ ބަދަލުކޮށް އަލުން މަސައްކަތް ކުރާށެވެ. ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލަކްޓަސް، ނިސީ އެރަޓް ޕޯޓިޓޯރ ލިގުލާ، އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް. ކްރަސް މެޓިސް ކޮންސެކްޓެޓަރ ޕުރަސް ސިޓް އެމެޓް ފަރމަންޓަމް އެވެ.
ހަމައެކަނި ތިބާގެ ކްލޯޒް ބަޓަންއަށް އެޑްކޮށްގެން data-dismiss="alert"
އޮޓޮމެޓިކުން އެލާޓް ކްލޯޒް ފަންކްޝަނަލިޓީއެއް ލިބޭނެއެވެ. އެލާޓެއް ބަންދުކުރުމުން އެލާޓް ޑީއޯއެމް އިން ނައްތާލައެވެ.
.fade
ބަންދުކުރާއިރު ތިބާގެ އެލާޓްތައް އެނިމޭޝަން ބޭނުން ކުރުމަށް، އެ އެލާޓްތަކުގައި އަދި ހުރިކަން ޔަގީން ކުރައްވާށެވެ.in
ތިބާގެ އެލާޓްތައް ބަންދުކުރާއިރު އެނިމޭޝަން ބޭނުން ކުރުމަށް، އެ އެލާޓްތަކަށް މިހާރުވެސް އެޕްލައިކޮށްފައިވާ
$().alert()
data-dismiss="alert"
އެޓްރިބިއުޓް ހުންނަ ޑެސެންޑެންޓް އެލިމެންޓްތަކުގައި ކްލިކް އިވެންޓްތައް އަޑުއަހާ އެލާޓެއް ހަދައެވެ . (ޑޭޓާ-އެޕީގެ އޮޓޯ-އިނިޝިއަލައިޒޭޝަން ބޭނުންކުރާއިރު ކޮންމެހެން ބޭނުން ނުވާނެ.)
$().alert('close')
އެލާޓެއް ޑީއޯއެމް އިން ނައްތާލައިގެން ބަންދުކުރެއެވެ. .fade
އެލިމެންޓްގައި އަދި .in
ކްލާސްތައް ހުރިނަމަ ، އެލާޓް ނައްތާލުމުގެ ކުރިން އެލާޓް ފޭޑް އައުޓް ވާނެއެވެ.
ބޫޓްސްޓްރެޕްގެ އެލާޓް ޕްލަގިން އިން އެލާޓް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް ދިމާވާ މަދު ހާދިސާތަކެއް ހާމަކޮށްދެ އެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ކްލޯޒް.ބީއެސް.އެލާޓް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ close އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ބަންދުކޮށްފައި.ބީއެސް.އެލާޓް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލާޓް ބަންދުކޮށްފައި އޮތުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ބަޓަންތަކުން އިތުރަށް ކުރާށެވެ. ކޮންޓްރޯލް ބަޓަން ސްޓޭޓްސް ނުވަތަ ޓޫލްބާ ފަދަ އިތުރު ކޮމްޕޯނެންޓްތަކަށް ބަޓަންތަކުގެ ގްރޫޕްތައް އުފެއްދުން.
ފަޔަރފޮކްސް އިން ޕޭޖް ލޯޑްތަކުގެ ތެރެއިން ފޯމް ކޮންޓްރޯލް ސްޓޭޓްސް (ޑިސެބިލްޑްނެސް އަދި ޗެކްޑްނެސް) ޕަރސިސްޓް ކުރެއެވެ . މިކަމަށް އޮތް ވޯކްއަރައުންޑަކީ ބޭނުން ކުރުމެވެ autocomplete="off"
. މޮޒިލާ ބަގް #654072 ބައްލަވާށެވެ .
data-loading-text="Loading..."
ބަޓަނެއްގައި ލޯޑިންގ ސްޓޭޓެއް ބޭނުން ކުރުމަށް އިތުރުކުރުން .
މި ފީޗާއަކީ v3.3.5 އިން ފެށިގެން ޑިޕްރެކޭޓެޑް ފީޗާއެއް ކަމަށާއި، v4 ގައި ނައްތާލާފައިވާ ފީޗާއެކެވެ.
މި މުޒާހަރާއަށްޓަކައި އަޅުގަނޑުމެން މި ބޭނުންކުރަނީ data-loading-text
އަދި $().button('loading')
, އެކަމަކު އެއީ ހަމައެކަނި ތިޔަބޭފުޅުންނަށް ބޭނުންކުރެވޭނެ ދައުލަތެއް ނޫން. މިކަމާ ބެހޭ އިތުރު މަޢުލޫމާތު ތިރީގައި މިވަނީ $().button(string)
ލިޔެކިޔުންތަކުންނެވެ .
data-toggle="button"
އެއް ބަޓަނެއްގައި ޓޮގްލިންގ އެކްޓިވޭޓް ކުރުމަށް އެޑް ކުރާށެވެ.
.active
އަދި ...aria-pressed="true"
ޕްރީ ޓޮގްލް ކުރެވިފައިވާ ބަޓަންތަކަށް .active
ކްލާހާއި aria-pressed="true"
އެޓްރިބިއުޓް button
އަމިއްލައަށް އިތުރުކުރަން ޖެހެއެވެ.
data-toggle="buttons"
އެއިން ޗެކްބޮކްސްއަކަށް ނުވަތަ ރޭޑިއޯ އިންޕުޓްތަކަށް އިތުރުކޮށް .btn-group
އެމީހުންގެ ސްޓައިލްތަކުގައި ޓޮގްލް ކުރެވޭނެ ގޮތް ހެދުން.
.active
.active
ޕްރީސެލެކްޓް ކުރެވިފައިވާ އޮޕްޝަންތަކަށް، އިންޕުޓްގެ ކްލާސް އަމިއްލައަށް އިތުރުކުރަން ޖެހެއެވެ label
.
ޗެކްބޮކްސް ބަޓަނެއްގެ ޗެކް ކުރެވިފައިވާ ހާލަތު ބަޓަންގައި click
އިވެންޓެއް ފަޔަރ ނުކޮށް އަޕްޑޭޓް ކުރެވިއްޖެނަމަ (އެބަހީ އިންޕުޓްގެ ޕްރޮޕަޓީ <input type="reset">
ސެޓް ކުރުމުން ނުވަތަ މެދުވެރިކޮށް ) އިންޕުޓްގެ ކްލާސް އަމިއްލައަށް checked
ޓޮގްލް ކުރަން ޖެހޭނެއެވެ ..active
label
$().button('toggle')
ޓޮގްލްސް ޕުޝް ސްޓޭޓް. ބަޓަން އެކްޓިވޭޓް ކޮށްފައިވާ ކަމުގެ ސިފަ ލިބެއެވެ.
$().button('reset')
ބަޓަން ސްޓޭޓް ރީސެޓް ކުރަނީ - ޓެކްސްޓް އަސްލު ޓެކްސްޓަށް ބަދަލުކުރެއެވެ. މި މެތޯޑަކީ އެސިންކްރޮނަސް މެތޯޑަކަށް ވާއިރު، ރީސެޓް ކުރުން ހަގީގަތުގައި ނިމުމުގެ ކުރިން ރިޓަރން ވެއެވެ.
$().button(string)
އެއްވެސް ޑޭޓާ ޑެފިނޭޓް ކުރެވިފައިވާ ޓެކްސްޓް ސްޓޭޓަކަށް ޓެކްސްޓް ބަދަލުކުރެއެވެ.
ފަސޭހައިން ޓޮގްލް ބިހޭވިއަރ އަށް އަތްމަތި ދަތި ކްލާސްތަކެއް ބޭނުންކުރާ ފްލެކްސިބަލް ޕްލަގިންއެކެވެ.
ކޮލަޕްސް އަށް ޓްރާންސިޝަންސް ޕްލަގިން ތިބާގެ ބޫޓްސްޓްރެޕްގެ ވަރޝަންގައި ހިމަނަން ޖެހެ އެވެ.
ކްލާސް ބަދަލުތަކުގެ ތެރެއިން އެހެން އެލިމެންޓެއް ދައްކައި ފޮރުވުމަށް ތިރީގައިވާ ބަޓަންތަކަށް ފިތާލާށެވެ:
.collapse
ކޮންޓެންޓް ފޮރުވައެވެ.collapsing
ޓްރާންސިޝަންތަކުގެ ތެރޭގައި އަމަލުކުރެއެވެ.collapse.in
ކޮންޓެންޓް ދައްކައެވެhref
އެޓްރިބިއުޓް އާއި އެކު ލިންކެއް ، ނުވަތަ އެޓްރިބިއުޓް އާއި އެކު ބަޓަން ބޭނުން ކުރެވިދާނެއެވެ data-target
. ދެ ހާލަތުގައި ވެސް data-toggle="collapse"
ލާޒިމްވެ އެވެ.
ޕެނަލް ކޮމްޕޮނެންޓާއެކު އެކޯޑިއަން އެއް އުފެއްދުމަށްޓަކައި ޑިފޯލްޓް ކޮލަޕްސް ބިހޭވިއަރ ދިގުކޮށްލާށެވެ.
.panel-body
އަދި s އާއި s ސްވޮޕް އައުޓް ކުރުމަކީ ވެސް ކުރެވިދާނެ ކަމެކެވެ .list-group
.
aria-expanded
ކޮންޓްރޯލް އެލިމެންޓަށް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . މި އެޓްރިބިއުޓް އިން ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކަށް ކޮލެޕްސިބަލް އެލިމެންޓްގެ މިހާރުގެ ހާލަތު ސާފުކޮށް ބަޔާންކޮށްދެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ޑިފޯލްޓްކޮށް ބަންދުކޮށްފައިވާނަމަ، އޭގެ އަގު ހުންނަންވާނީ aria-expanded="false"
. in
ކްލާސް ބޭނުންކޮށްގެން ޑިފޯލްޓްކޮށް ހުޅުވާލުމަށް ކޮލެޕްސިބަލް އެލިމެންޓް ސެޓްކޮށްފައިވާނަމަ aria-expanded="true"
، އޭގެ ބަދަލުގައި ކޮންޓްރޯލްގައި ސެޓް ކުރާށެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހުޅުވާފައި ނުވަތަ ބަންދުކޮށްފައި ހުރިތޯ ނުވަތަ ނޫންތޯ ބަލައިގެން ޕްލަގިން އޮޓޮމެޓިކުން މި އެޓްރިބިއުޓް ޓޮގްލް ކުރާނެއެވެ.
މީގެ އިތުރުން، ތިބާގެ ކޮންޓްރޯލް އެލިމެންޓް ޓާގެޓް ކުރަނީ އެއް ކޮލެޕްސިބަލް އެލިމެންޓަކަށް ނަމަ – މާނައަކީ data-target
އެޓްރިބިއުޓް އިޝާރާތް ކުރަނީ id
ސެލެކްޓަރަކަށް ނަމަ – ކޮންޓްރޯލް އެލިމެންޓަށް އިތުރު aria-controls
އެޓްރިބިއުޓެއް އިތުރުކުރެވިދާނެ id
، ކޮލެޕްސިބަލް އެލިމެންޓުގެ ގެ ހިމެނޭނެއެވެ. ޒަމާނީ ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކުން މި އެޓްރިބިއުޓްގެ ބޭނުން ހިފައިގެން ސީދާ ކޮލެޕްސިބަލް އެލިމެންޓަށް ޚުދު ދިއުމަށް އިތުރު ޝޯޓްކަޓްތައް ފޯރުކޮށްދެއެވެ.
ކޮލަޕްސް ޕްލަގިން އިން ހެވީ ލިފްޓިންގ ހެންޑްލް ކުރުމަށް މަދު ކްލާސްތަކެއް ބޭނުން ކުރެއެވެ:
.collapse
ކޮންޓެންޓް ފޮރުވައެވެ.collapse.in
ކޮންޓެންޓް ދައްކައެވެ.collapsing
ޓްރާންސިޝަން ފެށުމުން އިތުރުކޮށް، ނިމުމުން ނައްތާލެވޭނެއެވެމި ކްލާސްތައް 1 އިން ފެނިވަޑައިގަންނަވާނެއެވެ component-animations.less
.
ހަމައެކަނި ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ކޮންޓްރޯލް އޮޓޮމެޓިކުން ޙަވާލުކުރުމަށްޓަކައި އެލިމެންޓަށް data-toggle="collapse"
އަދި އޭ އިތުރުކޮށްލާށެވެ. data-target
އެޓްރިބިއުޓް ބަލައިގަންނަނީ data-target
ކޮލެޕްސް އެޕްލައި ކުރުމަށް ސީއެސްއެސް ސެލެކްޓަރެކެވެ. collapse
ކޮލެޕްސިބަލް އެލިމެންޓަށް ކްލާސް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . ޑިފޯލްޓްކޮށް ހުޅުވާލަން ބޭނުންނަމަ، އިތުރު ކްލާސް އިތުރުކުރައްވާށެވެ in
.
ކޮލެޕްސިބަލް ކޮންޓްރޯލަކަށް އެކޯޑިއަން ކަހަލަ ގްރޫޕް މެނޭޖްމަންޓް އިތުރުކުރުމަށްޓަކައި، ޑޭޓާ އެޓްރިބިއުޓް އިތުރުކުރުން data-parent="#selector"
. މި��ަން ޢަމަލީ ގޮތުން ބަލާލުމަށް ޑެމޯއަށް ރިފަރ ކުރާށެވެ.
މެނުއަލްކޮށް އެނެބަލް ކުރާނީ:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-parent=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
ބެލެނިވެރިޔާ އެވެ | ސެލެކްޓަރ އެވެ | ރަނގަޅުނޫން | ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، މި ކޮލެޕްސިބަލް އައިޓަމް ދައްކާއިރު، ކަނޑައެޅިފައިވާ ޕޭރެންޓްގެ ދަށުގައިވާ ހުރިހާ ކޮލެޕްސިބަލް އެލިމެންޓްތައް ބަންދުވާނެއެވެ. panel (ސަގާފީ އެކޯޑިއަން ސުލޫކާ އެއްގޮތް - މިއީ ކްލާހަށް ބަރޯސާވާ ކަމެއް ) |
ޓޮގްލް ކޮށްލާށެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | އިންވޮކޭޝަންގައި ކޮލެޕްސިބަލް އެލިމެންޓް ޓޮގްލް ކުރެއެވެ |
.collapse(options)
ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ގޮތުގައި ތިބާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object
.
.collapse('toggle')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކާ ނުވަތަ ފޮރުވުމަށް ޓޮގްލް ކުރެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.collapse
ނުވަތަ hidden.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ.
.collapse('show')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކައެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ.
.collapse('hide')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ފޮރުވައެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ.
ބޫޓްސްޓްރެޕްގެ ކޮލަޕްސް ކްލާސް އިން ކޮލަޕްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ކޮލަޕްސް ކޮށްލާށެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައި.bs.collapse | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކޮލަޕްސް އެލިމެންޓެއް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
hide.bs.collapse ކޮށްލާށެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.bs.collapse | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޔޫޒަރަށް ކޮލެޕްސް އެލިމެންޓެއް ފޮރުވިފައި އޮތުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ކެރޮސެލް ފަދަ އުފެއްދުންތަކުގެ ތެރެއިން ސައިކަލް ދުއްވުމަށް ބޭނުންކުރާ ސްލައިޑްޝޯ ކޮމްޕޮނެންޓެކެވެ. ނެސްޓް ކެރޮސެލްތަކަށް ސަޕޯޓް ނުކުރެއެވެ.
ކެރޮސެލް ކޮމްޕޮނެންޓަކީ އާންމުކޮށް އެކްސެސިބިލިޓީ ސްޓޭންޑަޑްތަކަށް ތަބާވާ އެއްޗެއް ނޫނެވެ. ކޮމްޕްލައިންޓް ވާން ބޭނުންވާނަމަ ކޮންޓެންޓް ހުށަހެޅުމަށް އެހެން ގޮތްތަކަށް ވިސްނާށެވެ.
ބޫޓްސްޓްރެޕް އިން އެނިމޭޝަންތަކަށް ޚާއްޞަކޮށް ސީއެސްއެސް3 ބޭނުންކުރި ނަމަވެސް އިންޓަރނެޓް އެކްސްޕްލޯރަރ 8 & 9 އިން ބޭނުންވާ ސީއެސްއެސް ޕްރޮޕަޓީތަކަށް ސަޕޯޓް ނުކުރެއެވެ. މިގޮތުން މި ބްރައުޒާތައް ބޭނުންކުރާއިރު ސްލައިޑް ޓްރާންސިޝަން އެނިމޭޝަންތަކެއް ނެތެވެ. އަޅުގަނޑުމެން ގަސްތުގައި ނިންމާފައި މިވަނީ ޓްރާންސިޝަންތަކަށް ޖީކުއަރީ އަށް ބިނާކޮށް ފޯލްބެކްތައް ނުހިމަނާށެވެ.
އެއިން އެއް ސްލައިޑަކަށް .active
ކްލާސް އިތުރުކުރަން ޖެހެ އެވެ. އެހެން ނޫނީ ކެރޮސެލް ފެންނާކަށް ނެތެވެ.
އެ .glyphicon .glyphicon-chevron-left
އަދި .glyphicon .glyphicon-chevron-right
ކްލާސްތަކަކީ ކޮންމެހެން ކޮންޓްރޯލްތަކަށް ބޭނުންވާ އެއްޗެއް ނޫނެވެ. ބޫޓްސްޓްރެޕް އިން ފޯރުކޮށްދެނީ .icon-prev
އަދި .icon-next
އާދައިގެ ޔުނިކޯޑް ބަދަލުތަކެއްގެ ގޮތުގައެވެ.
.carousel-caption
އެއްވެސް އެއްޗެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓާއެކު ފަސޭހައިން ސްލައިޑްތަކަށް ކެޕްޝަންތައް އިތުރުކުރުން .item
. އެތަނުގެ ތެރޭގައި ގާތްގަނޑަކަށް ކޮންމެ އިޚްތިޔާރީ އެޗްޓީއެމްއެލްއެއް ބަހައްޓައިގެން އޮޓޮމެޓިކުން އެލައިންކޮށް ފޯމެޓް ކުރެވޭނެއެވެ.
ކެރޮސެލް ކޮންޓްރޯލްތައް ރަނގަޅަށް މަސައްކަތް ކުރުމަށްޓަކައި id
އެންމެ ބޭރު ކޮންޓެއިނަރުގައި ހުންނަ ކޮންޓެއިނަރ (the ) ބޭނުންކުރަން ޖެހެއެވެ. .carousel
އެތައް ކެރޮސެލްއެއް އިތުރުކުރާއިރު، ނުވަތަ ކެރޮސެލްއެއްގެ ބަދަލުކުރާއިރުid
ކަމާބެހޭ ކޮންޓްރޯލްތައް އަޕްޑޭޓްކުރުން ޔަގީންކުރައްވާށެވެ.
ކެރޮސެލްގެ މަޤާމު ފަސޭހައިން ކޮންޓްރޯލް ކުރުމަށް ޑޭޓާ އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ. data-slide
ކީވޯޑްތައް ބަލައިގަންނަ prev
ނުވަތަ next
, މިއީ މިހާރު ހުރި މަޤާމަށް ނިސްބަތްކޮށް ސްލައިޑްގެ މަޤާމު ބަދަލުކޮށްދޭ ކަމެކެވެ. ނުވަތަ، data-slide-to
ކެރޮސެލް އަށް ރޯ ސްލައިޑް އިންޑެކްސްއެއް ފޮނުވުމަށް ބޭނުންކުރާށެވެ data-slide-to="2"
، މިއީ ސްލައިޑްގެ މަޤާމު , އިން ފެށޭ ވަކި އިންޑެކްސްއަކަށް ބަދަލުކޮށްދޭ އެއްޗެކެވެ 0
.
މި data-ride="carousel"
އެޓްރިބިއުޓް ބޭނުންކުރަނީ ޕޭޖް ލޯޑް ކުރާއިރު ފެށިގެން އެނިމޭޓިންގ ގެ ގޮތުގައި ކެރޮސެލް އެއް ފާހަގަކުރުމަށެވެ. އެއީ އެއް ކެރޮސެލްއެއްގެ (ރިޑަންޑަންޓް އަދި ކޮންމެހެން ބޭނުން ނުވާ) ސާފު ޖާވާސްކްރިޕްޓް އިނިޝިއަލައިޒޭޝަން އާއި ގުޅިގެން ބޭނުން ނުކުރެވޭނެ އެއްޗެކެވެ.
ކެރޮސެލްއަށް މެނުއަލްކޮށް ގުޅާނީ:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-interval=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އިންޓަވަލް އެވެ | ނަންބަރު | 5000ރ | އެއްޗެއް އޮޓޮމެޓިކުން ސައިކަލް ދުއްވުމާ ދެމެދު ލަސްކުރަންޖެހޭ ވަގުތު. ދޮގު ނަމަ ކެރޮސެލް އޮޓޮމެޓިކުން ސައިކަލް ނުކުރާނެ އެވެ. |
މަޑުޖައްސާލުން | ސްޓްރިންގް | null އެވެ | "ހޯވަރ" އެވެ. | އަށް ސެޓްކޮށްފިނަމަ "hover" ކެރޮސެލް އޮން ސައިކަލް ކުރުން މަޑުޖައްސާލައި ކެރޮސެލް އޮން mouseenter ސައިކަލް ކުރުން އަލުން ފަށައެވެ mouseleave . އަށް ސެޓްކޮށްފިނަމަ null ، ކެރޮސެލްގެ މައްޗަށް ހޯވަރ ކުރުމުން އެކަން މަޑުޖައްސާކަށް ނުޖެހޭނެއެވެ. |
އޮޅުން | ބޫލިއަން އެވެ | ރަނގަޅު | ކެރޮސެލް މެދުނުކެނޑި ސައިކަލް ދުއްވަންވީތޯ ނުވަތަ ހަރު ހުއްޓުމެއް ހުންނަންވީތޯއެވެ. |
ކީބޯޑެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ކީބޯޑް އިވެންޓްތަކަށް ކެރޮސެލް ރިއެކްޓް ކުރަންވީތޯ؟ |
.carousel(options)
އިޚްތިޔާރީ އޮޕްޝަންތަކަކާއެކު ކެރޮސެލް އިނިޝިއަލައިޒްކޮށް object
ތަކެތި މެދުވެރިކޮށް ސައިކަލް ދުއްވަން ފަށައެވެ.
.carousel('cycle')
ކެރޮސެލް ތަކެތީގެ ތެރެއިން ކަނާތުން ވާތްފަރާތަށް ސައިކަލް ދުއްވައެވެ.
.carousel('pause')
ތަކެތި މެދުވެރިކޮށް ކެރޮސެލް ސައިކަލް ދުއްވުން ހުއްޓުވައެވެ.
.carousel(number)
ކެރޮސެލް ވަކި ފްރޭމަކަށް ސައިކަލް ކުރެއެވެ (0 އަށް ބިނާކޮށް، އެރޭއަކާ އެއްގޮތް).
.carousel('prev')
ކުރީގެ އައިޓަމަށް ސައިކަލް ކުރެއެވެ.
.carousel('next')
ދެން އޮތް އެއްޗަކަށް ސައިކަލް ކުރެއެވެ.
ބޫޓްސްޓްރެޕްގެ ކެރޮސެލް ކްލާހުގައި ކެރޮސެލް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް ދެ އިވެންޓެއް ހާމަކޮށްދެ އެވެ.
ދެ އިވެންޓުގައި ވެސް ތިރީގައިވާ އިތުރު ޕްރޮޕަޓީތައް ހުރެއެވެ.
direction
: ކެރޮސެލް ސްލައިޑް ވަމުންދާ މިސްރާބު (އެއީ "left"
ނުވަތަ "right"
) އެވެ.relatedTarget
: އެކްޓިވް އައިޓަމްގެ ގޮތުގައި ތަނަށް ސްލައިޑް ކުރަމުންދާ ޑީއޯއެމް އެލިމެންޓް.ހުރިހާ ކެރޮސެލް އިވެންޓްތަކެއް ފަޔަރ ކުރަނީ ޚުދު ކެރޮސެލް އަށް (އެބަހީ އެ <div class="carousel">
) އެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ސްލައިޑް.ބީއެސް.ކެރޮސެލް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ slide އިންސްޓޭންސް މެތޯޑް އިންވޮކޭޓް ކުރުމުންނެވެ. |
ސްލިޑް.ބީއެސް.ކެރޮސެލް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކެރޮސެލްގެ ސްލައިޑް ޓްރާންސިޝަން ފުރިހަމަ ކުރުމުންނެވެ. |
އެފިކްސް ޕްލަގިން position: fixed;
އޮން އެންޑް އޮފް ޓޮގްލްކޮށް، އިން ފެންނަ އިފެކްޓް އެމިއުލޭޓް ކުރެއެވެ position: sticky;
. ކަނާތްފަރާތުގައިވާ ސަބްނެވިގޭޝަނަކީ އެފިކްސް ޕްލަގިންގެ ލައިވް ޑެމޯއެކެވެ.
ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް ނުވަތަ އަމިއްލަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް މެނުއަލްކޮށް އެފިކްސް ޕްލަގިން ބޭނުން ކުރާށެވެ. ދެ ހާލަތުގައި ވެސް ތިބާ ޖަހާފައިވާ ކޮންޓެންޓްގެ ޕޮޒިޝަނާއި ފުޅާމިނަށް ސީއެސްއެސް ފޯރުކޮށްދޭން ޖެހެ އެވެ.
ނޯޓް: ސަފާރީ ރެންޑަރިންގ ބަގެއްގެ ސަބަބުން ނިސްބަތުން ޕޮޒިޝަން ކުރެވިފައިވާ އެލިމެންޓެއްގައި ހިމެނޭ އެލިމެންޓެއްގައި، ދަމައިގަނެވޭ ނުވަތަ ކޮއްޕާލާފައިވާ ކޮލަމެއް ފަދަ އެއްޗެއްގައި އެފިކްސް ޕްލަގިން ބޭނުން ނުކުރައްވާށެވެ .
އެފިކްސް ޕްލަގިން ތިން ކްލާހެއްގެ މެދުގައި ޓޮގްލް ކުރާއިރު، ކޮންމެ ކްލާހެއް ތަމްސީލުކުރަނީ ވަކި ސްޓޭޓެއް: .affix
, .affix-top
, އަދި .affix-bottom
. މި ކްލާސްތަކަށް އަމިއްލައަށް (މި ޕްލަގިން އިން މި��ިވަންކޮށް) ސްޓައިލްތައް ފޯރުކޮށްދޭން ޖެހޭނެ، position: fixed;
on ފިޔަވައި، ހަގީގީ މަގާމުތައް ބެލެހެއްޓުމަށްޓަކައެވެ..affix
މިއީ އެފިކްސް ޕްލަގިން މަސައްކަތްކުރާ ގޮތެވެ:
.affix-top
އެލިމެންޓް އޭގެ އެންމެ މަތީ މަޤާމުގައި ހުރިކަން އަންގައިދިނުމަށެވެ. މި ހިސާބުން ސީއެސްއެސް ޕޮޒިޝަނިންގ އެއް ބޭނުން ނުވާނެއެވެ..affix
ބަދަލުކޮށް .affix-top
ސެޓްކުރާ ތަން position: fixed;
(ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އިން ފޯރުކޮށްދޭ) އެވެ..affix
ތިރީ އޮފްސެޓެއް ކަނޑައެޅިފައިވާނަމަ، އޭގެ ފަހަތުން ސްކްރޯލް ކުރުމުން އޭގެ ބަދަލުގައި .affix-bottom
. އޮފްސެޓްތަކަކީ އިޚްތިޔާރީ އެއްޗަކަށް ވާތީ، އެއްޗެއް ސެޓް ކުރުމަށްޓަކައި އެކަށީގެންވާ ސީއެސްއެސް ސެޓް ކުރަން ޖެހެއެވެ. މި ހާލަތުގައި position: absolute;
ބޭނުންވާ ވަގުތު އިތުރު ކުރާށެވެ. އެތަނުން އެލިމެންޓް ޕޮޒިޝަން ކުރާނެ ތަނެއް ކަނޑައެޅުމަށް ޕްލަގިން އިން ޑޭޓާ އެޓްރިބިއުޓް ނުވަތަ ޖާވާސްކްރިޕްޓް އޮޕްޝަން ބޭނުން ކުރެ އެވެ.ތިރީގައިވާ އެއްވެސް ޔޫސޭޖް އޮޕްޝަނަކަށް ސީއެސްއެސް ސެޓް ކުރުމަށް މަތީގައިވާ ފިޔަވަޅުތަކަށް އަމަލު ކުރައްވާށެވެ.
ކޮންމެ އެލިމެންޓަކަށް ވެސް ފަސޭހައިން އެފިކްސް ބިހޭވިއަރ އިތުރު ކުރުމަށްޓަކައި، ހަމައެކަނި data-spy="affix"
ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އެޑް ކޮށްލާށެވެ. އެލިމެންޓެއްގެ ޕިނިންގ ޓޮގްލް ކުރަންވީ ވަގުތު ކަނޑައެޅުމަށް އޮފްސެޓްތައް ބޭނުން ކުރާށެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެފިކްސް ޕްލަގިން އަށް ގުޅާލާ:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset-top="200"
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އޮފްސެޓް ކޮށްލާށެވެ | ނަންބަރު | ފަންކްޝަން | އެއްޗެއް | 10 | ސްކްރޯލްގެ މަޤާމު ހިސާބުކުރާއިރު ސްކްރީނުން އޮފްސެޓް ކުރަންޖެހޭ ޕިކްސެލްތައް. އެއް ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ މަތިންނާއި ތިރީ ދިމާލަށް ވެސް އޮފްސެޓް ޖަހާނެ އެވެ. ޔުނިކް، ތިރީ އަދި މަތީ އޮފްސެޓެއް ފޯރުކޮށްދިނުމަށްޓަކައި ހަމައެކަނި އެއްޗެއް offset: { top: 10 } ނުވަތަ offset: { top: 10, bottom: 5 } . އޮފްސެޓެއް ޑައިނަމިކް ގޮތެއްގައި ކަލަންޑަރ ކުރަން ބޭނުންވާ ވަގުތު ފަންކްޝަނެއް ބޭނުން ކުރާށެވެ. |
އަމާޒު | ސެލެކްޓަރ | ނޯޑް | ޖީކުއަރީ އެލިމެންޓް | އެ window އެއްޗެއް |
އެފިކްސްގެ ޓާގެޓް އެލިމެންޓް ކަނޑައަޅައެވެ. |
.affix(options)
އެފިކްސްޑް ކޮންޓެންޓެއްގެ ގޮތުގައި ތިމާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object
.
.affix('checkPosition')
ކަމާބެހޭ އުފެއްދުންތަކުގެ ޑިމައިންސްތަކާއި، މަޤާމާއި، ސްކްރޯލް މަޤާމަށް ބަލައިގެން އެފިކްސްގެ ޙާލަތު އަލުން ހިސާބުކުރެއެވެ. .affix
, .affix-top
, އަދި ކްލާސްތައް .affix-bottom
އާ ހާލަތަށް ބަލާފައި ޖަހާފައިވާ ކޮންޓެންޓަށް އިތުރުކޮށް ނުވަތަ އުނިކުރެއެވެ. މި އުސޫލަށް ގޮވާލަން ޖެހެނީ އެފިކްސް ކުރެވިފައިވާ ކޮންޓެންޓް ނުވަތަ ޓާގެޓް އެލިމެންޓްގެ ޑިމައިންސްތަކަށް ބަދަލު އަންނަ ކޮންމެ ފަހަރަކު، އެފިކްސް ކުރެވިފައިވާ ކޮންޓެންޓް ރަނގަޅަށް ޕޮޒިޝަން ކުރެވޭތޯއެވެ.
ބޫޓްސްޓްރެޕްގެ އެފިކްސް ޕްލަގިން އިން އެފިކްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެއެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
އެފިކްސް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް ޖަހާ ނިމުމުގެ ވަގުތުން ކުރިންނެވެ. |
އެފިކްސްޑް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް ޖަހާ ނިމުމުންނެވެ. |
އެފިކްސް-ޓޮޕް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް އެފިކްސް-ޓޮޕް ކުރުމުގެ ވަގުތުން ކުރިންނެވެ. |
އެފިކްސްޑް-ޓޮޕް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް އެފިކްސް-ޓޮޕް ކުރުމަށްފަހުގައެވެ. |
އެފިކްސް-ބޮޓޮމް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރަނީ އެލިމެންޓް އެފިކްސް-ބޮޓޮމް ވުމުގެ ކުރިން ވަގުތުންނެވެ. |
އެފިކްސްޑް-ބޮޓޮމް.ބީއެސް.އެފިކްސް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލިމެންޓް އެފިކްސް-ބޮޓޮމް އަށް ފަހުގައެވެ. |