Source

Popovers

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

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

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

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

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

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

بارلىق بەتكۈچلەرنى بىر بەتتە باشلاشنىڭ بىر ئۇسۇلى ، ئۇلارنىڭ 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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)

تاللانما

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

ئىسمى تىپ سۈكۈتتىكى چۈشەندۈرۈش
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'

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

ئورۇن بەلگىلەشنى بەلگىلەشتە فۇنكسىيە قوللىنىلغاندا ، ئۇ popover 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.js نىڭ offset ھۆججىتىنى كۆرۈڭ .
fallbackPlacement string | سانلار گۇرپىسى 'flip' Popper نىڭ قايسى ئورۇنغا قايتىدىغانلىقىنى بەلگىلەشكە يول قويۇڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ ھەرىكەت ھۆججىتىنى كۆرۈڭ
چېگرا string | ئېلېمېنت 'scrollParent' ئېقىننىڭ چەكتىن ئېشىپ كېتىش چەكلىمىسى. 'viewport'، ياكى HTMLElement پايدىلىنىش قىممىتى (پەقەت JavaScript) نىڭ 'window'قىممىتىنى قوبۇل قىلىدۇ . 'scrollParent'تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper.js نىڭ ئالدىنى ئېلىش ئېقىمى ھۆججىتىنى كۆرۈڭ .

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

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

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…
})