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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

އިވެންޓްސް

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "މޯޑަލް ހައިޑް ފޭޑް" > 
  <div ކްލާސް = "މޮޑަލް-ހެޑަރ" > 
    <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "މޮޑަލް" aria-hidden = "ހަގީގަތް" > × </ބަޓަން> އެވެ    
    <h3> މޮޑަލް ހެޑަރ </h3>
  </div> އެވެ
  <div ކްލާސް = "މޯޑަލް-ބޮޑީ" > 
    <p> އެއް ރީތި ހަށިގަނޑެއް... </p>
  </div> އެވެ
  <div class = "މޯޑަލް-ފޫޓަރ" > 
    <a href = "#" class = "btn" > ބަންދުކުރުން </a>  
    <a href = "#" class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </a>  
  </div> އެވެ
</div> އެވެ

ލައިވް ޑެމޯ

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

<!-- މޮޑަލް ޓްރިގަރ ކުރުމަށް ބަޓަން -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "މޮޑަލް" > ޑެމޯ މޮޑަލް ލޯންޗްކުރުން </a>    
 
<!-- މޮޑަލް -->
<div id = "myModal" class = "މޯޑަލް ހައިޑް ފޭޑް" tabindex = "-1" ރޯލް = "ޑައިލޮގް" aria-labelledby = "myModalLabel" aria-hidden = "ޓްރޫ" >      
  <div ކްލާސް = "މޮޑަލް-ހެޑަރ" > 
    <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "މޮޑަލް" aria-hidden = "ހަގީގަތް" > × </button>    
    <h3 id = "myModalLabel" > މޮޑަލް ހެޑަރ </h3> 
  </div> އެވެ
  <div ކްލާސް = "މޯޑަލް-ބޮޑީ" > 
    <p> އެއް ރީތި ހަށިގަނޑެއް... </p>
  </div> އެވެ
  <div class = "މޯޑަލް-ފޫޓަރ" > 
    <button class = "btn" data- dismiss = "މޮޑަލް" aria-hidden = "ޓްރޫ" > ބަންދުކުރުން </button>   
    <button class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </button> 
  </div> އެވެ
</div> އެވެ

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

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

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

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

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

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

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

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

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

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

ގޮތްތައް

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

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

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

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

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

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

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

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

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

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

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

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

އިވެންޓްސް

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

$ ( '#މައިމޮޑަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

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

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

ނަވްބާރެއްގެ ތެރޭގައެވެ

ޓެބްތަކުގެ ތެރޭގައި

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

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

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

<div class = "ޑްރޮޕްޑައުން" > 
  <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" href = "#" > ޑްރޮޕްޑައުން ޓްރިގަރ </a>   
  <ul ކްލާސް = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "dLabel" >   
    ...
  </ul> އެވެ
</div> އެވެ

ޔޫ.އާރ.އެލް ތައް އެއްގޮތަކަށްވެސް ނުގެއްލޭ ގޮތަށް ބެހެއްޓުމަށްޓަކައި، ގެ data-targetބަދަލުގައި އެޓްރިބިއުޓް ބޭނުންކުރާށެވެ href="#".

<div class = "ޑްރޮޕްޑައުން" > 
  <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" id = "dLabel" role = "ބަޓަން" ޑޭޓާ-ޓޮގްލް = "ޑްރޮޕްޑައުން" ޑޭޓާ-ޓާގެޓް = "#" href = "/page.html" >      
    ޑްރޮޕްޑައުން
    <b ކްލާސް = "ކެރެޓް" ></b> 
  </a> އެވެ
  <ul ކްލާސް = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "dLabel" >   
    ...
  </ul> އެވެ
</div> އެވެ

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

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

$ ( '.ޑްރޮޕްޑައުން-ޓޮގްލް' ). ޑްރޮޕްޑައުން ()

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

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

ގޮތްތައް

$().ޑްރޮޕްޑައުން('ޓޮގްލް')

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

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

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

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

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

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

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

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

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

$ ( '#ނަވްބާރ' ). ސްކްރޯލްސްޕައި ()

ގޮތްތައް

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

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

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

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

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

އިވެންޓްސް

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

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

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

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

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

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

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

މާކަޕް

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

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

ގޮތްތައް

$().ޓެބް

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

<ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" id = "މައިޓެބް" >  
  <li class = "އެކްޓިވް" ><a href = "#home" > ގެ </a> </li>  
  <li><a href = "#ޕްރޮފައިލް" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#messages" > މެސެޖުތައް </a></li> 
  <li><a href = "#settings" > ސެޓިންގސް </a></li> 
</ul> އެވެ
 
<div class = "ޓެބް-ކޮންޓެންޓް" > 
  <div class = "ޓެބް-ޕޭން އެކްޓިވް" id = "ގެ" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "ޕްރޮފައިލް" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "މެސެޖްތައް" > ... </div>  
  <div class = "ޓެބް-ޕޭން" id = "ސެޓިންގސް" > ... </div>  
</div> އެވެ
 
<ސްކްރިޕްޓް> އެވެ
  $ ( ފަންކްޝަން () {  
    $ ( '#މައިޓެބް އަ:ލަސްޓް' ). tab ( 'ދައްކާ' );
  }) އެވެ.
</script> އެވެ

އިވެންޓްސް

$ ( 'a[ޑޭޓާ-ޓޮގްލް="ޓެބް"]' ). on ( 'ދައްކާފައި' , ފަންކްޝަން ( އީ ) {   
  އީ . ޓާގެޓް // އެކްޓިވޭޓް ކޮށްފައިވާ ޓެބް
  އީ . relatedTarget // ކުރީގެ ޓެބް
}) އެވެ.

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

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

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

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

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

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

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

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

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

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

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

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

މާކަޕް

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

ގޮތްތައް

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ލައިވް ޑެމޯ

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

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

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

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

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

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

މާކަޕް

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

ގޮތްތައް

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

މާކަޕް

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

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

ގޮތްތައް

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

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

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

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

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

އިވެންޓްސް

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

$ ( '#އަހަރެންގެ-އެލާޓް' ). bind ( 'ބަންދުކޮށްފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

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

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

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

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

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

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

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

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

ޗެކްބޮކްސް

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

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

ރޭޑިއޯ…

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

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

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

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

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

މާކަޕް

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

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

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

ގޮތްތައް

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

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

<ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން" ޑޭޓާ-ޓޮގްލް = "ބަޓަން" > ... </ބަޓަން>    

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

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

<ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން" ޑޭޓާ-ލޯޑިންގ-ޓެކްސްޓް = "ތަކެތި ލޯޑްކުރަނީ..." > ... </ބަޓަން>    

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

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

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

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

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

ގުޅިގެން

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

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

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

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

<div class = "އެކޯޑިއަން" id = "އެކޯޑިއަން2" >  
  <div class = "އެކޯޑިއަން-ގްރޫޕް" > 
    <div class = "އެކޯޑިއަން-ހެޑިންގ" > 
      <a class = "އެކޯޑިއަން-ޓޮގްލް" data-toggle = "ކޮލަޕްސް" ޑޭޓާ-ޕޭރެންޓް = "#އެކޯޑިއަން2" href = "#ކޮލަޕްސްވަން" >    
        ކޮލެޕްސިބަލް ގްރޫޕް އައިޓަމް #1
      </a> އެވެ
    </div> އެވެ
    <div id = "collapseOne" class = "އެކޯޑިއަން-ބޮޑީ ކޮލަޕްސް އިން" >  
      <div class = "އެކޯޑިއަން-އެތެރޭ" > 
        އަނިމް ޕަރިއޭޓަރ ކްލިޝް...
      </div> އެވެ
    </div> އެވެ
  </div> އެވެ
  <div class = "އެކޯޑިއަން-ގްރޫޕް" > 
    <div class = "އެކޯޑިއަން-ހެޑިންގ" > 
      <a class = "އެކޯޑިއަން-ޓޮގްލް" data-toggle = "ކޮލަޕްސް" data-parent = "#އެކޯޑިއަން2" href = "#ކޮލަޕްސްޓޫ" >    
        ކޮލެޕްސިބަލް ގްރޫޕް އައިޓަމް #2
      </a> އެވެ
    </div> އެވެ
    <div id = "collapseTwo" class = "އެކޯޑިއަން-ބޮޑީ ކޮލަޕްސް" >  
      <div class = "އެކޯޑިއަން-އެތެރޭ" > 
        އަނިމް ޕަރިއޭޓަރ ކްލިޝް...
      </div> އެވެ
    </div> އެވެ
  </div> އެވެ
</div> އެވެ
...

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

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

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

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

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

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

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

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

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

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

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

ގޮތްތައް

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

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

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

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

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

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

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

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

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

އިވެންޓްސް

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

$ ( '#މައިކޮލަޕްސިބަލް' ). on ( 'ފޮރުވިފައި' , ފަންކްޝަން () {   
  // ކަމެއް ކުރާށެވެ...
}) އެވެ.

މިސާލު ކެރޮސެލް އެވެ

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

ފުރަތަމަ ތަމްބްނެއިލް ލޭބަލް

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

ދެވަނަ ތަމްބްނެއިލް ލޭބަލް

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

ތިންވަނަ ތަމްބްނެއިލް ލޭބަލް

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

‹ ›

<div id = "myCarousel" class = "ކެރޮސެލް ސްލައިޑް" >  
  <ol class = "ކެރޮސެލް-އިންޑިކޭޓަރސް" > 
    <li data-target = "#myCarousel" data-slide-to = "0" ކްލާސް = "އެކްޓިވް" ></li>   
    <li data-target = "#myCarousel" ޑޭޓާ-ސްލައިޑް-ޓު = "1" ></li>  
    <li data-target = "#myCarousel" ޑޭޓާ-ސްލައިޑް-ޓު = "2" ></li>  
  </ol> އެވެ
  <!-- ކެރޮސެލް ތަކެތި -->
  <div class = "ކެރޮސެލް-އެތެރޭ" > 
    <div class = "އެކްޓިވް އައިޓަމް" > ... </div> 
    <div ކްލާސް = "އައިޓަމް" > ... </div> 
    <div ކްލާސް = "އައިޓަމް" > ... </div> 
  </div> އެވެ
  <!-- ކެރޮސެލް ނަވް -->
  <a class = "ކެރޮސެލް-ކޮންޓްރޯލް ލެފްޓް" href = "#myCarousel" data-slide = "ކުރިން" > ‹ </a> އެވެ   
  <a class = "ކެރޮސެލް-ކޮންޓްރޯލް ރައިޓް" href = "#myCarousel" data-slide = "ދެން" > › </a> އެވެ   
</div> އެވެ

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

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

ކެރޮސެލްގެ މަޤާމު ފަސޭހައިން ކޮންޓްރޯލް ކުރުމަށް ޑޭޓާ އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ. data-slideއެކްސެޕްޓްސް ދަ ކީވޯޑްސް prevނުވަތަ next, މިއީ މިހާރު ހުރި މަޤާމަށް ނިސްބަތްކޮށް ސްލައިޑްގެ މަޤާމު ބަދަލުކޮށްދޭ ކަމެކެވެ. ނުވަތަ، data-slide-toކެރޮސެލް އަށް ރޯ ސްލައިޑް އިންޑެކްސް އެއް ފޮނުވުމަށް ބޭނުން ކުރާށެވެ data-slide-to="2"، މިއީ ޖަމްޕް'ސް ސްލައިޑް ޕޮޒިޝަން ވަކި އިންޑެކްސް އަކަށް ފެށޭ ގޮތަށް ޖަމްޕް ކުރާ އެއްޗެކެވެ 0.

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

ކެރޮސެލްއަށް މެނުއަލްކޮށް ގުޅާނީ:

$ ( '.ކެރޮސެލް' ). ކެރޮސެލް () .

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

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

ގޮތްތައް

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

އިޚްތިޔާރީ އޮޕްޝަންތަކަކާއެކު ކެރޮސެލް އިނިޝިއަލައިޒްކޮށް objectތަކެތި މެދުވެރިކޮށް ސައިކަލް ދުއްވަން ފަށައެވެ.

$ ( '.ކެރޮސެލް' ). ކެރޮސެލް ({
  އިންޓަވަލް : 2000 
}) އެވެ.

.ކެރޮސެލް('ސައިކަލް')

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

.ކެރޮސެލް('ޕޮޒް')

ތަކެތި މެދުވެރިކޮށް ކެރޮސެލް ސައިކަލް ދުއްވުން ހުއްޓުވައެވެ.

.ކެރޮސެލް(ނަންބަރު) .

ކެރޮސެލް ވަކި ފްރޭމަކަށް ސައިކަލް ކުރެއެވެ (0 އަށް ބިނާކޮށް، އެރޭއަކާ އެއްގޮތް).

.ކެރޮސެލް('ކުރިން')

ކުރީގެ އައިޓަމަށް ސައިކަލް ކުރެއެވެ.

.ކެރޮސެލް('ކުރިއަށް')

ދެން އޮތް އެއްޗަކަށް ސައިކަލް ކުރެއެވެ.

އިވެންޓްސް

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

މިސާލު

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

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

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

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

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

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

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

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

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

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

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

ގޮތްތައް

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

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

މިސާލު

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

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

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

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

<div ޑޭޓާ-ސްޕައި = "އެފިކްސް" ޑޭޓާ-އޮފްސެޓް-ޓޮޕް = "200" > ... </div>  

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

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

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

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

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