ፖፖቨርስ
በiOS ውስጥ እንዳሉት የBootstrap popovers በጣቢያዎ ላይ ወዳለ ማንኛውም አካል ለመጨመር ሰነዶች እና ምሳሌዎች።
አጠቃላይ እይታ
የፖፖቨር ፕለጊን ሲጠቀሙ ማወቅ ያለባቸው ነገሮች፡-
- ፖፖቨር ለቦታ አቀማመጥ በ 3 ኛ ወገን ቤተ-መጽሐፍት ፖፐር ላይ ይተማመናሉ ።
bootstrap.bundle.min.js
bootstrap.bundle.js
- ፖፖቨርስ እንደ ጥገኝነት የመሳሪያ ቲፕ ፕለጊን ያስፈልገዋል።
- ፖፖቨር በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እርስዎ እራስዎ ማስጀመር አለብዎት ።
- ዜሮ-ርዝመት
title
እናcontent
እሴቶች መቼም ብቅ-ባይ አያሳዩም። container: 'body'
ይበልጥ ውስብስብ በሆኑ ክፍሎች (እንደ የግቤት ቡድኖቻችን፣ የአዝራር ቡድኖች፣ ወዘተ) ያሉ ችግሮችን ከመስጠት ለመዳን ይግለጹ ።- በተደበቁ አካላት ላይ ብቅ-ባይ ማነሳሳት አይሰራም።
- ፖፖቨርስ
.disabled
ወይምdisabled
ኤለመንቶች በአንድ ጥቅል አካል ላይ መቀስቀስ አለባቸው። - በበርካታ መስመሮች ላይ የሚጠቅሱ መልሕቆች ከተነሳ ፖፖዎች በአንደኛ ደረጃ አጠቃላይ ስፋት መካከል ማዕከላዊ ይሆናል. ይህንን ባህሪ ለማስወገድ
.text-nowrap
በእርስዎ s ላይ ይጠቀሙ ።<a>
- ፖፖቨር ተጓዳኝ ክፍሎቻቸው ከDOM ከመወገዳቸው በፊት መደበቅ አለባቸው።
- በጥላ DOM ውስጥ ላለ አካል ምስጋና ይግባው ፖፖቨርስ ሊነቃ ይችላል።
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>
አራት አቅጣጫዎች
አራት አማራጮች አሉ፡ ከላይ፣ በቀኝ፣ ከታች እና በግራ የተሰለፉ። በ RTL ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ።
<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>
ዎች) ባህሪውን በማከል ትኩረት እንዲደረግ ማድረግ ቢቻልም tabindex="0"
፣ ይህ ምናልባት ለቁልፍ ሰሌዳ ተጠቃሚዎች መስተጋብራዊ ባልሆኑ አካላት ላይ የሚያበሳጭ እና ግራ የሚያጋቡ የትር ማቆሚያዎችን ይጨምራል፣ እና አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች በአሁኑ ጊዜ በዚህ ሁኔታ ውስጥ የፖፖቨርን ይዘት አያስተዋውቁም። . በተጨማሪም፣ hover
ለፖፖቨርዎ ቀስቅሴ ብቻ አትመኑ፣ ይህ ደግሞ ለቁልፍ ሰሌዳ ተጠቃሚዎች መቀስቀስ እንዳይችሉ ያደርጋቸዋል።
የበለጸገ፣ የተዋቀረ HTML በፖፖቨርስ ውስጥ ከአማራጩ ጋር ማስገባት ቢችሉም፣ html
ከመጠን በላይ የሆነ ይዘት ከመጨመር እንዲቆጠቡ አበክረን እንመክራለን። በአሁኑ ጊዜ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ማለት ነው aria-describedby
. በዚህ ምክንያት የፖፖቨር ይዘቱ ሙሉ በሙሉ ለረዳት ቴክኖሎጂ ተጠቃሚዎች እንደ አንድ ረጅም እና ያልተቋረጠ ዥረት ይገለጻል።
በተጨማሪም፣ በፖፖቨርዎ ውስጥ በይነተገናኝ መቆጣጠሪያዎችን (እንደ ቅጽ ኤለመንቶች ወይም አገናኞች ያሉ) ማካተት ቢቻልም (እነዚህን ንጥረ ነገሮች ወደተፈቀደላቸው allowList
ባህሪያት እና መለያዎች በመጨመር) በአሁኑ ጊዜ ብቅ-ባይ የቁልፍ ሰሌዳ የትኩረት ቅደም ተከተልን እንደማያስተዳድር ይወቁ። የቁልፍ ሰሌዳ ተጠቃሚ ፖፖቨርን ሲከፍት ትኩረቱ ቀስቅሴው አካል ላይ ነው፣ እና ፖፖቨር አብዛኛውን ጊዜ በሰነዱ መዋቅር ውስጥ ያለውን ቀስቅሴ ስለማይከተል፣ ወደፊት ለመራመዱ/ለመጫኑ ምንም ዋስትና የለም።TABየቁልፍ ሰሌዳ ተጠቃሚን ራሱ ወደ ፖፖቨር ያንቀሳቅሰዋል። በአጭሩ፣ በቀላሉ በይነተገናኝ መቆጣጠሪያዎችን ወደ ፖፖቨር ማከል እነዚህ መቆጣጠሪያዎች ለቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂዎች ተጠቃሚዎች የማይደረስ/የማይጠቀሙ ያደርጋቸዋል ወይም ቢያንስ አመክንዮአዊ ያልሆነ አጠቃላይ የትኩረት ቅደም ተከተል እንዲፈጠር ያደርጋል። በእነዚህ አጋጣሚዎች በምትኩ የሞዳል ንግግር መጠቀም ያስቡበት።
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-animation=""
። አማራጮችን በውሂብ ባሕሪያት በሚያልፉበት ጊዜ የአማራጭ ስም የጉዳይ አይነትን ከካሜል ኬዝ ወደ kebab-ኬዝ መቀየርዎን ያረጋግጡ። ለምሳሌ ከመጠቀም ይልቅ data-bs-customClass="beautifier"
ይጠቀሙ data-bs-custom-class="beautifier"
።
sanitize
እና
sanitizeFn
አማራጮች
allowList
የውሂብ ባህሪያትን በመጠቀም ሊቀርቡ እንደማይችሉ ልብ ይበሉ።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
animation |
ቡሊያን | true |
የ CSS ደብዝዝ ሽግግር ወደ ፖፖቨር ይተግብሩ |
container |
ሕብረቁምፊ | ኤለመንት | የውሸት | false |
ፖፖውን ከአንድ የተወሰነ አካል ጋር ያያይዘዋል። ምሳሌ |
content |
ሕብረቁምፊ | ኤለመንት | ተግባር | '' |
ባህሪው ከሌለ ነባሪ የይዘት ዋጋ አንድ ተግባር ከተሰጠ |
delay |
ቁጥር | ነገር | 0 |
Pooover (MSON) መደበቅ እና መደበቅ - ለትላልቅ የመርከብ አይነት አይተገበርም ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የእቃው መዋቅር የሚከተለው ነው- |
html |
ቡሊያን | false |
ኤችቲኤምኤልን ወደ ፖፖቨር አስገባ። ውሸት ከሆነ innerText ንብረቱ ወደ DOM ይዘት ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ። |
placement |
ሕብረቁምፊ | ተግባር | 'right' |
ፖፖቨርን እንዴት ማስቀመጥ እንደሚቻል - ራስ-ሰር | ከላይ | የታችኛው | ግራ | ቀኝ. አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ በፖፖቨር DOM ኖድ እንደ መጀመሪያው ክርክር እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። |
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' |
የፖፖቨር የትርፍ ፍሰት ገደብ ወሰን (የሚመለከተው ለፖፐር ከመጠን በላይ ፍሰት መቀየሪያን ብቻ ነው)። በነባሪነት 'clippingParents' HTMLElement ማጣቀሻ (በጃቫስክሪፕት በኩል ብቻ) ነው እና መቀበል ይችላል። ለበለጠ መረጃ የፖፐርን ማወቂያ ከመጠን በላይ ፍሰት ሰነዶችን ይመልከቱ ። |
customClass |
ሕብረቁምፊ | ተግባር | '' |
በሚታይበት ጊዜ ክፍሎችን ወደ ፖፖቨር ያክሉ። እነዚህ ክፍሎች በአብነት ውስጥ ከተገለጹት ክፍሎች በተጨማሪ እንደሚጨመሩ ልብ ይበሉ። ብዙ ክፍሎችን ለመጨመር በክፍተቶች ይለያቸዋል እንዲሁም ተጨማሪ የክፍል ስሞችን የያዘ ነጠላ ሕብረቁምፊ መመለስ ያለበትን ተግባር ማለፍ ይችላሉ። |
sanitize |
ቡሊያን | true |
ንጽህናን አንቃ ወይም አሰናክል። ከነቃ 'template' እና አማራጮች ይጸዳሉ 'content' ። በእኛ ጃቫስክሪፕት ሰነድ ውስጥ የንፅህና መጠበቂያ ክፍልን'title' ይመልከቱ ። |
allowList |
ነገር | ነባሪ እሴት | የተፈቀዱ ባህሪያትን እና መለያዎችን የያዘ ነገር |
sanitizeFn |
ባዶ | ተግባር | null |
እዚህ የራስዎን የንፅህና አገልግሎት መስጠት ይችላሉ. የንፅህና አጠባበቅን ለማከናወን የተለየ ቤተ-መጽሐፍት ለመጠቀም ከመረጡ ይህ ጠቃሚ ሊሆን ይችላል። |
offset |
ድርድር | ሕብረቁምፊ | ተግባር | [0, 8] |
ከዒላማው አንጻር የፖፖቨር ማካካሻ። በመረጃ ባህሪያት ውስጥ ሕብረቁምፊን በነጠላ ሰረዝ ከተለያዩ እሴቶች ማለፍ ትችላለህ፡- አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ እንደ መጀመሪያው መከራከሪያ ፖፐር አቀማመጥ, ማጣቀሻ እና ፖፐር rects ከያዘ ነገር ጋር ይባላል. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ተግባሩ ሁለት ቁጥሮች ያለው ድርድር መመለስ አለበት ። ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ። |
popperConfig |
ባዶ | እቃ | ተግባር | null |
የ Bootstrapን ነባሪ የፖፕ አወቃቀሩን ለመቀየር የፖፐርን አወቃቀር ይመልከቱ ። አንድ ተግባር የፖፐር ውቅረትን ለመፍጠር ጥቅም ላይ ሲውል የቡትስትራፕ ነባሪ የፖፐር ውቅረት ካለው ዕቃ ጋር ይጠራል። ነባሪውን ከራስዎ ውቅር ጋር እንዲጠቀሙ እና እንዲያዋህዱ ያግዝዎታል። ተግባሩ ለፖፐር የውቅር ነገር መመለስ አለበት። |
ለግለሰብ ብቅ-ባዮች የውሂብ ባህሪዎች
ከላይ እንደተገለፀው ለግለሰብ ብቅ-ባይ አማራጮች በአማራጭ የውሂብ ባህሪያትን በመጠቀም ሊገለጹ ይችላሉ።
ተግባርን በመጠቀም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()
ማስወገድ
የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል እና ያጠፋል (በDOM ኤለመንት ላይ የተከማቸ ውሂብን ያስወግዳል)። ውክልና የሚጠቀሙ ፖፖቨር (አማራጩን በመጠቀም የተፈጠሩ ) selector
በተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።
myPopover.dispose()
ማንቃት
የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ችሎታን ይሰጣል። ፖፖቨር በነባሪነት ነቅቷል።
myPopover.enable()
አሰናክል
የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ችሎታን ያስወግዳል። ብቅ-ባይ መታየት የሚቻለው እንደገና ከነቃ ብቻ ነው።
myPopover.disable()
መቀያየር ነቅቷል።
የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ወይም የመደበቅ ችሎታን ይቀያይራል።
myPopover.toggleEnabled()
አዘምን
የአንድ ንጥረ ነገር ብቅ-ባይ ቦታን ያዘምናል።
myPopover.update()
getInstance
ከDOM ኤለመንት ጋር የተገናኘውን ብቅ-ባይ ምሳሌ እንድታገኙ የሚያስችል የማይንቀሳቀስ ዘዴ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
ከDOM ኤለመንት ጋር የተገናኘውን ብቅ-ባይ ምሳሌ ለማግኘት ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
ክስተቶች
የክስተት አይነት | መግለጫ |
---|---|
አሳይ.bs.popover | show የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
የሚታየው.bs.popover | ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። |
ደብቅ.bs.popover | hide የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
የተደበቀ.bs.popover | ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ከተጠቃሚው ተደብቆ ሲያልቅ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። |
ገብቷል.bs.popover | show.bs.popover የፖፖቨር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል። |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})