ޖާވާސްކްރިޕްޓް

ބޫޓްސްޓްރެޕްގެ ކޮމްޕޯނެންޓްތައް ދިރުވައި އާލާކުރުން- މިހާރު 13 ކަސްޓަމް ޖީކުއަރީ ޕްލަގިންސް އާއެކު.

ވަކިވަކިން ނުވަތަ އެކުލަވާލާފައި

ޕްލަގިންތައް ވަކިވަކިން (ބައެއް ޑިޕެންޑެންސީތައް ބޭނުންވާ ނަމަވެސް)، ނުވަތަ އެއްފަހަރާ ހުރިހާ އެއްޗެއް ހިމަނާލެވިދާނެއެވެ. bootstrap.js އަދި bootstrap.min.js ގައި ވެސް ހުރިހާ ޕްލަގިންސް އެއް ފައިލެއްގައި ހިމެނެއެވެ.

ޑޭޓާ އެޓްރިބިއުޓްސް

ޖާވާސްކްރިޕްޓްގެ އެންމެ ލައިނެއް ނުލިޔެ ޚުދު މާކަޕް އެޕީއައި މެދުވެރިކޮށް ހުރިހާ ބޫޓްސްޓްރެޕް ޕްލަގިންސް ބޭނުންކުރެވޭނެއެވެ. މިއީ ބޫޓްސްޓްރެޕްގެ ފުރަތަމަ ކްލާސް އެޕީއައި ކަމަށާއި މިއީ ޕްލަގިން ބޭނުންކުރާއިރު ފުރަތަމަ ވިސްނަންޖެހޭ ކަމެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ.

އެހެން ނަމަވެސް، ބައެއް ހާލަތްތަކުގައި މި ފަންކްޝަނަލިޓީ ނިއްވާލުމަކީ އެދެވޭ ކަމެއް ކަމަށް ވެދާނެއެވެ. އެހެންކަމުން، `'ޑޭޓާ-އޭޕީ'` އިން ޖާގަ ކުރެވިފައިވާ ބޮޑީ ނޭމްސްޕޭސްގައި ހުންނަ ހުރިހާ އިވެންޓްތަކެއް އަންބައިންޑްކޮށްގެން ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި ޑިސެބިލް ކުރުމުގެ ޤާބިލުކަން ވެސް އަޅުގަނޑުމެން ފޯރުކޮށްދެމެވެ. މިއީ މިގޮތަށެވެ.

  1. $ ( 'ހަށިގަނޑު' ). އޮފް ( '.ޑޭޓާ-އޭޕީ' )

ނުވަތަ ވަކި ޕްލަގިންއަކަށް ޓާގެޓް ކުރުމަށްޓަކައި، ހަމައެކަނި ޕްލަގިންގެ ނަން ނަންސްޕޭސްއެއްގެ ގޮތުގައި ޑޭޓާ-އޭޕީއައި ނޭމްސްޕޭސްއާއެކު މިގޮތަށް ހިމަނާށެވެ:

  1. $ ( 'ހަށިގަނޑު' ). އޮފް ( '.އެލާޓް.ޑޭޓާ-އޭޕީ' )

ޕްރޮގްރާމެޓިކް އެޕީއައި

އަދި ބޫޓްސްޓްރެޕްގެ ހުރިހާ ޕްލަގިންސްތަކެއް ބޭނުންކުރެވޭނީ ހަމައެކަނި ޖާވާސްކްރިޕްޓް އެޕީއައި މެދުވެރިކޮށް ކަމަށް ވެސް އަޅުގަނޑުމެން ގަބޫލުކުރަމެވެ. ހުރިހާ ޕަބްލިކް އެޕީއައިތަކަކީ އެއް، ޗޭން ކުރެވޭ ގޮތްތަކެއް ކަމަށާއި، އެކްޓް ކުރެވުނު ކަލެކްޝަން ރިޓަރން ކުރާ އެއްޗެކެވެ.

  1. $ ( ".ބީޓީއެން.ނުރައްކާ" ). ބަޓަން ( "ޓޮގްލް" ). addClass ( "ސަރުބީ" )

ހުރިހާ މެތޯޑްތަކުންވެސް އިޚްތިޔާރީ އޮޕްޝަންސް އޮބްޖެކްޓެއް، ވަކި މެތޯޑަކަށް ޓާގެޓްކުރާ ސްޓްރިންގްއެއް، ނުވަތަ އެއްވެސް އެއްޗެއް (ޑިފޯލްޓް ސުލޫކާއެކު ޕްލަގިންއެއް އިނިޝިއޭޓްކުރާ) ބަލައިގަންނަންވާނެއެވެ:

  1. $ ( "#މައިމޮޑަލް" ). modal () // ޑިފޯލްޓްތަކާއެކު އިނިޝިއަލައިޒް ކުރެވިފައިވެއެވެ
  2. $ ( "#މައިމޮޑަލް" ). modal ({ keyboard : false }) // ކީބޯޑެއް ނެތި އިނިޝިއަލައިޒް ކުރެވިފައިވެއެވެ
  3. $ ( "#މައިމޮޑަލް" ). modal ( 'show' ) // ވަގުތުން ޝޯ އިނިޝިއަލައިޒްކޮށް އިންވޯކް ކުރެއެވެ

އަދި ކޮންމެ ޕްލަގިންއަކުން ވެސް އޭގެ ރޯ ކޮންސްޓްރަކްޓަރ `ކޮންސްޓްރަކްޓަރ` ޕްރޮޕަޓީއެއްގައި ހާމަކުރެއެވެ: $.fn.popover.Constructor. ވަކި ޕްލަގިން އިންސްޓޭންސްއެއް ހޯދަން ބޭނުންނަމަ، ސީދާ އެލިމެންޓަކުން ހޯދާށެވެ: $('[rel=popover]').data('popover').

ނޯ ކޮންފްލިކްޓް

ބައެއް ފަހަރު ބޫޓްސްޓްރެޕް ޕްލަގިންސްތައް އެހެން ޔޫއައި ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރަން ޖެހެއެވެ. މި ހާލަތްތަކުގައި ދޭތެރެ ދޭތެރެއިން ނޭމްސްޕޭސް ކޮލިޝަންތައް ދިމާވެދާނެ އެވެ. .noConflictމިހެން ދިމާވެއްޖެނަމަ، އަގު އަނބުރާ ގެންނަން ބޭނުންވާ ޕްލަގިންއަށް ގޮވާލެވިދާނެއެވެ .

  1. var ބޫޓްސްޓްރެޕްބަޓަން = $ . fn . ބަޓަން . noConflict () // ކުރިން ޙަވާލުކުރެވިފައިވާ އަގަށް $.fn.button ރިޓަރން ކުރާށެވެ
  2. $ . fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn އަށް ބޫޓްސްޓްރެޕް ފަންކްޝަނަލިޓީ ދޭށެވެ

އިވެންޓްސް

ބޫޓްސްޓްރެޕް އިން ގިނަ ޕްލަގިންގެ ޔުނިކް އެކްޝަންތަކަށް ކަސްޓަމް އިވެންޓްތައް ފޯރުކޮށްދެއެވެ. އާންމު ގޮތެއްގައި މިކަންކަން އަންނަނީ އިންފިނިޓިވް އަދި މާޒީގެ ޕާޓިސިޕަލް ފޯމެއްގައި - މިތަނުގައި އިންފިނިޓިވް (ex. show) ހާދިސާއެއް ފެށުމުން ޓްރިގަރ ވެގެންދާއިރު، އޭގެ މާޒީ ޕާޓިސިޕަލް ފޯމް (ex. shown) ޢަމަލެއް ފުރިހަމަވުމުން ޓްރިގަރ ވެއެވެ.

ހުރިހާ އިންފިނިޓިވް އިވެންޓްތަކުން preventDefault ފަންކްޝަނަލިޓީ ފޯރުކޮށްދެއެވެ. މިއީ ޢަމަލެއް ފެށުމުގެ ކުރިން އެ ޢަމަލެއް ހިންގުން ހުއްޓުވުމުގެ ޤާބިލުކަން ލިބިގެންދާ ކަމެކެވެ.

  1. $ ( '#މައިމޮޑަލް' ). on ( 'ދައްކާ' , ފަންކްޝަން ( އީ ) {
  2. if (! ޑޭޓާ ) ރިޓަރން ކުރާ އީ . preventDefault () // މޮޑަލް ދައްކާލުން ހުއްޓުވައެވެ
  3. }) އެވެ.

ޓްރާންސިޝަންތަކާ ބެހޭގޮތުން

ސާދާ ޓްރާންސިޝަން އިފެކްޓްތަކަށްޓަކައި، bootstrap-transition.js އެއްފަހަރު އެހެން ޖޭއެސް ފައިލްތަކާ އެކު ހިމަނާށެވެ. ކޮމްޕައިލް ކުރެވިފައިވާ (ނުވަތަ މިނިފައިޑް) bootstrap.js ބޭނުން ކުރައްވާނަމަ، މިކަން ހިމަނަން ނުޖެހޭނެ—މިހާރުވެސް އެބައޮތެވެ.

ކޭސްތައް ބޭނުން ކުރާށެވެ

ޓްރާންސިޝަން ޕްލަގިންގެ މަދު މިސާލުތަކެއް:

  • މޮޑަލްތަކުގައި ސްލައިޑް ނުވަތަ ފޭޑިންގ
  • ފޭޑިންގ އައުޓް ޓެބްތައް
  • ފޭޑިންގ އައުޓް އެލާޓްތައް
  • ސްލައިޑިންގ ކެރޮސެލް ޕޭންތައް

މިސާލުތަކެވެ

މޮޑަލްސް އަކީ ސްޓްރީމްލައިންޑް، އެކަމަކު ފްލެކްސިބަލް، ޑައިލޮގް ޕްރޮމްޕްޓްސް އާއި އެކު އެންމެ ކުޑަމިނުން ބޭނުންވާ ފަންކްޝަނަލިޓީ އާއި ސްމާޓް ޑިފޯލްޓްސް އެވެ.

ސްޓޭޓިކް މިސާލެވެ

ފޫޓަރގައި ހެޑަރ، ބޮޑީ، އަދި އެކްޝަންތަކުގެ ސެޓާއެކު ރެންޑަރ ކުރެވިފައިވާ މޮޑަލްއެކެވެ.

  1. <div class = "މޯޑަލް ހައިޑް ފޭޑް" >
  2. <div ކްލާސް = "މޮޑަލް-ހެޑަރ" >
  3. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "މޮޑަލް" aria-hidden = "ހަގީގަތް" > × </ބަޓަން> އެވެ
  4. <h3> މޮޑަލް ހެޑަރ </h3>
  5. </div> އެވެ
  6. <div ކްލާސް = "މޯޑަލް-ބޮޑީ" >
  7. <p> އެއް ރީތި ހަށިގަނޑެއް... </p>
  8. </div> އެވެ
  9. <div class = "މޯޑަލް-ފޫޓަރ" >
  10. <a href = "#" class = "btn" > ބަންދުކުރުން </a>
  11. <a href = "#" class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </a>
  12. </div> އެވެ
  13. </div> އެވެ

ލައިވް ޑެމޯ

ތިރީގައިވާ ބަޓަންއަށް ފިތާލުމުން ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް މޮޑަލްއެއް ޓޮގްލް ކުރާށެވެ. އެއީ ތިރިއަށް ސްލައިޑްކޮށް ޕޭޖުގެ މަތިން ފޭޑް އިން ވާނެ އެއްޗެކެވެ.

  1. <!-- މޮޑަލް ޓްރިގަރ ކުރުމަށް ބަޓަން -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "މޮޑަލް" > ޑެމޯ މޮޑަލް ލޯންޗްކުރުން </a>
  3.  
  4. <!-- މޮޑަލް -->
  5. <div id = "myModal" class = "މޯޑަލް ހައިޑް ފޭޑް" tabindex = "-1" ރޯލް = "ޑައިލޮގް" aria-labelledby = "myModalLabel" aria-hidden = "ޓްރޫ" >
  6. <div ކްލާސް = "މޮޑަލް-ހެޑަރ" >
  7. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "މޮޑަލް" aria-hidden = "ހަގީގަތް" > × </button>
  8. <h3 id = "myModalLabel" > މޮޑަލް ހެޑަރ </h3>
  9. </div> އެވެ
  10. <div ކްލާސް = "މޯޑަލް-ބޮޑީ" >
  11. <p> އެއް ރީތި ހަށިގަނޑެއް... </p>
  12. </div> އެވެ
  13. <div class = "މޯޑަލް-ފޫޓަރ" >
  14. <button class = "btn" data- dismiss = "މޮޑަލް" aria-hidden = "ޓްރޫ" > ބަންދުކުރުން </button>
  15. <button class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </button>
  16. </div> އެވެ
  17. </div> އެވެ

ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް ނުލިޔެ މޮޑަލްއެއް އެކްޓިވޭޓް ކުރާށެވެ. data-toggle="modal"ކޮންޓްރޯލަރ އެލިމެންޓެއްގައި، ބަޓަންއެއް ފަދައިން، އެއް data-target="#foo"ނުވަތަ href="#foo"ޓޮގްލް ކުރުމަށް ވަކި މޮޑަލަކަށް އަމާޒު ކުރުމަށް ސެޓް ކުރާށެވެ .

  1. <button type = "button" data-toggle = "މޮޑަލް" ޑޭޓާ-ޓާގެޓް = "#myModal" > މޮޑަލް ލޯންޗްކުރުން </button>

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

myModalޖާވާސްކްރިޕްޓްގެ އެއް ލައިނަކާއެކު id އާއެކު މޮޑަލް އަކަށް ގޮވާލާށެވެ :

  1. $ ( '#މައިމޮޑަލް' ). މޮޑަލް ( އިޚްތިޔާރުތައް ) .

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-backdrop="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
ބެކްޑްރޯޕް އެވެ ބޫލިއަން އެވެ ރަނގަޅު މޮޑަލް-ބެކްޑްރޯޕް އެލިމެންޓެއް ހިމެނެއެވެ. ނުވަތަ staticކްލިކް ކުރުމުން މޮޑަލް ބަންދު ނުކުރާ ބެކްޑްރޯޕަކަށް ކަނޑައަޅާށެވެ.
ކީބޯޑެވެ ބޫލިއަން އެވެ ރަނގަޅު އެސްކޭޕް ކީ އަށް ފިތާލުމުން މޮޑަލް ބަންދުކުރެއެވެ
ދެއްކުން ބޫލިއަން އެވެ ރަނގަޅު އިނިޝިއަލައިޒް ކުރާއިރު މޮޑަލް ދައްކައެވެ.
ރިމޯޓް މަގު ރަނގަޅުނޫން

ރިމޯޓް ޔޫއާރްއެލް އެއް ފޯރުކޮށްދީފިނަމަ، ޖީކުއަރީގެ މެތޯޑް މެދުވެރިކޮށް ކޮންޓެންޓް ލޯޑްކޮށް load، އަށް އިންޖެކްޓް ކުރެވޭނެއެވެ .modal-body. ޑޭޓާ އެޕީއައި ބޭނުންކުރާނަމަ، hrefރިމޯޓް ސޯސް ކަނޑައެޅުމަށް ޓެގް ބޭނުންކުރެވިދާނެއެވެ. މިކަމުގެ މިސާލެއް ތިރީގައި މިވަނީއެވެ.

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

ގޮތްތައް

.މޮޑަލް(އޮޕްޝަންސް)

މޮޑަލްއެއްގެ ގޮތުގައި ތިމާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object.

  1. $ ( '#މައިމޮޑަލް' ). މޮޑަލް ({
  2. ކީބޯޑް : ދޮގު
  3. }) އެވެ.

.މޮޑަލް('ޓޮގްލް')

މެނުއަލްކޮށް މޮޑަލް އެއް ޓޮގްލް ކުރެއެވެ.

  1. $ ( '#މައިމޮޑަލް' ). modal ( 'ޓޮގްލް' )

.މޮޑަލް('ދައްކާ')

މެނުއަލްކޮށް މޮޑަލްއެއް ހުޅުވާލައެވެ.

  1. $ ( '#މައިމޮޑަލް' ). modal ( 'ދައްކާ' )

.މޮޑަލް('ފޮރުވުން')

މެނުއަލްކޮށް މޮޑަލް އެއް ފޮރުވައެވެ.

  1. $ ( '#މައިމޮޑަލް' ). މޮޑަލް ( 'ފޮރުވުން' )

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ މޮޑަލް ކްލާހުގައި މޯޑަލް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.

ހަރަކާތް ތަފްޞީލު
ދެއްކުން މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައި ވެއެވެ މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (css ޓްރާންސިޝަންސް ފުރިހަމަ ވާން މަޑުކުރާނެ) އެވެ.
ފޮރުވުން މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައި މި އިވެންޓް ފަޔަރ ކުރެވެނީ މޮޑަލް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (css ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
  1. $ ( '#މައިމޮޑަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {
  2. // ކަމެއް ކުރާށެވެ...
  3. }) އެވެ.

ނަވްބާރުގައި މިސާލެވެ

ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޮމެޓިކުން ނެވް ޓާގެޓްތައް އަޕްޑޭޓް ކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. ނަވްބާގެ ތިރީގައިވާ ސަރަހައްދު ސްކްރޯލްކޮށް އެކްޓިވް ކްލާސް ބަދަލުވާތަން ބަލާށެވެ. އަދި ޑްރޮޕްޑައުން ސަބް އައިޓަމްތައް ވެސް ހައިލައިޓް ކުރެވޭނެ އެވެ.

@ފަލަ

އެޑް ލެގިންސް ކީޓަރ، ބްރަންޗް އައިޑީ އާޓް ޕާޓީ ޑޮލޯރ ލޭބަރ. ޕިޗްފޯކް ޔަރ އެނިމް ލޯ-ފައި ކުރިން އެމީހުން ވިކި ހުސްވީ ކި. ޓަމްބްލަރ ފާމް ޓު ޓޭބަލް ސައިކަލް ރައިޓްސް ކޮންމެ ގޮތެއް ވިޔަސް. އަނިމް ކެފިޔޭ ކާލްސް ކާޑިގަން. ވެލިޓް ސެއިޓަން mcsweeney ގެ ފޮޓޯ ޖަގަހަ 3 ވޯލްފް މޫން irure. ކޮސްބީ ސްވެޓަރ ލޯމޯ ޖީން ޝޯޓްސް، ވިލިއަމްސްބަރގް ހޫޑީ މިނިމް ކުއީ ޔޫ ޕްރޮބަބަލީ ހެވް ނޮޓް ހެއިޑް އޮފް ދިސް އެޓް ކާޑިގަން ޓްރަސްޓް ފަންޑް ކަލްޕާ ބަޔޯޑީސެލް ވޭސް އެންޑަސަން އެސްތެޓިކް. ނިހިލް ޓެޓޫ ޖަހާފައިވާ އެކިއުމަސް، ކްރެޑް އިރޮނީ ބަޔޯޑީސަލް ކެފިޔޭ އާޓިޒަން އުލަމްކޯ ކޮންސެކިއުޓް.

@mdo

ވެނިއަމް މާރފާ މޫނުމަތީގެ ސްކޭޓްބޯޑް، އެޑިޕިސިސިންގ ފުޖިއަޓް ވެލިޓް ޕިޗްފޯކް ތުނބުޅި. ފްރީގަން ތުނބުޅި އަލިކުއާ ކިއުޕިޑޭޓަޓް މެކްސްވީނީގެ ވެރޯ އެވެ. ކިއުޕިޑޭޓަޓް ހަތަރު ލޮކޯ ނިސީ، އީއޭ ހެލްވެޓިކާ ނޫލާ ކާރލްސް. ޓެޓޫ ޖަހާފައިވާ ކޮސްބީ ސްވެޓަރ ފުޑް ޓްރަކް، މެކްސްވީނީގެ ކުއިސް ނޮން ފްރީގަން ވައިނައިލް އެވެ. ލޯ-ފައި ވެސް އެންޑަސަން +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.

three

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.

ކޭޓަރ ޓްވީ ބްލޮގް، ކަލްޕާ މެސެންޖަރ ބެގް މާރފާ ކޮންމެ އެއްޗެއް ޑިލެކްޓަސް ފުޑް ޓްރަކް. ސެޕިއެންޓޭ ސިންތު އައިޑީ އަސުމެންޑާ. ލޮކަވޯރ ސެޑް ހެލްވެޓިކާ ކްލިޝް އިރޮނީ، ތަންޑަރކެޓްސް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ވާހަކައެއް އަޑުއިވިފައި ނުވާތީ ކޮންސެކިއުޓް ހޫޑީ ގްލޫޓެން ފްރީ ލޯ-ފައި ފަޕް އެލިކިއުޕް. ލޭބަރ އެލިޓް ޕްލޭސެޓް ކުރިން އެމީހުން ވިކި ހުސްވުމުގެ ކުރިން، ޓެރީ ރިޗާޑްސަން ޕްރޮއިޑެންޓް ބްރަންޗް ނެސްސިއުންޓް ކުއިސް ކޮސްބީ ސްވެޓަރ ޕަރިއޭޓަރ ކެފިޔޭ އުޓް ހެލްވެޓިކާ އާޓިޒަން. ކާޑިގަން ކްރާފްޓް ބިޔަރު ސެއިޓަން ރެޑީމޭޑް ވެލިޓް. ވީއެޗްއެސް ޗެމްބްރޭ ލެބޯރިސް ޓެމްޕަރ ވެނިއަމް އެވެ. އަނިމް މޮލިޓް މިނިމް ކޮމޮޑޯ އުލަމްކޯ ތަންޑަރކެޓްސް.


ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ޓޮޕްބާ ނެވިގޭޝަނަށް ފަސޭހައިން ސްކްރޯލްސްޕީ ބިހޭވިއަރ އިތުރު ކުރުމަށްޓަކައި، ހަމައެކަނި data-spy="scroll"ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އިތުރުކޮށް (ގިނައިން މިއީ ބޮޑީ ކަމަށް ވާނެ) އަދި data-target=".navbar"ބޭނުންކުރާނެ ނެވް ހޮވަން ޖެހޭނެއެވެ. .navކޮމްޕޮނެންޓަކާއެކު ސްކްރޯލްސްޕީ ބޭނުން ކުރަން ބޭނުންވާނެއެވެ .

  1. <body data-spy = "ސްކްރޯލް" ޑޭޓާ-ޓާގެޓް = ".navbar" > ... </body>

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސްކްރޯލްސްޕައިއަށް ގުޅާލާ:

  1. $ ( '#ނަވްބާރ' ). ސްކްރޯލްސްޕައި ()
ހެޑްސް އަޕް! ނަވްބާރ ލިންކްތަކުގައި ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ހުންނަން ޖެހެއެވެ. މިސާލަކަށް <a href="#home">home</a>ޑޮމްގައި ހުންނަ އެއްޗަކާ ދިމާވާން ޖެހޭނީ <div id="home"></div>.

ގޮތްތައް

.scrollspy('ރިފްރެޝް')

ޑޮމް އިން އެލިމެންޓްތައް އިތުރުކުރުމާއި ނުވަތަ ނައްތާލުމާ ގުޅިގެން ސްކްރޯލްސްޕީ ބޭނުންކުރާއިރު، ރިފްރެޝް މެތޯޑަށް ގޮވާލަން ޖެހޭނީ މިގޮތަށެވެ:

  1. $ ( '[ޑޭޓާ-ސްޕައި="ސްކްރޯލް"]' ). ކޮންމެ ( ފަންކްޝަން () {
  2. var $spy = $ ( މިއީ ). scrollspy ( 'ރިފްރެޝް' )
  3. });

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، 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.


ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓެބް ކުރެވޭ ޓެބްތައް އެނެބަލް ކުރުން (ކޮންމެ ޓެބެއް ވަކިވަކިން އެކްޓިވޭޓް ކުރަން ޖެހޭނެ):

  1. $ ( '#މައިޓެބް އަ' ). ކްލިކް ކުރާށެވެ ( ފަންކްޝަން ( އީ ) {
  2. އީ . ޕްރިވެންޓްޑިފޯލްޓް ();
  3. $ ( މި ). tab ( 'ދައްކާ' );
  4. }) އެވެ.

ވަކިވަކި ޓެބްތައް އެތައް ގޮތަކުން އެކްޓިވޭޓް ކުރެވިދާނެއެވެ:

  1. $ ( '#މައިޓެބް a[href="#profile"]' ). tab ( 'ދައްކާ' ); // ނަމުން ޓެބް ހޮވާށެވެ
  2. $ ( '#މައިޓެބް އަ:ފުރަތަމަ' ). tab ( 'ދައްކާ' ); // ފުރަތަމަ ޓެބް ހޮވާށެވެ
  3. $ ( '#މައިޓެބް އަ:ލަސްޓް' ). tab ( 'ދައްކާ' ); // އެންމެ ފަހު ޓެބް ހޮވާށެވެ
  4. $ ( '#މައިޓެބް ލި:އެކިއު(2) އޭ' ). tab ( 'ދައްކާ' ); // ތިންވަނަ ޓެބް ހޮވުން (0-އިންޑެކްސް ކުރެވިފައިވާ)

މާކަޕް

އެއްވެސް ޖާވާސްކްރިޕްޓެއް ނުލިޔެ ޓެބް ނުވަތަ ޕިލް ނެވިގޭޝަން އެކްޓިވޭޓް ކުރެވޭނީ ފަސޭހައިން އެލިމެންޓެއް ކަނޑައަޅައިގެން data-toggle="tab"ނުވަތަ data-toggle="pill"އެލިމެންޓެއްގެ މައްޗަށް ޖަހައިގެންނެވެ. navޓެބަށް އަދި nav-tabsކްލާސްތައް އިތުރުކުރުމުން ulބޫޓްސްޓްރެޕް ޓެބް ސްޓައިލިންގ އަށް އަމަލުކުރާނެއެވެ.

  1. <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" >
  2. <li><a href = "#home" data-toggle = "ޓެބް" > ގެ </a> </li>
  3. <li><a href = "#ޕްރޮފައިލް" data-toggle = "ޓެބް" > ޕްރޮފައިލް </a></li>
  4. <li><a href = "#messages" data-toggle = "ޓެބް" > މެސެޖުތައް </a></li>
  5. <li><a href = "#settings" data-toggle = "ޓެބް" > ސެޓިންގސް </a></li>
  6. </ul> އެވެ

ގޮތްތައް

$().ޓެބް

ޓެބް އެލިމެންޓަކާއި ކޮންޓެންޓް ކޮންޓެއިނަރ އެއް އެކްޓިވޭޓް ކުރެއެވެ. ޓެބްގައި ޑީއޯއެމްގައި ކޮންޓެއިނަރ ނޯޑަކަށް ޓާގެޓްކުރާ އެއްޗެއް data-targetނުވަތަ އެއްޗެއް ހުންނަންވާނެއެވެ.href

  1. <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" id = "މައިޓެބް" >
  2. <li class = "އެކްޓިވް" ><a href = "#home" > ގެ </a> </li>
  3. <li><a href = "#ޕްރޮފައިލް" > ޕްރޮފައިލް </a></li>
  4. <li><a href = "#messages" > މެސެޖުތައް </a></li>
  5. <li><a href = "#settings" > ސެޓިންގސް </a></li>
  6. </ul> އެވެ
  7.  
  8. <div class = "ޓެބް-ކޮންޓެންޓް" >
  9. <div class = "ޓެބް-ޕޭން އެކްޓިވް" id = "ހޯމް" > ... </div>
  10. <div class = "ޓެބް-ޕޭން" id = "ޕްރޮފައިލް" > ... </div>
  11. <div class = "ޓެބް-ޕޭން" id = "މެސެޖްތައް" > ... </div>
  12. <div class = "ޓެބް-ޕޭން" id = "ސެޓިންގސް" > ... </div>
  13. </div> އެވެ
  14.  
  15. <ސްކްރިޕްޓް> އެވެ
  16. $ ( ފަންކްޝަން () {
  17. $ ( '#މައިޓެބް އަ:ލަސްޓް' ). tab ( 'ދައްކާ' );
  18. }) އެވެ.
  19. </script> އެވެ

އިވެންޓްސް

ހަރަކާތް ތަފްޞީލު
ދެއްކުން މި އިވެންޓް ފަޔަރ ކުރަނީ ޓެބް ޝޯގައި ނަމަވެސް އާ ޓެބް ދައްކާލުމުގެ ކުރިންނެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
ދައްކާފައި ވެއެވެ މި އިވެންޓް ޓެބް ޝޯގައި ފަޔަރ ކުރަނީ ޓެބެއް ދެއްކުމަށްފަހުގައެވެ. އެކްޓިވް ޓެބާއި ކުރީގެ އެކްޓިވް ޓެބަށް (ލިބިފައިވާނަމަ) ޓާގެޓް ކުރުމަށް event.targetއަދި ބޭނުން ކުރާށެވެ .event.relatedTarget
  1. $ ( 'a[ޑޭޓާ-ޓޮގްލް="ޓެބް"]' ). on ( 'ދައްކާފައި' , ފަންކްޝަން ( އީ ) {
  2. އީ . ޓާގެޓް // އެކްޓިވޭޓް ކޮށްފައިވާ ޓެބް
  3. އީ . relatedTarget // ކުރީގެ ޓެބް
  4. }) އެވެ.

މިސާލުތަކެވެ

ޖޭސަން ފްރޭމް ލިޔެފައިވާ މޮޅު jQuery.tipsy ޕްލަގިން އިން އިންސްޕަޔަރ ކޮށްގެން؛ ޓޫލްޓިޕްސް އަކީ އަޕްޑޭޓް ކުރެވިފައިވާ ވަރޝަނެއް ކަމަށާއި، މިއީ ތަސްވީރުތަކަށް ބަރޯސާ ނުވާ، އެނިމޭޝަންތަކަށް ސީއެސްއެސް3 ބޭނުންކުރާ، އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް ބޭނުންކުރާ ވަރޝަނެކެވެ.

ޕާފޯމަންސް ސަބަބުތަކާހުރެ، ޓޫލްޓިޕް އަދި ޕޮޕޯވަރ ޑޭޓާ-އެޕީސް އަކީ އޮޕްޓް އިން އެއް ކަމުން، މާނައަކީ އަމިއްލައަށް އެކަންކަން އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .

ޓޫލްޓިޕްސް ބަލާލުމަށް ތިރީގައިވާ ލިންކްތަކުގެ މައްޗަށް ހޯވަރ ކޮށްލައްވާ:

ޓައިޓް ޕެންޓްސް ނެކްސްޓް ލެވެލް ކެފިޔޭ ތިޔަބޭފުޅުންނަށް ފަހަރެއްގައި އެތަކެތީގެ ވާހަކައެއް އަޑުއިވިފައެއް ނެތް. ފޮޓޯ ޖަގަހަ ތުނބުޅި ރޯ ޑެނިމް ލެޓަރޕްރެސް ވީގަން މެސެންޖަރ ބެގް ސްޓަމްޕްޓައުން. ފާމް ޓު ޓޭބަލް ސެއިޓަން، އެމްސީއެސްވީނީގެ ފިކްސީ ސަސްޓެއިނަބަލް ކިނޯއާ 8 ބިޓް އެމެރިކަން އެޕަރަލްގައި ޓެރީ ރިޗާޑްސަން ވައިނައިލް ޗެމްބްރޭ އެއް ހުންނާނެ އެވެ. ތުނބުޅި ސްޓަމްޕްޓައުން، ކާޑިގަންސް ބަންހް މި ލޯމޯ ތަންޑަރކެޓްސް. ޓޯފޫ ބަޔޯޑީސަލް ވިލިއަމްސްބަރގް މާރފާ، ހަތަރު ލޮކޯ މެކްސްވީނީގެ ކްލީންސް ވީގަން ޗެމްބްރޭ. A really ironic artisan whatever keytar , ސީންސްޓަރ ފާމް-ޓު-ޓޭބަލް ބޭންކްސީ އޮސްޓިން ޓްވިޓަރ ހެންޑްލް ފްރީގަން ކްރެޑް ރޯ ޑެނިމް ސިންގަލް-އޮރިޖިން ކޮފީ ވައިރަލް.

ހަތަރު ދިމާލަށެވެ

އިންޕުޓް ގްރޫޕްތަކުގައި ޓޫލްޓިޕްސް

ބޫޓްސްޓްރެޕް އިންޕުޓް ގްރޫޕްތަކާއެކު ޓޫލްޓިޕްސް އަދި ޕޮޕޯވަރސް ބޭނުންކުރާއިރު، containerނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށްޓަކައި (ތިރީގައިވާ ލިޔެކިޔުންތައް) އޮޕްޝަން ސެޓްކުރަން ޖެހޭނެއެވެ.


ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:

  1. $ ( '#މިސާލު' ). ޓޫލްޓިޕް ( އިޚްތިޔާރުތައް ) .

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އެނިމޭޝަން އެވެ ބޫލިއަން އެވެ ރަނގަޅު ޓޫލްޓިޕް އަށް css ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ
html އެވެ ބޫލިއަން އެވެ ރަނގަޅުނޫން ޓޫލްޓިޕް އަށް html ޖައްސަވާށެވެ. ދޮގު ނަމަ textޑޮމް އަށް ކޮންޓެންޓް ޖައްސަން jquery ގެ މެތޯޑް ބޭނުންކުރާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ.
ޕްލޭސްމަންޓް ސްޓްރިންގް | ފަންކްޝަން 'މަތި' ޓޫލްޓިޕް ޕޮޒިޝަން ކުރާނެ ގޮތް - މަތީ | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް
ސެލެކްޓަރ އެވެ ސްޓްރިންގ ރަނގަޅުނޫން ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ.
މަޤާމު ސްޓްރިންގް | ފަންކްޝަން '' އެވެ. `title` ޓެގް ނެތްނަމަ ޑިފޯލްޓް ޓައިޓަލް ވެލިއު
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު ސްޓްރިންގ 'ހޯވަރ ފޯކަސް'. ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. ނޯޓް ޔޫ ކޭސް ޕާސް ޓްރިގަރ މުޓްލިޕްލް، ސްޕޭސް ސެޕަރޭޓްޑް، ޓްރިގަރ ޓައިޕްސް.
ލަސްވުން ނަންބަރު | އެއްޗެއް 0

ޓޫލްޓިޕް ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ

ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { show: 500, hide: 100 }

ކޮންޓެއިނަރެވެ ސްޓްރިންގް | ރަނގަޅުނޫން ރަނގަޅުނޫން

ވަކި އެލިމެންޓަކަށް ޓޫލްޓިޕް އިތުރުކުރެއެވެcontainer: 'body'

ހެޑްސް އަޕް! ވަކިވަކި ޓޫލްޓިޕްތަކުގެ އިޚްތިޔާރުތައް ބަދަލު ގޮތެއްގައި ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކުރުމުގެ ތެރެއިން ކަނޑައެޅިދާނެއެވެ.

މާކަޕް

  1. <a href = "#" data-toggle = "ޓޫލްޓިޕް" title = "ފުރަތަމަ ޓޫލްޓިޕް" > އަހަރެންގެ މައްޗަށް ހޯވަރ ކުރާށެވެ </a>

ގޮތްތައް

$().ޓޫލްޓިޕް(އޮޕްޝަންސް)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޫލްޓިޕް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.

.tooltip('ދައްކާ')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ހާމަކުރެއެވެ.

  1. $ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ދައްކާ' )

.tooltip('ފޮރުވުން')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައެވެ.

  1. $ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ފޮރުވުން' )

.ޓޫލްޓިޕް('ޓޮގްލް')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ޓޮގްލް ކުރެއެވެ.

  1. $ ( '#އެލިމެންޓް' ). ޓޫލްޓިޕް ( 'ޓޮގްލް' )

.tooltip('ހަލާކުކުރުން')

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައި ހަލާކުކޮށްލައެވެ.

  1. $ ( '#އެލިމެންޓް' ). tooltip ( 'ހަލާކުކުރުން' )

މިސާލުތަކެވެ

އައިޕެޑްގައި ހުންނަ ފަދައިން ކޮންޓެންޓްގެ ކުދިކުދި އޯވަރލޭތައް، ސެކަންޑަރީ މައުލޫމާތު ގެދޮރު ބެހެއްޓުމަށްޓަކައި ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުން. ޕޮޕޯވަރ ޓްރިގަރ ކުރުމަށް ބަޓަންގެ މައްޗަށް ހޯވަރ ކޮށްލާށެވެ. ޓޫލްޓިޕް ހިމަނަން ޖެހެއެވެ.

ސްޓޭޓިކް ޕޮޕޯވަރ އެވެ

ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.

ޕޮޕޯވަރ ޓޮޕް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ތެދެއް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ތިރިއަށް

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

ޕޮޕޯވަރ ދިޔައީއެވެ

ސެޑް ޕޮސުއެރެ ކޮންސެކްޓެޗަރ އެސްޓް އެޓް ލޮބޯޓިސް. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ.

dataޕޮޕޯވަރސް ގެ ގޮތުގައި ނުދައްކާ އެއްވެސް މާކަޕް އެއް އެޓްރިބިއުޓެއްގެ ތެރޭގައިވާ ޖާވާސްކްރިޕްޓާއި ކޮންޓެންޓުން ޖެނެރޭޓް ނުކުރެއެވެ .

ލައިވް ޑެމޯ

ހަތަރު ދިމާލަށެވެ


ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޕޮޕޯވަރސް އެނެބަލް ކުރުން:

  1. $ ( '#މިސާލު' ). popover ( އިޚްތިޔާރުތައް ) .

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އެނިމޭޝަން އެވެ ބޫލިއަން އެވެ ރަނގަޅު ޓޫލްޓިޕް އަށް css ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ
html އެވެ ބޫލިއަން އެވެ ރަނގަޅުނޫން ޕޮޕޯވަރ އަށް html ޖައްސަވާށެވެ. ދޮގު ނަމަ textޑޮމް އަށް ކޮންޓެންޓް ޖައްސަން jquery ގެ މެތޯޑް ބޭނުންކުރާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ.
ޕްލޭސްމަންޓް ސްޓްރިންގް | ފަންކްޝަން 'ކަނާތް' ޕޮޕޯވަރ ޕޮޒިޝަން ކުރާނެ ގޮތް - ޓޮޕް | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް
ސެލެކްޓަރ އެވެ ސްޓްރިންގ ރަނގަޅުނޫން ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު ސްޓްރިންގ 'ކްލިކް' ކޮށްލާށެވެ. ޕޮޕޯވަރ ޓްރިގަރ ވާނީ ކިހިނެއް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް
މަޤާމު ސްޓްރިންގް | ފަންކްޝަން '' އެވެ. `title` އެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ޓައިޓަލް ވެލިއު
ކޮންޓެންޓް ސްޓްރިންގް | ފަންކްޝަން '' އެވެ. `data-content` އެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ކޮންޓެންޓް ވެލިއު
ލަސްވުން ނަންބަރު | އެއްޗެއް 0

ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ

ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { show: 500, hide: 100 }

ކޮންޓެއިނަރެވެ ސްޓްރިންގް | ރަނގަޅުނޫން ރަނގަޅުނޫން

ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެcontainer: 'body'

ހެޑްސް އަޕް! ވަކިވަކި ޕޮޕޯވަރތަކަށް އޮޕްޝަންތައް ބަދަލު ގޮތެއްގައި ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކުރުމުގެ ތެރެއިން ކަނޑައެޅިދާނެއެވެ.

މާކަޕް

ޕާފޯމަންސް ސަބަބުތަކާހުރެ، ޓޫލްޓިޕް އަދި ޕޮޕޯވަރ ޑޭޓާ-އެޕީސް އޮޕްޓް އިން ކޮށްފައި ހުންނައިރު، އެތަކެތި ބޭނުން ކުރަން ބޭނުންނަމަ ހަމައެކަނި ސެލެކްޓަރ އޮޕްޝަނެއް ކަނޑައަޅާށެވެ.

ގޮތްތައް

$().popover(އޮޕްޝަންސް)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޕޮޕޯވަރސް އިނިޝިއަލައިޒް ކުރެއެވެ.

.ޕޮޕޯވަރ('ދައްކާ')

ރިވީލްސް އެން އެލިމެންޓްސް ޕޮޕޮވަރ.

  1. $ ( '#އެލިމެންޓް' ). popover ( 'ދައްކާ' )

.ޕޮޕޯވަރ('ފޮރުވުން')

ފޮރުވަނީ އެލިމެންޓްސް ޕޮޕޯވަރ އެއް.

  1. $ ( '#އެލިމެންޓް' ). popover ( 'ފޮރުވުން' )

.popover('ޓޮގްލް')

އެލިމެންޓްސް ޕޮޕޯވަރ އެއް ޓޮގްލް ކުރެއެވެ.

  1. $ ( '#އެލިމެންޓް' ). popover ( 'ޓޮގްލް' ) .

.popover('ހަލާކުކުރުން')

އުނިއިތުރެއްގެ ޕޮޕޮވަރ ފޮރުވައި ހަލާކުކޮށްލައެވެ.

  1. $ ( '#އެލިމެންޓް' ). popover ( 'ހަލާކުކުރުން' )

މިސާލު އެލާޓްތަކެވެ

މި ޕްލަގިން އާއި އެކު ހުރިހާ އެލާޓް މެސެޖުތަކަށް ޑިސްމިސް ފަންކްޝަނަލިޓީ އިތުރުކުރުން.

މާތް ގުއަކަމޯލް! ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް.

އޯ ސްނެޕް! ތިޔަ ލިބުނީ ގޯހެއް!

މިއާއި އެ ބަދަލުކޮށް އަލުން މަސައްކަތް ކުރާށެވެ. ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލަކްޓަސް، ނިސީ އެރަޓް ޕޯޓިޓޯރ ލިގުލާ، އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް. ކްރަސް މެޓިސް ކޮންސެކްޓެޓަރ ޕުރަސް ސިޓް އެމެޓް ފަރމަންޓަމް އެވެ.

މި ފިޔަވަޅު އަޅާށެވެ ނޫނީ މިކަން ކުރާށެވެ


ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެލާޓެއް ޑިސްމިސް ކުރުން އެނެބަލް ކުރުން:

  1. $ ( ".އެލާޓް" ). އެލާޓް ()

މާކަޕް

ހަމައެކަނި ތިބާގެ ކްލޯޒް ބަޓަންއަށް އެޑްކޮށްގެން data-dismiss="alert"އޮޓޮމެޓިކުން އެލާޓް ކްލޯޒް ފަންކްޝަނަލިޓީއެއް ލިބޭނެއެވެ.

  1. <a class = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" href = "#" > × </a> އެވެ

ގޮތްތައް

$().އެލާޓް()

ހުރިހާ އެލާޓްތަކެއް ކްލޯސް ފަންކްޝަނަލިޓީއަކާއެކު ވަށާލައެވެ. .fadeބަންދުކުރާއިރު ތިބާގެ އެލާޓްތައް އެނިމޭޓް އައުޓް ކުރުމަށްޓަކައި، އެލާޓްތަކަށް މިހާރުވެސް އެލާޓްކޮށްފައިވާ އަދި .inކްލާސް ހުރިތޯ ބަލާށެވެ .

.alert('ބަންދު')

އެލާޓެއް ބަންދުކުރެއެވެ.

  1. $ ( ".އެލާޓް" ). alert ( 'ބަންދުކުރުން' )

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ އެލާޓް ކްލާހުގައި އެލާޓް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.

ހަރަކާތް ތަފްޞީލު
ލެއްޕުން މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ closeއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ބަންދުކޮށްފި އެވެ މި އިވެންޓް ފަޔަރ ކުރެވެނީ އެލާޓް ބަންދުކޮށްފައި އޮތުމުން (css ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
  1. $ ( '#އަހަރެންގެ-އެލާޓް' ). bind ( 'ބަންދުކޮށްފައި' , ފަންކްޝަން () {
  2. // ކަމެއް ކުރާށެވެ...
  3. }) އެވެ.

މިސާލު ބޭނުން ކުރެއެވެ

ބަޓަންތަކުން އިތުރަށް ކުރާށެވެ. ކޮންޓްރޯލް ބަޓަން ސްޓޭޓްސް ނުވަތަ ޓޫލްބާ ފަދަ އިތުރު ކޮމްޕޯނެންޓްތަކަށް ބަޓަންތަކުގެ ގްރޫޕްތައް އުފެއްދުން.

ސްޓޭޓްފުލް އެވެ

data-loading-text="Loading..."ބަޓަނެއްގައި ލޯޑިންގ ސްޓޭޓެއް ބޭނުން ކުރުމަށް އިތުރުކުރުން .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "ލޯޑިންގ..." > ލޯޑިންގ ސްޓޭޓް </button>

ސިންގަލް ޓޮގްލް އެވެ

data-toggle="button"އެއް ބަޓަނެއްގައި ޓޮގްލިންގ އެކްޓިވޭޓް ކުރުމަށް އެޑް ކުރާށެވެ.

  1. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ" data-toggle = "ބަޓަން" > ސިންގަލް ޓޮގްލް </button>

ޗެކްބޮކްސް

data-toggle="buttons-checkbox"btn-group ގައި ޗެކްބޮކްސް ސްޓައިލް ޓޮގްލިންގ އަށް އެޑް ކުރާށެވެ .

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" ޑޭޓާ-ޓޮގްލް = "ބަޓަންސް-ޗެކްބޮކްސް" >
  2. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "btn btn-primary" > ކަނާތް </button>
  3. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ" > މެދު </ބަޓަން>
  4. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ" > ކަނާތް </ބަޓަން>
  5. </div> އެވެ

ރޭޑިއޯ…

data-toggle="buttons-radio"btn-group ގައި ރޭޑިއޯ ސްޓައިލް ޓޮގްލިންގ އަށް އެޑް ކުރާށެވެ .

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" ޑޭޓާ-ޓޮގްލް = "ބަޓަންސް-ރޭޑިއޯ" >
  2. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "btn btn-primary" > ކަނާތް </button>
  3. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ" > މެދު </ބަޓަން>
  4. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ" > ކަނާތް </ބަޓަން>
  5. </div> އެވެ

ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ބަޓަންތައް އެނެބަލްކުރުން:

  1. $ ( '.nav-tabs' ). ބަޓަން ()

މާކަޕް

ޑޭޓާ އެޓްރިބިއުޓްސް އަކީ ބަޓަން ޕްލަގިން އަށް މުހިންމު އެއްޗެކެވެ. އެކި މާކަޕް ވައްތަރުތަކަށް ތިރީގައިވާ މިސާލު ކޯޑް ބައްލަވާށެވެ.

އިޚްތިޔާރުތައް

އެއްޗެއްނޫން

ގޮތްތައް

$().ބަޓަން('ޓޮގްލް')

ޓޮގްލްސް ޕުޝް ސްޓޭޓް. ބަޓަން އެކްޓިވޭޓް ކޮށްފައިވާ ކަމުގެ ސިފަ ލިބެއެވެ.

ހެޑްސް އަޕް! data-toggleއެޓްރިބިއުޓް ބޭނުންކޮށްގެން ބަޓަނެއްގެ އޮޓޯ ޓޮގްލިންގ އެނެބަލް ކުރެވޭނެއެވެ .
  1. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން" ޑޭޓާ-ޓޮގްލް = "ބަޓަން" > ... </ބަޓަން>

$().button('ލޯޑިންގ')

ބަޓަން ސްޓޭޓް ލޯޑިންގ އަށް ސެޓްކުރެއެވެ - ބަޓަން ޑިސެބިލްކޮށް ޓެކްސްޓް ލޯޑިންގ އަށް ޓެކްސްޓް ބަދަލުކުރެއެވެ. ލޯޑިންގ ޓެކްސްޓް ޑެފިނިޝް ކުރަންވާނީ ޑޭޓާ އެޓްރިބިއުޓް ބޭނުންކޮށްގެން ބަޓަން އެލިމެންޓް ގައެވެ data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "ތަކެތި ލޯޑް ކުރަނީ..." > ... </button>
ހެޑްސް އަޕް! ފަޔަރފޮކްސް އިން ޕޭޖް ލޯޑްތަކުގެ ތެރެއިން ޑިސެބިލްޑް ސްޓޭޓް ޕަރސިސްޓް ކުރެއެވެ . މިކަމަށް އޮތް ވޯކްއަރައުންޑަކީ ބޭނުން ކުރުމެވެ autocomplete="off".

$().ބަޓަން('ރީސެޓް')

ބަޓަން ސްޓޭޓް ރީސެޓް ކުރަނީ - ޓެކްސްޓް އަސްލު ޓެކްސްޓަށް ބަދަލުކުރެއެވެ.

$().ބަޓަން(ސްޓްރިންގް)

ބަޓަން ސްޓޭޓް ރީސެޓް ކުރަނީ - ޓެކްސްޓް ކޮންމެ ޑޭޓާއަކުން ކަނޑައެޅިފައިވާ ޓެކްސްޓް ސްޓޭޓަކަށް ބަދަލުކުރެއެވެ.

  1. <button type = "ބަޓަން" ކްލާސް = "ބީޓީއެން" ޑޭޓާ-ކޮމްޕްލީޓް-ޓެކްސްޓް = "ނިމިއްޖެ!" > ... </ބަޓަން> އެވެ
  2. <ސްކްރިޕްޓް> އެވެ
  3. $ ( '.ބީޓީއެން' ). ބަޓަން ( 'ފުރިހަމަ' )
  4. </script> އެވެ

ގުޅިގެން

އެކޯޑިއަންސް އާއި ނެވިގޭޝަން ފަދަ ކޮލެޕްސިބަލް ކޮމްޕޯނެންޓްތަކަށް ބޭސް ސްޓައިލްތަކާއި ފްލެކްސިބަލް ސަޕޯޓް ހޯދުން.

* ޓްރާންސިޝަންސް ޕްލަގިން ހިމަނަން ޖެހެއެވެ.

މިސާލު އެކޯޑިއަން އެވެ

ކޮލަޕްސް ޕްލަގިން ބޭނުންކޮށްގެން އަޅުގަނޑުމެން ބިނާކުރީ އާދައިގެ އެކޯޑިއަން ސްޓައިލް ވިޖެޓެކެވެ:

އެނިމް ޕަރިއޭޓަރ ކްލިޝް ރިޕްރެހެންޑެރިޓް، އެނިމް އެއިއުސްމޮޑް ހައި ލައިފް އެކިއުމަސް ޓެރީ ރިޗާޑްސަން އެޑް ސްކިޑް. 3 ވޯލްފް މޫން އޮފިޝިއާ އައުޓް، ނޮން ކިއުޕިޑަޓަޓް ސްކޭޓްބޯޑް ޑޮލޯރ ބްރަންޗް. ކާބޯތަކެތީގެ ޓްރަކް ކިނޯއާ ނެސްސިއުންޓް ލެބޯރަމް އެއިއުސްމޮޑް. ބްރަންޗް 3 ވޯލްފް މޫން ޓެމްޕަރ، ސުންޓް އެލިކުއާ ޕުޓް އަ ބާރޑް އޮން އިޓް ސްކިޑް ސިންގަލް-އޮރިޖިން ކޮފީ ނޫލާ އަސުމެންޑާ ޝޯރެޑިޗް އެޓް. ނިހިލް އަނިމް ކެފިޔޭ ހެލްވެޓިކާ، ކްރާފްޓް ބިޔަރު ލޭބަރ ވޭސް އެންޑަސަން ކްރެޑް ނެސްސިއުންޓް ސެޕިއެންޓޭ އީއާ ޕްރޮއިޑެންޓް. އެޑް ވީގަން އެކްސެޕްޓަރ ބުޗަރ ވައިސް ލޯމޯ. ލެގިންސް އޮކޭކެޓް ކްރާފްޓް ބިޔަރު ފާމް-ޓު-ޓޭބަލް، ރޯ ޑެނިމް އެސްތެޓިކް ސިންތު ނެސްސިއުންޓް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ވާހަކައެއް އަޑުއިވިފައެއް ނުވޭ އެކިއުމަސް ލޭބަރ ސަސްޓެއިނަބަލް ވީއެޗްއެސް.
އެނިމް ޕަރިއޭޓަރ ކްލިޝް ރިޕްރެހެންޑެރިޓް، އެނިމް އެއިއުސްމޮޑް ހައި ލައިފް އެކިއުމަސް ޓެރީ ރިޗާޑްސަން އެޑް ސްކިޑް. 3 ވޯލްފް މޫން އޮފިޝިއާ އައުޓް، ނޮން ކިއުޕިޑަޓަޓް ސްކޭޓްބޯޑް ޑޮލޯރ ބްރަންޗް. ކާބޯތަކެތީގެ ޓްރަކް ކިނޯއާ ނެސްސިއުންޓް ލެބޯރަމް އެއިއުސްމޮޑް. ބްރަންޗް 3 ވޯލްފް މޫން ޓެމްޕަރ، ސުންޓް އެލިކުއާ ޕުޓް އަ ބާރޑް އޮން އިޓް ސްކިޑް ސިންގަލް-އޮރިޖިން ކޮފީ ނޫލާ އަސުމެންޑާ ޝޯރެޑިޗް އެޓް. ނިހިލް އަނިމް ކެފިޔޭ ހެލްވެޓިކާ، ކްރާފްޓް ބިޔަރު ލޭބަރ ވޭސް އެންޑަސަން ކްރެޑް ނެސްސިއުންޓް ސެޕިއެންޓޭ އީއާ ޕްރޮއިޑެންޓް. އެޑް ވީގަން އެކްސެޕްޓަރ ބުޗަރ ވައިސް ލޯމޯ. ލެގިންސް އޮކޭކެޓް ކްރާފްޓް ބިޔަރު ފާމް-ޓު-ޓޭބަލް، ރޯ ޑެނިމް އެސްތެޓިކް ސިންތު ނެސްސިއުންޓް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ވާހަކައެއް އަޑުއިވިފައެއް ނުވޭ އެކިއުމަސް ލޭބަރ ސަސްޓެއިނަބަލް ވީއެޗްއެސް.
އެނިމް ޕަރިއޭޓަރ ކްލިޝް ރިޕްރެހެންޑެރިޓް، އެނިމް އެއިއުސްމޮޑް ހައި ލައިފް އެކިއުމަސް ޓެރީ ރިޗާޑްސަން އެޑް ސްކިޑް. 3 ވޯލްފް މޫން އޮފިޝިއާ އައުޓް، ނޮން ކިއުޕިޑަޓަޓް ސްކޭޓްބޯޑް ޑޮލޯރ ބްރަންޗް. ކާބޯތަކެތީގެ ޓްރަކް ކިނޯއާ ނެސްސިއުންޓް ލެބޯރަމް އެއިއުސްމޮޑް. ބްރަންޗް 3 ވޯލްފް މޫން ޓެމްޕަރ، ސުންޓް އެލިކުއާ ޕުޓް އަ ބާރޑް އޮން އިޓް ސްކިޑް ސިންގަލް-އޮރިޖިން ކޮފީ ނޫލާ އަސުމެންޑާ ޝޯރެޑިޗް އެޓް. ނިހިލް އަނިމް ކެފިޔޭ ހެލްވެޓިކާ، ކްރާފްޓް ބިޔަރު ލޭބަރ ވޭސް އެންޑަސަން ކްރެޑް ނެސްސިއުންޓް ސެޕިއެންޓޭ އީއާ ޕްރޮއިޑެންޓް. އެޑް ވީގަން އެކްސެޕްޓަރ ބުޗަރ ވައިސް ލޯމޯ. ލެގިންސް އޮކޭކެޓް ކްރާފްޓް ބިޔަރު ފާމް-ޓު-ޓޭބަލް، ރޯ ޑެނިމް އެސްތެޓިކް ސިންތު ނެސްސިއުންޓް ތިބާއަށް ފަހަރެއްގައި އެމީހުންގެ ވާހަކައެއް އަޑުއިވިފައެއް ނުވޭ އެކިއުމަސް ލޭބަރ ސަސްޓެއިނަބަލް ވީއެޗްއެސް.
  1. <div class = "އެކޯޑިއަން" id = "އެކޯޑިއަން2" >
  2. <div class = "އެކޯޑިއަން-ގްރޫޕް" >
  3. <div class = "އެކޯޑިއަން-ހެޑިންގ" >
  4. <a class = "އެކޯޑިއަން-ޓޮގްލް" data-toggle = "ކޮލަޕްސް" ޑޭޓާ-ޕޭރެންޓް = "#އެކޯޑިއަން2" href = "#ކޮލަޕްސްވަން" >
  5. ކޮލެޕްސިބަލް ގްރޫޕް އައިޓަމް #1
  6. </a> އެވެ
  7. </div> އެވެ
  8. <div id = "collapseOne" class = "އެކޯޑިއަން-ބޮޑީ ކޮލަޕްސް އިން" >
  9. <div class = "އެކޯޑިއަން-އެތެރޭ" >
  10. އަނިމް ޕަރިއޭޓަރ ކްލިޝް...
  11. </div> އެވެ
  12. </div> އެވެ
  13. </div> އެވެ
  14. <div class = "އެކޯޑިއަން-ގްރޫޕް" >
  15. <div class = "އެކޯޑިއަން-ހެޑިންގ" >
  16. <a class = "އެކޯޑިއަން-ޓޮގްލް" data-toggle = "ކޮލަޕްސް" data-parent = "#އެކޯޑިއަން2" href = "#ކޮލަޕްސްޓޫ" >
  17. ކޮލެޕްސިބަލް ގްރޫޕް އައިޓަމް #2
  18. </a> އެވެ
  19. </div> އެވެ
  20. <div id = "collapseTwo" class = "އެކޯޑިއަން-ބޮޑީ ކޮލަޕްސް" >
  21. <div class = "އެކޯޑިއަން-އެތެރޭ" >
  22. އަނިމް ޕަރިއޭޓަރ ކްލިޝް...
  23. </div> އެވެ
  24. </div> އެވެ
  25. </div> އެވެ
  26. </div> އެވެ
  27. ...

އަދި އެކޯޑިއަން މާކަޕް ނެތި ޕްލަގިން ބޭނުން ކުރެވިދާނެ އެވެ. އެހެން އެލިމެންޓެއް ފުޅާކޮށް ކޮލަޕްސް ކުރުން ޓޮގްލް ކުރާ ބަޓަނެއް ހަދާށެވެ.

  1. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޑޭންޖަރ" ޑޭޓާ-ޓޮގްލް = "ކޮލަޕްސް" ޑޭޓާ-ޓާގެޓް = "#ޑެމޯ" >
  2. ސާދާ ކޮލެޕްސިބަލް އެވެ
  3. </ބަޓަން> އެވެ
  4.  
  5. <div id = "ޑެމޯ" class = "ކޮލަޕްސް އިން" > ... </div>

ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ހަމައެކަނި އެޑް data-toggle="collapse"އަދި އަ data-targetޓު އެލިމެންޓް އެއްކޮށްގެން ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ކޮންޓްރޯލް އޮޓޮމެޓިކުން ޙަވާލު ކުރެވޭނެއެވެ. އެޓްރިބިއުޓް އިން data-targetކޮލެޕްސް އެޕްލައި ކުރުމަށް css ސެލެކްޓަރެއް ބަލައިގަންނައެވެ. collapseކޮލެޕްސިބަލް އެލިމެންޓަށް ކްލާސް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . ޑިފޯލްޓްކޮށް ހުޅުވާލަން ބޭނުންނަމަ، އިތުރު ކްލާސް އިތުރުކުރައްވާށެވެ in.

ކޮލެޕްސިބަލް ކޮންޓްރޯލަކަށް އެކޯޑިއަން ކަހަލަ ގްރޫޕް މެނޭޖްމަންޓް އިތުރުކުރުމަށްޓަކައި، ޑޭޓާ އެޓްރިބިއުޓް އިތުރުކުރުން data-parent="#selector". މިކަން ޢަމަލީ ގޮތުން ބަލާލުމަށް ޑެމޯއަށް ރިފަރ ކުރާށެވެ.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

މެނުއަލްކޮށް އެނެބަލް ކުރާނީ:

  1. $ ( ".ކޮލަޕްސް" ). ކޮލަޕްސް () .

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-parent="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
ބެލެނިވެރިޔާ އެވެ ސެލެކްޓަރ އެވެ ރަނގަޅުނޫން ސެލެކްޓަރ ނަމަ ދެން ކަނޑައެޅިފައިވާ ޕޭރެންޓްގެ ދަށުގައިވާ ހުރިހާ ކޮލެޕްސިބަލް އެލިމެންޓްތައް މި ކޮލެޕްސިބަލް އައިޓަމް ދައްކާއިރު ބަންދުވާނެއެވެ. (ސަގާފީ އެކޯޑިއަން ސުލޫކާ އެއްގޮތް)
ޓޮގްލް ކޮށްލާށެވެ ބޫލިއަން އެވެ ރަނގަޅު އިންވޮކޭޝަންގައި ކޮލެޕްސިބަލް އެލިމެންޓް ޓޮގްލް ކުރެއެވެ

ގޮތްތައް

.ކޮލަޕްސް(އޮޕްޝަންސް)

ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ގޮތުގައި ތިބާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object.

  1. $ ( '#މައިކޮލަޕްސިބަލް' ). ކޮލަޕްސް ({
  2. ޓޮގްލް : ދޮގު
  3. }) އެވެ.

.collapse('ޓޮގްލް')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކާ ނުވަތަ ފޮރުވުމަށް ޓޮގްލް ކުރެއެވެ.

.collapse('ދައްކާ')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކައެވެ.

.collapse('ފޮރުވުން')

ކޮލެޕްސިބަލް އެލިމެންޓެއް ފޮރުވައެވެ.

އިވެންޓްސް

ބޫޓްސްޓްރެޕްގެ ކޮލަޕްސް ކްލާސް އިން ކޮލަޕްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.

ހަރަކާތް ތަފްޞީލު
ދެއްކުން މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައި ވެއެވެ މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކޮލަޕްސް އެލިމެންޓެއް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (css ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
ފޮރުވުން މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideމެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައި މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޔޫޒަރަށް ކޮލަޕްސް އެލިމެންޓެއް ފޮރުވިފައި އޮތުމުން (css ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
  1. $ ( '#މައިކޮލަޕްސިބަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {
  2. // ކަމެއް ކުރާށެވެ...
  3. }) އެވެ.

މިސާލު

ކޮންމެ ފޯމް ޓެކްސްޓް އިންޕުޓަކާއެކު އަވަހަށް އެލިގަންޓް ޓައިޕްހެޑްސް އުފެއްދުމަށްޓަކައި އަސާސީ، ފަސޭހައިން ފުޅާކުރެވޭ ޕްލަގިންއެކެވެ.

  1. <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ޑޭޓާ-ޕްރޮވައިޑް = "ޓައިޕްއެހެޑް" >

autocomplete="off"ބޫޓްސްޓްރެޕް ޓައިޕްއެހެޑް ޑްރޮޕްޑައުންގެ މައްޗަށް ޑިފޯލްޓް ބްރައުޒާ މެނޫތައް ނުފެނުމަށް ސެޓް ކުރަން ބޭނުންވާނެ އެވެ .


ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

މަތީގައިވާ މިސާލުގައިވާ ގޮތަށް ޓައިޕްއެހެޑް ފަންކްޝަނަލިޓީއާއެކު އެލިމެންޓެއް ރަޖިސްޓްރީ ކުރުމަށް ޑޭޓާ އެޓްރިބިއުޓްސް އިތުރުކުރުން.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ޓައިޕްއެހެޑް އަށް މެނުއަލްކޮށް ގުޅާނީ:

  1. $ ( '.ޓައިޕްއެހެޑް' ). ޓައިޕްއެހެޑް ()

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-source="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އަސްލު އެރޭ، ފަންކްޝަން [ ] އެވެ. އެކަމާ ދެކޮޅަށް ސުވާލުކުރަންޖެހޭ ޑޭޓާ ސޯސް އެވެ. ސްޓްރިންގްތަކުގެ އެރޭއެއް ނުވަތަ ފަންކްޝަނަކަށް ވެދާނެއެވެ. މި ފަންކްޝަން ޕާސް ކުރެވެނީ ދެ އަރގިއުމެންޓެއް ކަމަށްވާ queryއިންޕުޓް ފީލްޑްގައި ހުންނަ ވެލިއު އާއި processކޯލްބެކް އެވެ. processކޯލްބެކްގެ ސިންގަލް އަރގިއުމެންޓް މެދުވެރިކޮށް ސީދާ ނުވަތަ އެސިންކްރޮނަސް ގޮތަކަށް ޑޭޓާ ސޯސް ރިޓަރންކޮށްގެން ސިންކްރޮނަސް ގޮތަކަށް ފަންކްޝަން ބޭނުންކުރެވިދާނެއެވެ .
ތަކެތި ނަންބަރު 8 ޑްރޮޕްޑައުންގައި ދައްކާނެ ތަކެތީގެ މެކްސް އަދަދު.
މިންދިގުމިން ނަންބަރު 1 އޮޓޯކޮމްޕްލީޓް ހުށަހެޅުންތައް ޓްރިގަރ ކުރުމުގެ ކުރިން ބޭނުންވާ އެންމެ ކުޑަ އަކުރު ދިގުމިން
މެޗަރ އެވެ ފަންކްޝަން ކޭސް އިންސެންސިޓިވް އެވެ ކިއުއަރީއެއް އެއްޗަކާ އެއްގޮތްތޯ ބެލުމަށް ބޭނުންކުރާ ގޮތް. އެއް އަރގިއުމެންޓެއް ބަލައިގަންނަނީ، އެއާ itemދެކޮޅަށް ކިއުއަރީ ޓެސްޓް ކުރާނެ އަރގިއުމެންޓެކެވެ. މިހާރު ހުރި ކިއުއަރީއަށް ވަދެވޭނީ this.query. trueކިއުއަރީ އަކީ މެޗެއްނަމަ ބޫލިއަން އެއް ރިޓަރން ކުރާށެވެ .
ސޯޓަރ އެވެ ފަންކްޝަން ސީދާ އެއްގޮތް،
ކޭސް ސެންސިޓިވް،
ކޭސް އިންސެންސިޓިވް
އޮޓޯކޮމްޕްލީޓް ނަތީޖާތައް ސޯޓް ކުރުމަށް ބޭނުންކުރާ ގޮތް. އެއް އަރގިއުމެންޓެއް ބަލައިގަނެ items، ޓައިޕްއެހެޑް އިންސްޓޭންސްގެ ސްކޯޕް ލިބިގެންދެއެވެ. މިހާރު ބޭނުންކުރާ ސުވާލަށް ރިފަރެންސް ކުރާނީ this.query.
އަޕްޑޭޓަރެވެ ފަންކްޝަން ހޮވާފައިވާ އެއްޗެއް ރިޓަރން ކޮށްދެއެވެ ހޮވާފައިވާ އެއްޗެއް އަނބުރާ ދިނުމަށް ބޭނުންކުރާ ގޮތް. އެއް އަރގިއުމެންޓެއް ބަލައިގަންނައިރު، itemއަދި ޓައިޕްއެހެޑް އިންސްޓޭންސްގެ ސްކޯޕް ހުރެއެވެ.
ހައިލައިޓަރ އެވެ ފަންކްޝަން ހުރިހާ ޑިފޯލްޓް މެޗްތަކެއް ހައިލައިޓް ކުރެއެވެ އޮޓޯކޮމްޕްލީޓް ނަތީޖާތައް ފާހަގަކުރުމަށް ބޭނުންކުރާ ގޮތް. އެއް އަރގިއުމެންޓެއް ބަލައިގަނެ item، ޓައިޕްއެހެޑް އިންސްޓޭންސްގެ ސްކޯޕް ލިބިގެންދެއެވެ. ރިޓަރން ކުރަންވީ html.

ގޮތްތައް

.ޓައިޕްއެހެޑް(އޮޕްޝަންސް)

ޓައިޕްއެހެޑް އެއް އެކުލެވޭ އިންޕުޓެއް އިނިޝިއަލައިޒް ކުރެއެވެ.

މިސާލު

ކަނާތްފަރާތުގައިވާ ސަބްނެވިގޭޝަނަކީ އެފިކްސް ޕްލަގިންގެ ލައިވް ޑެމޯއެކެވެ.


ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ކޮންމެ އެލިމެންޓަކަށް ވެސް ފަސޭހައިން އެފިކްސް ބިހޭވިއަރ އިތުރު ކުރުމަށްޓަކައި، ހަމައެކަނި data-spy="affix"ސްޕައި ކުރަން ބޭނުންވާ އެލިމެންޓަށް އެޑް ކޮށްލާށެވެ. ދެން އޮފްސެޓްސް ބޭނުންކޮށްގެން އެލިމެންޓެއްގެ ޕިނިންގ އޮންކޮށް އޮފް ކުރަންވީ ވަގުތު ކަނޑައެޅޭނެއެވެ.

  1. <div ޑޭޓާ-ސްޕައި = "އެފިކްސް" ޑޭޓާ-އޮފްސެޓް-ޓޮޕް = "200" > ... </div>
ހެޑްސް އަޕް! ޕިން ކުރެވިފައިވާ އުފެއްދުމެއްގެ މަޤާމާއި، އޭގެ ގާތް ބެލެނިވެރިޔާގެ ސުލޫކު މެނޭޖް ކުރަން ޖެހެއެވެ. މަޤާމު ކޮންޓްރޯލް ކުރެވެނީ affix, affix-top, އަދި affix-bottom. އެފިކްސް ކިކް އިން ކުރާއިރު ކޮލެޕްސް ވެދާނެ ބެލެނިވެރިއެއް ހުރިތޯ ޗެކް ކުރަން ހަނދާން ކުރާށެވެ، އެއީ ޕޭޖުގެ އާދައިގެ ފްލޯއިން ކޮންޓެންޓް ނައްތާލަމުންދާތީ އެވެ.

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެފިކްސް ޕްލަގިން އަށް ގުޅާލާ:

  1. $ ( '#ނަވްބާރ' ). އެފިކްސް () .

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset-top="200".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އޮފްސެޓް ކޮށްލާށެވެ ނަންބަރު | ފަންކްޝަން | އެއްޗެއް 10 ސްކްރޯލްގެ މަޤާމު ހިސާބުކުރާއިރު ސްކްރީނުން އޮފްސެޓް ކުރަންޖެހޭ ޕިކްސެލްތައް. އެއް ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ މަތީ ދިމާލާއި ވާތު ދިމާލުގައި ވެސް އޮފްސެޓް ޖަހާނެ އެވެ. އެއް ދިމާލަކަށް، ނުވަތަ އެތައް ޔުނިކް އޮފްސެޓްތަކެއް އަޑުއެހުމަށްޓަކައި، ހަމައެކަނި އެއްޗެއް ފޯރުކޮށްދިނުން offset: { x: 10 }. ޑައިނަމިކް ގޮތެއްގައި އޮފްސެޓެއް ފޯރުކޮށްދޭން ބޭނުންވާ ވަގުތު ފަންކްޝަނެއް ބޭނުންކުރުން (ބައެއް ރެސްޕޮންސިވް ޑިޒައިންތަކަށް ބޭނުންތެރި) .