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 .text-nowrapنى ئىشلىتىڭ .<a>
ماس كېلىدىغان ئېلېمېنتلار DOM دىن ئۆچۈرۈلۈشتىن بۇرۇن چوقۇم يوشۇرۇش كېرەك.
سايە DOM ئىچىدىكى ئېلېمېنتنىڭ ياردىمىدە پوپايكىلارنى قوزغىتىشقا بولىدۇ.

بۇ زاپچاسنىڭ كارتون ئۈنۈمى 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="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.popover`DOM غا مودا قېلىپ قوشۇلغاندىن كېيىن ئىشتىن توختىتىلدى.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})