ޕޮޕޯވަރސް އެވެ
އައިއޯއެސް އިން ފެންނަ ފަދަ ބޫޓްސްޓްރެޕް ޕޮޕޯވަރސް ސައިޓްގައި ހުންނަ ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް.
ޕޮޕޯވަރ ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:
- ޕޮޕޯވަރސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ Popper.js އަށެވެ. ޕޮޕޯވަރސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.js ހިމަނަން ނުވަތަ Popper.js ހިމެނޭ
bootstrap.bundle.min.js
/ ބޭނުން ކުރަން ޖެހެއެވެ!bootstrap.bundle.js
- ޕޮޕޯވަރސް އަށް ޑިޕެންޑެންސީއެއްގެ ގޮތުގައި ޓޫލްޓިޕް ޕްލަގިން ބޭނުންވެއެވެ.
- އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީ
util.js
. - ޕޮޕޯވަރސް އަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗެއް ކަމުން އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
- ޒީރޯ-ލެންގްސް
title
އާއިcontent
ވެލިއުސް އިން ދުވަހަކުވެސް ޕޮޕޯވަރެއް ނުފެންނާނެއެވެ. container: 'body'
މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކުގައި (އަޅުގަނޑުމެންގެ އިންޕުޓް ގްރޫޕްތަކާއި، ބަޓަން ގްރޫޕްތައް ފަދަ) ރެންޑަރިންގ މައްސަލަތަކުން ސަލާމަތްވުމަށް ކަނޑައަޅާށެވެ .- ފޮރުވިފައިވާ އުފެއްދުންތަކުގެ މައްޗަށް ޕޮޕޯވަރސް ޓްރިގަރ ކުރުމުން ފައިދާއެއް ނުވާނެއެވެ.
- ޕޮޕޯވަރސް ފޯރ
.disabled
ނުވަތަdisabled
އެލިމެންޓްސް ޓްރިގަރ ކުރަން ޖެހެނީ ރެޕަރ އެލިމެންޓެއްގެ މައްޗަށެވެ. - އެތައް ރޮނގެއް ހުރަސްކޮށް އޮޅާލާފައިވާ އެންކަރުތަކުން ޓްރިގަރ ކުރާއިރު، ޕޮޕޯވަރސް ހުންނާނީ އެންކަރުތަކުގެ ޖުމްލަ ފުޅާމިނުގެ މެދުގައި މެދުވެރިކޮށެވެ. މި ސުލޫކުން ސަލާމަތްވުމަށްޓަކައި
white-space: nowrap;
އޮން ޔޫއާރ ސް ބޭނުން ކުރާށެވެ .<a>
- ޕޮޕޯވަރސް ފޮރުވަން ޖެހެނީ އެތަކެތީގެ އެލިމެންޓްތައް ޑީއޯއެމް އިން ނައްތާލުމުގެ ކުރިންނެވެ.
ބައެއް މިސާލުތަކާއެކު ޕޮޕޯވަރސް މަސައްކަތްކުރާ ގޮތް ބަލާލުމަށް ކިޔަމުން ގެންދާށެވެ.
ޕޭޖެއްގައި ހުންނަ ހުރިހާ ޕޮޕޯވަރސް އެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޕޮޕޯވަރސް data-toggle
އެޓްރިބިއުޓް އަށް ބަލައިގެން ހޮވުމެވެ:
ޕޮޕޯވަރަކަށް ހުރަސްއެޅޭ ބައެއް ސްޓައިލްތައް ބެލެނިވެރި އެލިމެންޓެއްގައި ހުންނައިރު، container
އޭގެ ބަދަލުގައި އެ އެލިމެންޓުގެ ތެރޭގައި ޕޮޕޯވަރގެ އެޗްޓީއެމްއެލް ފެންނާނެ ގޮތަށް ކަސްޓަމެއް ކަނޑައަޅަން ބޭނުންވާނެއެވެ.
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި.
focus
ޓޮގްލް އެލިމެންޓަށްވުރެ ތަފާތު އެލިމެންޓެއް ޔޫޒަރ ދެން ކްލިކް ކުރުމުން ޕޮޕޯވަރސް ޑިސްމިސް ކުރުމަށް ޓްރިގަރ ބޭނުން ކުރާށެވެ.
ޑިސްމިސް-އޮން-ނެކްސްޓް-ކްލިކް އަށް ވަކި މާކަޕް އެއް ބޭނުންވެއެވެ
ރަނގަޅަށް ކްރޮސް ބްރައުޒާ އަދި ކްރޮސް ޕްލެޓްފޯމް ސުލޫކަށްޓަކައި ޓެގް ބޭނުން <a>
ނުކުރަން ޖެހޭނީ ޓެގް ކަމަށާއި، އަދި އެޓްރިބިއުޓެއް <button>
ވެސް ހިމަނަން ޖެހޭނެ ކަމަށެވެ .tabindex
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
އެޓްރިބިއުޓް އެކުލެވޭ އެލިމެންޓްތަކަކީ disabled
އިންޓަރެކްޓިވް އެއްޗެހި ނޫން، މާނައަކީ ޕޮޕޯވަރ (ނުވަތަ ޓޫލްޓިޕް) އެއް ޓްރިގަރ ކުރުމަށް ޔޫޒަރުންނަށް ހޯވަރ ނުވަތަ ކްލިކް ނުކުރެވޭނެއެވެ. ވޯކްއަރައުންޑެއްގެ ގޮތުގައި، ރެޕަރަކުން ޕޮޕޯވަރ ޓްރިގަރ ކުރަން <div>
ނުވަތަ އަދި އޮން ދަ ޑިސެބަލްޑް އެލިމެންޓް <span>
އޯވަރރައިޑް ކުރަން ބޭނުންވާނެއެވެ .pointer-events
ނުކުޅެދުންތެރިކަން ހުންނަ ޕޮޕޯވަރ ޓްރިގަރސް އަށް، ނުކުޅެދުންތެރިކަން ހުންނަ އެލިމެންޓަކަށް ކްލިކްdata-trigger="hover"
ކުރާނެ ކަމަށް ހީނުކުރާތީ، ޕޮޕޯވަރ ތިބާގެ ޔޫޒަރުންނަށް ވަގުތުން ވިޝުއަލް ފީޑްބެކް ފެންނާނެ ގޮތަށް ވެސް އިސްކަންދެވިދާނެއެވެ .
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޕޮޕޯވަރސް އެނެބަލް ކުރުން:
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އެނިމޭޝަން އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ޕޮޕޯވަރ އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
ކޮންޓެއިނަރެވެ | ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެ. މިސާލު: |
ކޮންޓެންޓް | ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ލަސްވުން | ނަންބަރު | އެއްޗެއް | 0 | ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html އެވެ | ބޫލިއަން އެވެ | ރަނގަޅުނޫން | ޕޮޕޯވަރ އަށް އެޗްޓީއެމްއެލް ޖައްސާށެވެ. ދޮގުނަމަ ޖީކުއަރީގެ text މެތޯޑް ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
ޕްލޭސްމަންޓް | ސްޓްރިންގް | ފަންކްޝަން | 'ކަނާތް' | ޕޮޕޯވަރ ޕޮޒިޝަން ކުރާނެ ގޮތް - އޮޓޯ | މަތީގައި | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް. ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޕޮޕޯވަރ ރީއޮރިއެންޓް ކުރާނެ އެއްޗެކެވެ ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕޯވަރ ޑީއޯއެމް ނޯޑް އަދި އޭގެ ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
ސެލެކްޓަރ އެވެ | ސްޓްރިންގް | ރަނގަޅުނޫން | ރަނގަޅުނޫން | ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޕޮޕޯވަރ އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޕޮޕޯވަރސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
ޓެމްޕްލޭޓް | ސްޓްރިންގ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ޕޮޕޯވަރ އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބެސްޓް ކުރާށެވެ. އެ ޕޮޕޯވަރސް އެ ޕޮޕޯވަރސް
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
މަޤާމު | ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' އެވެ. |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު | ސްޓްރިންގ | 'ކްލިކް' ކޮށްލާށެވެ. | ޕޮޕޯވަރ ޓްރިގަރ ވާނީ ކިހިނެއް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. `މެނުއަލް` އެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ. |
އޮފްސެޓް ކޮށްލާށެވެ | ނަންބަރު | ސްޓްރިންގ | 0 | އޭގެ އަމާޒަށް ނިސްބަތްކޮށް ޕޮޕޯވަރ އޮފްސެޓް ކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
fallbackޕްލޭސްމަންޓް | ސްޓްރިންގް | އެރޭ އެވެ | 'ފުށުންޖެހުން' | ފޯލްބެކްގައި ޕޮޕަރ ބޭނުންކުރާނީ ކޮން މަޤާމެއްކަން ކަނޑައެޅުމަށް ހުއްދަ ދޭށެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ |
ބައުންޑަރީ އެވެ | ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް | 'ސްކްރޯލްޕޭރެންޓް' އެވެ. | އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ އޮފް ދަ ޕޮޕޯވަރ. 'viewport' , 'window' , 'scrollParent' , ނުވަތަ HTMLElement ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް) ގެ އަގުތައް ބަލައިގަންނައެވެ . އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ preventOverflow ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
ވަކިވަކި ޕޮޕޯވަރތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް
ވަކިވަކި ޕޮޕޯވަރތަކަށް އޮޕްޝަންތައް ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިންނެވެ.
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ.
އެލިމެންޓް ކަލެކްޝަނަކަށް ޕޮޕޯވަރސް އިނިޝިއަލައިޒް ކުރެއެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ހާމަކޮށްދެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ފޮރުވައެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ޓޮގްލް ކުރެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.popover
ނުވަތަ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
އުނިއިތުރެއްގެ ޕޮޕޮވަރ ފޮރުވައި ހަލާކުކޮށްލައެވެ. ޑެލިގޭޝަން ބޭނުންކުރާ ޕޮޕޯވަރސް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector
) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ އަށް ދައްކާލެވޭނެ ޤާބިލުކަން ލިބިދެއެވެ. ޕޮޕޯވަރސް ޑިފޯލްޓްކޮށް އެނެބަލް ކުރެވިފައި ހުރެއެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ދައްކާލުމުގެ ޤާބިލުކަން ނައްތާލައެވެ. ޕޮޕޯވަރ ދައްކާލެވޭނީ އަލުން އެނެބަލް ކޮށްގެންނެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ދައްކާ ނުވަތަ ފޮރުވުމުގެ ޤާބިލުކަން ޓޮގްލް ކުރެއެވެ.
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ގެ މަޤާމު އަޕްޑޭޓް ކުރެއެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޕޮޕޯވަރ އެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ފޮރުވާ.ބީ.އެސް.ޕޮޕޯވަރ | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
އިންސަރޓް ކޮށްފައި.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.popover އިވެންޓަށްފަހު ޕޮޕޯވަރ ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައި އޮތުމުންނެވެ. |