ޕޮޕޯވަރސް އެވެ
އައިއޯއެސް އިން ފެންނަ ފަދަ ބޫޓްސްޓްރެޕް ޕޮޕޯވަރސް ސައިޓްގައި ހުންނަ ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް.
އޯވަރވިއު
ޕޮޕޯވަރ ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:
- ޕޮޕޯވަރސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ ޕޮޕަރ އަށެވެ. ޕޮޕޯވަރސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.js ހިމަނަން ނުވަތަ ޕޮޕަރ ހިމެނޭ
bootstrap.bundle.min.js
/ ބޭނުން ކުރަން ޖެހެއެވެ!bootstrap.bundle.js
- ޕޮޕޯވަރސް އަށް ޑިޕެންޑެންސީއެއްގެ ގޮތުގައި ޓޫލްޓިޕް ޕްލަގިން ބޭނުންވެއެވެ.
- ޕޮޕޯވަރސް އަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗެއް ކަމުން އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
- ޒީރޯ-ލެންގްސް
title
އާއިcontent
ވެލިއުސް އިން ދުވަހަކުވެސް ޕޮޕޯވަރެއް ނުފެންނާނެއެވެ. container: 'body'
މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކުގައި (އަޅުގަނޑުމެންގެ އިންޕުޓް ގްރޫޕްތަކާއި، ބަޓަން ގްރޫޕްތައް ފަދަ) ރެންޑަރިންގ މައްސަލަތަކުން ސަލާމަތްވުމަށް ކަނޑައަޅާށެވެ .- ފޮރުވިފައިވާ އުފެއްދުންތަކުގެ މައްޗަށް ޕޮޕޯވަރސް ޓްރިގަރ ކުރުމުން ފައިދާއެއް ނުވާނެއެވެ.
- ޕޮޕޯވަރސް ފޯރ
.disabled
ނުވަތަdisabled
އެލިމެންޓްސް ޓްރިގަރ ކުރަން ޖެހެނީ ރެޕަރ އެލިމެންޓެއްގެ މައްޗަށެވެ. - އެތައް ރޮނގެއް ހުރަސްކޮށް އޮޅާލާފައިވާ އެންކަރުތަކުން ޓްރިގަރ ކުރާއިރު، ޕޮޕޯވަރސް ހުންނާނީ އެންކަރުތަކުގެ ޖުމްލަ ފުޅާމިނުގެ މެދުގައި މެދުވެރިކޮށެވެ. މި ސުލޫކުން ސަލާމަތްވުމަށްޓަކައި
.text-nowrap
އޮން ޔޫއާރ ސް ބޭނުން ކުރާށެވެ .<a>
- ޕޮޕޯވަރސް ފޮރުވަން ޖެހެނީ އެތަކެތީގެ އެލިމެންޓްތައް ޑީއޯއެމް އިން ނައްތާލުމުގެ ކުރިންނެވެ.
- ޕޮޕޯވަރސް ޓްރިގަރ ކުރެވޭނީ ޝެޑޯ ޑޮމް އެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓެއްގެ ސަބަބުންނެވެ.
prefers-reduced-motion
މީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ
.
ބައެއް މިސާލުތަކާއެކު ޕޮޕޯވަރސް މަސައްކަތްކުރާ ގޮތް ބަލާލުމަށް ކިޔަމުން ގެންދާށެވެ.
މިސާލު: ހުރިހާ ތަނެއްގައި ޕޮޕޯވަރސް އެނެބަލް ކުރުން
ޕޭޖެއްގައި ހުންނަ ހުރިހާ ޕޮޕޯވަރސް އެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޕޮޕޯވަރސް data-bs-toggle
އެޓްރިބިއުޓް އަށް ބަލައިގެން ހޮވުމެވެ:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
މިސާލު: container
އިޚްތިޔާރު ބޭނުންކުރުން
ޕޮޕޯވަރަކަށް ހުރަސްއެޅޭ ބައެއް ސްޓައިލްތައް ބެލެނިވެރި އެލިމެންޓެއްގައި ހުންނައިރު، container
އޭގެ ބަދަލުގައި އެ އެލިމެންޓުގެ ތެރޭގައި ޕޮޕޯވަރގެ އެޗްޓީއެމްއެލް ފެންނާނެ ގޮތަށް ކަސްޓަމެއް ކަނޑައަޅަން ބޭނުންވާނެއެވެ.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
މިސާލު
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
ހަތަރު ދިމާލަށެވެ
ހަތަރު ގޮތެއް ލިބެން ހުރެއެވެ: މަތީ، ވާތް، ތިރީ، އަދި ކަނާތް ފަރާތް އެއްވަރުކޮށްފައި. އާރުޓީއެލްގައި ބޫޓްސްޓްރެޕް ބޭނުންކުރާއިރު މިސްރާބުތައް ލޯގަނޑުން ފެނެއެވެ.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
ދެން ކްލިކް ކުރުމުން ޑިސްމިސް ކުރާށެވެ
focus
ޓޮގްލް އެލިމެންޓަށްވުރެ ތަފާތު އެލިމެންޓެއް ޔޫޒަރ ދެން ކްލިކް ކުރުމުން ޕޮޕޯވަރސް ޑިސްމިސް ކުރުމަށް ޓްރިގަރ ބޭނުން ކުރާށެވެ.
ޑިސްމިސް-އޮން-ނެކްސްޓް-ކްލިކް އަށް ވަކި މާކަޕް އެއް ބޭނުންވެއެވެ
ރަނގަޅަށް ކްރޮސް ބްރައުޒާ އަދި ކްރޮސް ޕްލެޓްފޯމް ސުލޫކަށްޓަކައި ޓެގް ބޭނުން <a>
ނުކުރަން ޖެހޭނީ ޓެގް ކަމަށާއި، އަދި އެޓްރިބިއުޓެއް <button>
ވެސް ހިމަނަން ޖެހޭނެ ކަމަށެވެ .tabindex
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
ނުކުޅެދުންތެރިކަން ހުންނަ އެލިމެންޓްތަކެވެ
އެޓްރިބިއުޓް އެކުލެވޭ އެލިމެންޓްތަކަކީ disabled
އިންޓަރެކްޓިވް އެއްޗެހި ނޫން، މާނައަކީ ޕޮޕޯވަރ (ނުވަތަ ޓޫލްޓިޕް) އެއް ޓްރިގަރ ކުރުމަށް ޔޫޒަރުންނަށް ހޯވަރ ނުވަތަ ކްލިކް ނުކުރެވޭނެއެވެ. ވޯކްއަރައުންޑެއްގެ ގޮތުގައި، ތިބާ ބޭނުންވާނީ ރެޕަރަކުން <div>
ނުވަތަ <span>
, އެންމެ ރަނގަޅީ ކީބޯޑަށް ފޯކަސް ކުރެވޭ ގޮތަށް ހަދާފައިވާ ޕޮޕޯވަރ އިން ޓްރިގަރ ކުރަން tabindex="0"
.
ނުކުޅެދުންތެރިކަން ހުންނަ ޕޮޕޯވަރ ޓްރިގަރސް އަށް، ނުކުޅެދުންތެރިކަން ހުންނަ އެލިމެންޓަކަށް ކްލިކްdata-bs-trigger="hover focus"
ކުރާނެ ކަމަށް ހީނުކުރާތީ، ޕޮޕޯވަރ ތިބާގެ ޔޫޒަރުންނަށް ވަގުތުން ވިޝުއަލް ފީޑްބެކް ފެންނާނެ ގޮތަށް ވެސް އިސްކަންދެވިދާނެއެވެ .
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
ސާސް އެވެ
ވެރިއޭބަލްސް އެވެ
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
ބޭނުން ކުރުން
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޕޮޕޯވަރސް އެނެބަލް ކުރުން:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
ޕޮޕޯވަރސް ކީބޯޑާއި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ފައިދާހުރި ގޮތަކަށް ހެދުން
ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް ތިބާގެ ޕޮޕޯވަރސް އެކްޓިވޭޓް ކުރުމުގެ ހުއްދަ ދިނުމަށްޓަކައި، ހަމައެކަނި ސަގާފީ ގޮތުން ކީބޯޑަށް ފޯކަސް ކުރެވޭ އަދި އިންޓަރެކްޓިވް (ލިންކް ނުވަތަ ފޯމް ކޮންޓްރޯލް ފަދަ) އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް އެޑް ކުރަންވާނެއެވެ. އެޓްރިބިއުޓް އިތުރުކޮށްގެން އަމިއްލައަށް އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ( <span>
s ފަދަ) ފޯކަސް ކުރެވޭ ގޮތަށް ހެދިދާނެ ނަމަވެސް tabindex="0"
، މިއީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް ނޮން އިންޓަރެކްޓިވް އެލިމެންޓްތަކުގައި އުނދަގޫ އަދި އޮޅުން ބޮޅުން ބޮޑު ޓެބް ސްޓޮޕްތައް އިތުރުވާނެ ކަމެކެވެ . މީގެ އިތުރުން، ތިބާގެ ޕޮޕޯވަރސް އަށް ޓްރިގަރ އެއްގެ ގޮތުގައި ހަމައެކަނި ބަރޯސާ ނުވާށެވެ hover
، މިއީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް އެ ޓްރިގަރ ކުރުމަކީ ކުރެވޭނެ ކަމެއް ނޫން ކަމުގައި ވެގެންދާނެއެވެ.
މި އިޚްތިޔާރާއެކު ޕޮޕޯވަރސް އަށް ރިޗް، ސްޓްރަކްޗަރޑް އެޗްޓީއެމްއެލް އިންސަރޓް ކުރެވޭއިރު، html
މާގިނައިން ކޮންޓެންޓް އިތުރުކުރުމުން ދުރުހެލިވުމަށް އަޅުގަނޑުމެން ވަރަށް ބޮޑަށް ލަފާދެމެވެ. މިހާރު ޕޮޕޯވަރސް މަސައްކަތްކުރާ ގޮތަކީ، އެއްފަހަރު ދައްކާލުމުން، އެތަކެތީގެ ކޮންޓެންޓް aria-describedby
އެޓްރިބިއުޓް އާއި އެކު ޓްރިގަރ އެލިމެންޓާ ގުޅިފައި އޮތުމެވެ. ނަތީޖާއެއްގެ ގޮތުން ޕޮޕޯވަރގެ މުޅި ކޮންޓެންޓް އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް އިއުލާން ކުރެވޭނީ އެއް ދިގު، މެދުކެނޑުމެއްނެތި ސްޓްރީމްއެއްގެ ގޮތުގަ އެވެ.
މީގެ އިތުރުން، ތިބާގެ ޕޮޕޯވަރގައި އިންޓަރެކްޓިވް ކޮންޓްރޯލްތައް (ފޯމް އެލިމެންޓްސް ނުވަތަ ލިންކްސް ފަދަ) ވެސް ހިމަނާލެވޭނެ ނަމަވެސް (މި އެލިމެންޓްތައް allowList
ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތަކުގެ ތެރެއަށް އިތުރުކޮށްގެން)، މިވަގުތު ޕޮޕޯވަރ އިން ކީބޯޑް ފޯކަސް އޯޑަރ މެނޭޖް ނުކުރާކަން ސަމާލުކަން ދޭށެވެ. ކީބޯޑް ބޭނުންކުރާ މީހަކު ޕޮޕޯވަރ ހުޅުވާއިރު، ފޯކަސް ޓްރިގަރ ކުރާ އެލިމެންޓަށް ދެމިއޮންނައިރު، އާންމުކޮށް ޕޮޕޯވަރ ޑޮކިއުމަންޓްގެ ސްޓްރަކްޗަރގައި ވަގުތުން ޓްރިގަރ އަށް ތަބާނުވާތީ، ކުރިއަށް/ފިއްތާ ކަމުގެ އެއްވެސް ޔަޤީންކަމެއް ނެތެވެTABކީބޯޑް ބޭނުންކުރާ މީހަކު ޚުދު ޕޮޕޯވަރ އަށް ބަދަލުކުރާނެއެވެ. ކުރުކޮށް ބުނާނަމަ، ހަމައެކަނި ޕޮޕޯވަރަކަށް އިންޓަރެކްޓިވް ކޮންޓްރޯލްތައް އިތުރުކުރުމަކީ، ކީބޯޑް ބޭނުންކުރާ މީހުންނާއި އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ މީހުންނަށް މި ކޮންޓްރޯލްތައް ނުފޯރާ/ބޭނުން ނުކުރެވޭނެ ގޮތް ހެދުމާއި، ނުވަތަ އެންމެ ކުޑަމިނުން އޯވަރޯލް ފޯކަސް އޯޑަރެއް ލޮޖިކަލް ނޫން ގޮތަކަށް ހެދުމުގެ ފުރުސަތު ބޮޑެވެ. މި ހާލަތްތަކުގައި އޭގެ ބަދަލުގައި މޮޑަލް ޑައިލޮގެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ.
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-bs-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-bs-animation=""
. ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރާއިރު އޮޕްޝަން ނަމުގެ ކޭސް ޓައިޕް camelCase އިން kebab-case އަށް ބަދަލުކުރުން ޔަގީންކުރައްވާށެވެ. މިސާލަކަށް ބޭނުން ކުރުމުގެ ބަދަލުގައި ބޭނުން data-bs-customClass="beautifier"
ކުރާށެވެ data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, އަދި
allowList
އޮޕްޝަންތައް ސަޕްލައި ނުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
animation |
ބޫލިއަން އެވެ | true |
ޕޮޕޯވަރ އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ |
container |
ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން | false |
ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެ. މިސާލު: |
content |
ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
delay |
ނަންބަރު | އެއްޗެއް | 0 |
ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ އެއްޗެއްގެ އޮނިގަނޑަކީ: |
html |
ބޫލިއަން އެވެ | false |
ޕޮޕޯވަރ އަށް އެޗްޓީއެމްއެލް ޖައްސާށެވެ. ދޮގުނަމަ، innerText ޕްރޮޕަޓީ ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ. |
placement |
ސްޓްރިންގް | ފަންކްޝަން | 'right' |
ޕޮޕޯވަރ ޕޮޒިޝަން ކުރާނެ ގޮތް - އޮޓޯ | މަތީގައި | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް. ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޕޮޕޯވަރ ރީއޮރިއެންޓް ކުރާނެ އެއްޗެކެވެ ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެ ފަންކްޝަނަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕޯވަރ ޑީއޯއެމް ނޯޑް އަދި އޭގެ ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެންނެވެ. ކޮންޓެކްސްޓް |
selector |
ސްޓްރިންގް | ރަނގަޅުނޫން | false |
ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޕޮޕޯވަރ އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޕޮޕޯވަރސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ . |
template |
ސްޓްރިންގ | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ޕޮޕޯވަރ އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބެސްޓް ކުރާށެވެ. އެ ޕޮޕޯވަރސް އެ ޕޮޕޯވަރސް
އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި |
title |
ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން | '' |
ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ |
trigger |
ސްޓްރިންގ | 'click' |
ޕޮޕޯވަރ ޓްރިގަރ ވާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manual އެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ. |
fallbackPlacements |
އެރޭ އެވެ | ['top', 'right', 'bottom', 'left'] |
އެރޭގައި ޕްލޭސްމަންޓްތަކުގެ ލިސްޓެއް ފޯރުކޮށްދީގެން (އިސްކަންދޭ ތަރުތީބުން) ފޯލްބެކް ޕްލޭސްމަންޓްތައް މާނަކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ |
boundary |
ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް | 'clippingParents' |
ޕޮޕޯވަރގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ (އެޕްލައި ކުރެވެނީ ހަމައެކަނި ޕޮޕަރގެ preventOverflow މޮޑިފައިޓަރަށް). ބައި ޑިފޯލްޓް އެއީ 'clippingParents' އަދި ގަބޫލުކުރެވޭނީ އެޗްޓީއެމްއެލްއެލިމެންޓް ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް) އެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ޑިޓެކްޓްއޮވަރފްލޯ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
customClass |
ސްޓްރިންގް | ފަންކްޝަން | '' |
ޕޮޕޯވަރ ދައްކާއިރު ކްލާސްތައް އިތުރުކޮށްލާށެވެ. މި ކްލާސްތައް ޓެމްޕްލޭޓްގައި ކަނޑައެޅިފައިވާ އެއްވެސް ކްލާހެއްގެ އިތުރުން އިތުރުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ. އެތައް ކްލާހެއް އިތުރުކުރުމަށްޓަކައި، އެ ކްލާސްތައް ވަކިކޮށް ޖާގަ ދީގެން: އަދި އިތުރު ކްލާސް ނަންތައް ހިމެނޭ އެއް ސްޓްރިންގް ރިޓަރން ކުރަންޖެހޭ ފަންކްޝަނެއް ވެސް ޕާސް ކުރެވިދާނެއެވެ. |
sanitize |
ބޫލިއަން އެވެ | true |
ސެނިޓައިޒޭޝަން އެނެބަލް ނުވަތަ ޑިސެބަލް ކުރުން. If activated 'template' , 'content' އަދި 'title' އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެވޭނެއެވެ. އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަންގައިވާ ސެނިޓައިޒާ ބައި ބައްލަވާށެވެ . |
allowList |
އެއްޗެއް | ޑިފޯލްޓް ވެލިއު | ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތައް ހިމެނޭ އެއްޗެއް |
sanitizeFn |
null | ފަންކްޝަން | null |
މިތަނުން އަމިއްލައަށް ސެނިޓައިޒް ފަންކްޝަން ސަޕްލައި ކުރެވޭނެއެވެ. މިއީ ސެނިޓައިޒޭޝަން ކުރުމަށް ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭނަމަ ބޭނުންތެރި ކަމަކަށް ވެދާނެއެވެ. |
offset |
އެރޭ | ސްޓްރިންގް | ފަންކްޝަން | [0, 8] |
އޭގެ އަމާޒަށް ނިސްބަތްކޮށް ޕޮޕޯވަރ އޮފްސެޓް ކުރުން. ކޮމާ ވަކިކޮށްފައިވާ އަގުތަކާއެކު ޑޭޓާ އެޓްރިބިއުޓްތަކުގައި ސްޓްރިންގއެއް ޕާސް ކުރެވިދާނެ ފަދައިން: އޮފްސެޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެއަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕަރ ޕްލޭސްމަންޓާއި، ރެފަރެންސް، އަދި ޕޮޕަރ ރެކްޓްސް ހިމެނޭ އޮބްޖެކްޓަކުންނެވެ. ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ފާސްކުރެއެވެ. ފަންކްޝަނުން ދެ ނަންބަރެއް ހިމެނޭ އެރޭއެއް ރިޓަރން ކުރަން ޖެހެއެވެ: . އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
popperConfig |
null | އެއްޗެއް | ފަންކްޝަން | null |
ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ޕޮޕަރ ކޮންފިގް ބަދަލުކުރުމަށްޓަކައި، ޕޮޕަރގެ ކޮންފިގްރޭޝަން ބައްލަވާށެވެ . ޕޮޕަރ ކޮންފިގްރޭޝަން އުފެއްދުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެއަށް ގޮވަނީ ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ޕޮޕަރ ކޮންފިގްރޭޝަން ހިމެނޭ އޮބްޖެކްޓަކުންނެވެ. އެއީ ޑިފޯލްޓް ބޭނުންކޮށް އަމިއްލަ ކޮންފިގްރޭޝަން އާއި އެއްކޮށްލުމަށް އެހީތެރިވެދޭ އެއްޗެކެވެ. ފަންކްޝަން އިން ޕޮޕަރ އަށް ކޮންފިގްރޭޝަން އޮބްޖެކްޓެއް ރިޓަރން ކުރަން ޖެހެއެވެ. |
ވަކިވަކި ޕޮޕޯވަރތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް
ވަކިވަކި ޕޮޕޯވަރތަކަށް އޮޕްޝަންތައް ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިންނެވެ.
ފަންކްޝަން ބޭނުންކޮށްގެން ބޭނުންކޮށްގެންpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ގޮތްތައް
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .
ދެއްކުން
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ހާމަކޮށްދެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ. ސުރުޚީއާއި ކޮންޓެންޓް ވެސް ސުމެއް ދިގުމިނުގައި ހުންނަ ޕޮޕޯވަރސް ދުވަހަކުވެސް ނުދައްކާނެއެވެ.
myPopover.show()
ފޮރުވުން
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ފޮރުވައެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
myPopover.hide()
ޓޮގްލް ކޮށްލާށެވެ
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ޓޮގްލް ކުރެއެވެ. ޕޮޕޯވަރ ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.popover
ނުވަތަ hidden.bs.popover
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޕޮޕޯވަރ ގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމަށް ބެލެވެއެވެ.
myPopover.toggle()
ނައްތާލުން
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ފޮރުވައި ނައްތާލައެވެ (ޑޮމް އެލިމެންޓުގައި ރައްކާކޮށްފައިވާ ޑޭޓާ ނައްތާލައެވެ). ޑެލިގޭޝަން ބޭނުންކުރާ ޕޮޕޯވަރސް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector
) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.
myPopover.dispose()
މަގުފަހި
އެލިމެންޓެއްގެ ޕޮޕޯވަރ އަށް ދައްކާލެވޭނެ ޤާބިލުކަން ލިބިދެއެވެ. ޕޮޕޯވަރސް ޑިފޯލްޓްކޮށް އެނެބަލް ކުރެވިފައި ހުރެއެވެ.
myPopover.enable()
ޑިޒޭބަލް
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ދައްކާލުމުގެ ޤާބިލުކަން ނައްތާލައެވެ. ޕޮޕޯވަރ ދައްކާލެވޭނީ އަލުން އެނެބަލް ކޮށްގެންނެވެ.
myPopover.disable()
ޓޮގްލްއެނެބަލްޑް
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ދައްކާ ނުވަތަ ފޮރުވުމުގެ ޤާބިލުކަން ޓޮގްލް ކުރެއެވެ.
myPopover.toggleEnabled()
އަޕްޑޭޓް
އެލިމެންޓެއްގެ ޕޮޕޯވަރ ގެ މަޤާމު އަޕްޑޭޓް ކުރެއެވެ.
myPopover.update()
ގެޓްއިންސްޓޭންސް
ޑީއޯއެމް އެލިމެންޓަކާ ގުޅިފައިވާ ޕޮޕޯވަރ އިންސްޓޭންސް ހޯދުމަށް ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
ގެޓްއޯރކްރިއޭޓްއިންސްޓޭންސް
ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ ޕޮޕޯވަރ އިންސްޓޭންސް ހޯދުމަށް، ނުވަތަ އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތެއްގައި އާ އިންސްޓޭންސްއެއް އުފެއްދުމުގެ ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
އިވެންޓްސް
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޕޮޕޯވަރ އެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
ފޮރުވާ.ބީ.އެސް.ޕޮޕޯވަރ | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
އިންސަރޓް ކޮށްފައި.bs.popover | މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.popover އިވެންޓަށްފަހު ޕޮޕޯވަރ ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައި އޮތުމުންނެވެ. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})