in English

Popovers

تور بېتىڭىزدىكى ھەر قانداق ئېلېمېنتقا iOS دىكىگە ئوخشاش Bootstrap پوپايكىسىنى قوشۇشنىڭ ھۆججەتلىرى ۋە مىساللىرى.

ئومۇمىي چۈشەنچە

قاڭقىش قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:

  • پوپلار ئورۇن بەلگىلەش ئۈچۈن 3-تەرەپ كۇتۇپخانىسى Popper غا تايىنىدۇ . Bootstrap.js دىن بۇرۇن popper.min.js نى ئۆز ئىچىگە ئېلىشىڭىز ياكى پوپايكىلارنىڭ ئىشلىشى ئۈچۈن Popper نى ئۆز ئىچىگە ئالغان bootstrap.bundle.min.jsئىشلىتىڭ .bootstrap.bundle.js
  • Popovers قورال قورال قىستۇرمىسىنى بېقىنىش سۈپىتىدە تەلەپ قىلىدۇ.
  • ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .
  • پوپايكىلار ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .
  • نۆل ئۇزۇنلۇق titleۋە contentقىممەت ھەرگىزمۇ مودا ئېقىمىنى كۆرسەتمەيدۇ.
  • تېخىمۇ مۇرەككەپ زاپچاسلاردا مەسىلە پەيدا قىلىشتىن ساقلىنىشنى بەلگىلەڭ container: 'body'(بىزنىڭ كىرگۈزۈش گۇرۇپپىلىرىمىز ، كۇنۇپكا گۇرۇپپىلىرىمىز دېگەندەك).
  • يوشۇرۇن ئېلېمېنتلارنى قوزغىتىش قوزغاتقۇچ ئىشلىمەيدۇ.
  • ئېلېمېنتلار .disabledياكى disabledئېلېمېنتلار چوقۇم ئورالغان ئېلېمېنتتا قوزغىتىلىشى كېرەك.
  • بىر نەچچە قۇرنى ئوراپ تۇرىدىغان لەڭگەردىن قوزغالغاندا ، لەڭگەرلەر لەڭگەرنىڭ ئومۇمىي كەڭلىكى ئوتتۇرىسىدا مەركەزلىشىدۇ. بۇ ھەرىكەتتىن ساقلىنىش ئۈچۈن s .text-nowrapنى ئىشلىتىڭ .<a>
  • ماس كېلىدىغان ئېلېمېنتلار DOM دىن ئۆچۈرۈلۈشتىن بۇرۇن چوقۇم يوشۇرۇش كېرەك.
  • سايە DOM ئىچىدىكى ئېلېمېنتنىڭ ياردىمىدە پوپايكىلارنى قوزغىتىشقا بولىدۇ.
سۈكۈت بويىچە ، بۇ زاپچاس ئىچىگە قاچىلانغان مەزمۇن تازىلىغۇچ ئىشلىتىدۇ ، ئۇ ئېنىق رۇخسەت قىلىنمىغان HTML ئېلېمېنتلىرىنى چىقىرىپ تاشلايدۇ. تېخىمۇ كۆپ تەپسىلاتلارنى JavaScript ھۆججىتىمىزدىكى تازىلىق بۆلۈمىدىن كۆرۈڭ .
بۇ زاپچاسنىڭ كارتون ئۈنۈمى prefers-reduced-motionمېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ .

پوپايكىلارنىڭ بەزى مىساللار بىلەن قانداق ئىشلەيدىغانلىقىنى داۋاملىق ئوقۇپ بېقىڭ.

مىسال: ھەممە يەردە پوپايكىلارنى قوزغىتىڭ

بارلىق بەتكۈچلەرنى بىر بەتتە باشلاشنىڭ بىر ئۇسۇلى ، ئۇلارنىڭ data-toggleخاسلىقى بويىچە تاللاش:

$(function () {
  $('[data-toggle="popover"]').popover()
})

مىسال: containerتاللاشنى ئىشلىتىش

باش ئېلېمېنتتا مودا ئېقىمىغا دەخلى قىلىدىغان بەزى ئۇسلۇبلار بولغاندا ، ئىختىيارىنى بەلگىلىمەكچى بولىسىز ، containerبۇنداق بولغاندا ئېلېكترونلۇق خەت ساندۇقىنىڭ HTML كۆرۈنۈشى شۇ ئېلېمېنتنىڭ ئىچىدە كۆرۈنىدۇ.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

مىسال

<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>

تۆت يۆنىلىش

تۆت خىل تاللاش بار: ئۈستى ، ئوڭ ، ئاستى ۋە سولغا توغرىلىنىدۇ.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</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>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

چەكلەنگەن ئېلېمېنتلار

خاسلىقى بار ئېلېمېنتلار 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>

ئىشلىتىش

JavaScript ئارقىلىق پوپايكىلارنى قوزغىتىڭ:

$('#example').popover(options)
GPU تېزلىتىش

Popuvers بەزىدە Windows 10 ئۈسكۈنىلىرىدە GPU تېزلىنىشى ۋە ئۆزگەرتىلگەن سىستېما DPI سەۋەبىدىن تۇتۇق كۆرۈنىدۇ. بۇنىڭ v4 دىكى خىزمەت ئۇسۇلى سىزنىڭ مودا ئېقىمىڭىزغا ئېھتىياجلىق بولغاندا GPU تېزلىنىشنى چەكلەش.

تەۋسىيە قىلىنغان تۈزىتىش:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

پوپايكىلارنى كۇنۇپكا تاختىسى ۋە ياردەمچى تېخنىكا ئىشلەتكۈچىلەر ئۈچۈن ئىشلەش

كۇنۇپكا تاختىسىنى ئىشلەتكۈچىلەرنىڭ ئېلېكترونلۇق پروگراممىلىرىڭىزنى قوزغىتىشىغا يول قويۇش ئۈچۈن ، ئۇلارنى پەقەت ئەنئەنىۋى كۇنۇپكا تاختىسى فوكۇسلانغان ۋە ئۆز-ئارا تەسىر كۆرسىتىدىغان HTML ئۇلانمىلىرىغا قوشۇشىڭىز كېرەك (مەسىلەن ئۇلىنىش ياكى شەكىل كونتروللۇقى دېگەندەك). خاسلىقنى قوشۇش ئارقىلىق خالىغان HTML ئېلېمېنتلىرى (مەسىلەن <span>) نى فوكۇس توغرىلىغىلى بولسىمۇ tabindex="0"، ئەمما بۇ كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ئۈچۈن ئۆز-ئارا تەسىر كۆرسىتەلمەيدىغان ئېلېمېنتلارغا كىشىنى بىزار قىلىدىغان ۋە قايمۇقتۇرىدىغان بەتكۈچ توختايدۇ ، نۆۋەتتە كۆپىنچە ياردەمچى تېخنىكىلار بۇ ئەھۋالدا مودا ئېقىمىنىڭ مەزمۇنىنى ئېلان قىلمايدۇ. . بۇنىڭدىن باشقا ، پەقەت مودا ئېقىمىڭىزنىڭ قوزغاتقۇچىسىغىلا تايانماڭ hover، چۈنكى بۇ ئۇلارنىڭ كۇنۇپكا تاختىسى ئىشلەتكۈچىلىرىنى قوزغىتالمايدۇ.

سىز تاللانما ئارقىلىق مول ، قۇرۇلمىلىق HTML قىستۇرسىڭىزمۇ ، htmlئارتۇقچە مەزمۇن قوشۇشتىن ساقلىنىشىڭىزنى تەۋسىيە قىلىمىز. پوپايكىلارنىڭ ھازىرقى خىزمەت ئۇسۇلى شۇكى ، كۆرسىتىلگەندىن كېيىن ، ئۇلارنىڭ مەزمۇنى خاسلىق بىلەن قوزغاتقۇچ ئېلېمېنتىغا باغلىنىدۇ aria-describedby. نەتىجىدە ، مودا ئېقىمىدىكى مەزمۇنلارنىڭ ھەممىسى تېخنىكا ئىشلەتكۈچىلەرگە ئۇزۇن ، ئۈزۈلمەس ئېقىن سۈپىتىدە ياردەم قىلىدىغانلىقى ئېلان قىلىنىدۇ.

بۇنىڭدىن باشقا ، ئۆز-ئارا تەسىر كۆرسىتىدىغان كونتروللارنى (مەسىلەن فورمات ئېلېمېنتى ياكى ئۇلىنىش دېگەندەك) مودا ئېقىمىڭىزغا (بۇ ئېلېمېنتلارنى whiteListياكى رۇخسەت قىلىنغان خاسلىق ۋە خەتكۈچلەرگە قوشۇش ئارقىلىق) ئۆز ئىچىگە ئالسىڭىزمۇ ، شۇنىڭغا دىققەت قىلىڭكى ، نۆۋەتتە مودا ئېقىمى كۇنۇپكا تاختىسىنىڭ فوكۇس تەرتىپىنى باشقۇرمايدۇ. ھەرپتاختىسى ئىشلەتكۈچىلەر مودا ئېقىمىنى ئاچقاندا ، فوكۇس قوزغىتىش ئېلېمېنتىغا مەركەزلىشىدۇ ، پوپايكا ئادەتتە ھۆججەت قۇرۇلمىسىدىكى قوزغاتقۇچقا ئەگىشىپ ماڭمىغاچقا ، ئالغا ئىلگىرىلەش / بېسىشقا كاپالەتلىك قىلغىلى بولمايدۇ.TABكۇنۇپكا تاختىسىدىكى ئىشلەتكۈچىنى popover نىڭ ئۆزىگە يۆتكەيدۇ. قىسقىسى ، مودا ئېقىمىغا ئۆز-ئارا كونترول كونترول قوشسىڭىز ، بۇ كونتروللارنى كونۇپكا تاختىسى ئىشلەتكۈچىلەر ۋە ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكىلى بولمايدىغان ياكى ئىشلەتكىلى بولمايدىغان قىلىپ قويىدۇ ياكى ھېچ بولمىغاندا مەنتىقىسىز ئومۇمىي فوكۇس تەرتىپىنى ھاسىل قىلىشى مۇمكىن. بۇ خىل ئەھۋال ئاستىدا ئۇنىڭ ئورنىغا مودېل دىئالوگ ئىشلىتىشنى ئويلاڭ.

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-animation="".

شۇنىڭغا دىققەت قىلىڭكى ، بىخەتەرلىكنى كۆزدە تۇتۇپ ، sanitizeسانلىق مەلۇمات خاسلىقى ئارقىلىق تاللانمىلارنى تەمىنلىگىلى بولمايدۇ. sanitizeFnwhiteList
ئىسمى تىپ سۈكۈتتىكى چۈشەندۈرۈش
animation boolean true مودا ئېقىمىغا CSS سۇس ئۆتۈشنى ئىشلىتىڭ
قاچا string | element | false false

پوپايكىنى مەلۇم ئېلېمېنتقا قوشىدۇ. مىسال : container: 'body'. بۇ تاللاش ئالاھىدە پايدىلىق بولۇپ ، ئۇ كۆزنەكنىڭ چوڭ-كىچىكلىكىنى قوزغاتقۇچ ئېلېمېنتىغا يېقىن ھۆججەتنىڭ ئېقىمىغا ئورۇنلاشتۇرالايسىز - بۇ كۆزنەكنىڭ چوڭ-كىچىكلىكىدىكى قوزغاتقۇچنىڭ قوزغاتقۇچ ئېلېمېنتىدىن يىراقلاپ كېتىشىنىڭ ئالدىنى ئالىدۇ.

مەزمۇن string | element | function ''

data-contentخاسلىق بولمىسا كۆڭۈلدىكى مەزمۇن قىممىتى .

thisئەگەر بىر فۇنكسىيە بېرىلسە ، ئۇ پايدىلانما ئۇلانغان ئېلېمېنتقا پايدىلىنىش قىممىتى بىلەن چاقىرىلىدۇ .

كېچىكىش سان | ئوبيېكت 0

قاڭقىش (ms) نى كۆرسىتىش ۋە يوشۇرۇش - قولدا قوزغىتىش تىپىغا ماس كەلمەيدۇ

ئەگەر بىر سان تەمىنلەنسە ، يوشۇرۇش / كۆرسىتىشكە كېچىكىش قوللىنىلىدۇ

ئوبيېكت قۇرۇلمىسى:delay: { "show": 500, "hide": 100 }

html boolean false سەكرىمە ئورۇنغا HTML قىستۇرۇڭ. ئەگەر يالغان بولسا ، jQuery نىڭ textئۇسۇلى DOM غا مەزمۇن قىستۇرۇشقا ئىشلىتىلىدۇ. ئەگەر XSS ھۇجۇمىدىن ئەنسىرىسىڭىز تېكىست ئىشلىتىڭ.
ئورۇنلاشتۇرۇش string | function 'right'

پوپايكىنى قانداق ئورۇنلاشتۇرۇش - ئاپتوماتىك | top | ئاستى | left | توغرا.
بەلگىلەنسە ، ئۇ autoھەرىكەتچان ھالەتتە ھەرىكەتچان يۆنىلىشنى ئۆزگەرتىدۇ.

ئورۇنلاشتۇرۇشنى بەلگىلەشتە فۇنكسىيە قوللىنىلغاندا ، ئۇ تۇنجى DOM تۈگۈنى ۋە قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى دەپ ئاتىلىدۇ. بۇ thisمەزمۇن مودا ئېقىمىغا تەڭشەلدى.

تاللىغۇچ string | false false ئەگەر تاللىغۇچ تەمىنلەنسە ، يۆتكىلىشچان ئوبيېكتلار بەلگىلەنگەن نىشانغا تاپشۇرۇلىدۇ. ئەمەلىيەتتە ، بۇ ھەرىكەتچان HTML مەزمۇنىنى قوزغىتىش پروگراممىسى قوشۇشقا ئىشلىتىلىدۇ. بۇنى ۋە مەزمۇنلۇق مىسالنى كۆرۈڭ .
قېلىپ string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

كۆزنەكنى قۇرغاندا ئىشلىتىدىغان HTML نى ئاساس قىلىڭ.

پوپايكىلارنىڭ titleئىچىگە ئوكۇل قىلىنىدۇ .popover-header.

پوپايكىلارنىڭ contentئىچىگە ئوكۇل قىلىنىدۇ .popover-body.

.arrowمودا ئېقىمىغا ئايلىنىدۇ.

سىرتقى ئورالما ئېلېمېنتىنىڭ .popoverسىنىپى بولۇشى كېرەك.

ماۋزۇ string | element | function ''

titleئەگەر خاسلىق بولمىسا سۈكۈتتىكى تېما قىممىتى .

thisئەگەر بىر فۇنكسىيە بېرىلسە ، ئۇ پايدىلانما ئۇلانغان ئېلېمېنتقا پايدىلىنىش قىممىتى بىلەن چاقىرىلىدۇ .

trigger string 'چېكىڭ' مودا ئېقىمى قانداق قوزغىلىدۇ - نى چېكىڭ hover | فوكۇس | manual. سىز بىر نەچچە قوزغاتقۇچتىن ئۆتۈپ كېتىشىڭىز مۇمكىن. ئۇلارنى بوشلۇق بىلەن ئايرىڭ. manualباشقا قوزغاتقۇچ بىلەن بىرلەشتۈرگىلى بولمايدۇ.
offset سان | string 0 نىشانغا سېلىشتۇرغاندا پوپايكىنىڭ تولۇقلىنىشى. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ offset ھۆججىتىنى كۆرۈڭ .
fallbackPlacement string | سانلار گۇرپىسى 'flip' Popper نىڭ قايسى ئورۇنغا قايتىدىغانلىقىنى بەلگىلەشكە يول قويۇڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ ھەرىكەت ھۆججىتىنى كۆرۈڭ
CustomClass string | function ''

كۆرۈنگەندە پوپقا دەرس قوشۇڭ. شۇنىڭغا دىققەت قىلىڭكى ، بۇ دەرسلەر قېلىپدا كۆرسىتىلگەن ھەر قانداق دەرسلەردىن باشقا قوشۇلىدۇ. كۆپ سىنىپ قوشۇش ئۈچۈن ئۇلارنى بوشلۇق بىلەن ئايرىڭ : 'a b'.

قوشۇمچە سىنىپ نامىنى ئۆز ئىچىگە ئالغان بىر قۇرنى قايتۇرىدىغان فۇنكسىيەنىمۇ ئۆتەلەيسىز.

چېگرا string | ئېلېمېنت 'scrollParent' ئېقىننىڭ چەكتىن ئېشىپ كېتىش چەكلىمىسى. 'viewport'، ياكى HTMLElement پايدىلىنىش قىممىتى (پەقەت JavaScript) نىڭ 'window'قىممىتىنى قوبۇل قىلىدۇ . 'scrollParent'تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ ئالدىنى ئېلىش ئېقىمى ھۆججىتىنى كۆرۈڭ .
تازىلىق boolean true تازىلىقنى قوزغىتىش ياكى چەكلەش. ئەگەر قوزغىتىلسا 'template'، 'content'تاللاشلار 'title'تازىلىنىدۇ. بىزنىڭ JavaScript ھۆججىتىمىزدىكى تازىلىق بۆلىكىنى كۆرۈڭ .
whiteList ئوبيېكت كۆڭۈلدىكى قىممىتى رۇخسەت قىلىنغان خاسلىق ۋە بەلگىلەرنى ئۆز ئىچىگە ئالغان ئوبيېكت
sanitizeFn null | function null بۇ يەردە ئۆزىڭىزنىڭ تازىلاش ئىقتىدارىنى تەمىنلىيەلەيسىز. ئەگەر مەخسۇس كۇتۇپخانا ئىشلىتىپ تازىلىق قىلىشنى ياخشى كۆرسىڭىز ، بۇ پايدىلىق بولىدۇ.
popperConfig null | ئوبيېكت null Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆزگەرتىش ئۈچۈن Popper نىڭ سەپلىمىسىنى كۆرۈڭ

يەككە پوپايكىلارنىڭ سانلىق مەلۇمات خاسلىقى

يۇقىرىدا بايان قىلىنغاندەك شەخسىي خاسلىقلارنىڭ تاللانمىلىرىنى سانلىق مەلۇمات خاسلىقى ئارقىلىق تاللاشقا بولىدۇ.

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

$().popover(options)

ئېلېمېنت توپلاش ئۈچۈن پوپايكىلارنى قوزغىتىدۇ.

.popover('show')

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى ئاشكارىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. ئىسمى ۋە مەزمۇنى ھەر ئىككىسى نۆل ئۇزۇنلۇقتىكى پوپايكىلار ھەرگىز كۆرۈنمەيدۇ.

$('#element').popover('show')

.popover('hide')

بىر ئېلېمېنتنىڭ ئېقىمىنى يوشۇرىدۇ. پوپايكا ئەمەلىيەتتە يوشۇرۇنغان (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.

$('#element').popover('hide')

.popover('toggle')

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى توغرىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

.popover('dispose')

بىر ئېلېمېنتنىڭ ئېقىمىنى يوشۇرىدۇ ۋە يوقىتىدۇ. ۋەكىللەر ئۆمىكىنى ئىشلىتىدىغان پوپايكىلار ( تاللاش ئارقىلىقselector ياسالغان ) ئەۋلاد قوزغاتقۇچ ئېلېمېنتلىرىدا ئايرىم بۇزۇلمايدۇ.

$('#element').popover('dispose')

.popover('enable')

بىر ئېلېمېنتنىڭ مودا ئېقىمىغا كۆرسىتىش ئىقتىدارىنى بېرىدۇ. Popovers سۈكۈتتىكى ھالەتتە قوزغىتىلغان.

$('#element').popover('enable')

.popover('disable')

ئېلېمېنتنىڭ مودا ئېقىمىنىڭ كۆرسىتىلىش ئىقتىدارىنى چىقىرىپ تاشلايدۇ. پوپايكا قايتا قوزغىتىلغاندىلا ئاندىن كۆرسىتىلىدۇ.

$('#element').popover('disable')

.popover('toggleEnabled')

ئېلېمېنتنىڭ كۆرۈنمە يۈزىنى كۆرسىتىش ياكى يوشۇرۇش ئىقتىدارىنى ئۆزگەرتىدۇ.

$('#element').popover('toggleEnabled')

.popover('update')

ئېلېمېنتنىڭ مودا ئېقىمىنىڭ ئورنىنى يېڭىلايدۇ.

$('#element').popover('update')

Events

پائالىيەت تىپى چۈشەندۈرۈش
show.bs.popover showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
shown.bs.popover بۇ ھادىسە ئىشلەتكۈچىگە كۆرۈنگەندە (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
hide.bs.popover hideئۈلگە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ .
hidden.bs.popover بۇ ھادىسە ئابونتلار تەرىپىدىن يوشۇرۇلغاندىن كېيىن چىقىرىۋېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
inserted.bs.popover بۇ پائالىيەت show.bs.popoverDOM غا مودا قېلىپ قوشۇلغاندىن كېيىن ئىشتىن توختىتىلدى.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})