قورال قوراللىرى
CSS3 ۋە JavaScript ئارقىلىق خاسلاشتۇرۇلغان Bootstrap قورال قوراللىرىنى CSS3 ئارقىلىق كارتون ۋە يەرلىك ماۋزۇ ساقلاشقا ئىشلىتىدىغان سانلىق مەلۇمات خاسلىقى قوشۇش ئۈچۈن ھۆججەت ۋە مىساللار.
ئومۇمىي چۈشەنچە
قورال قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:
- قورال قوراللىرى ئورۇن بەلگىلەش ئۈچۈن 3-تەرەپ كۈتۈپخانىسى Popper.js غا تايىنىدۇ. Bootstrap.js دىن بۇرۇن popper.min.js نى ئۆز ئىچىگە ئېلىشىڭىز
bootstrap.bundle.min.js
ياكىbootstrap.bundle.js
قورال قوراللىرىنىڭ ئىشلىشى ئۈچۈن Popper.js نى ئۆز ئىچىگە ئالغان ئىشلىتىڭ. - ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇ
util.js
. - قورال قوراللىرى ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۆزىڭىز باشلىشىڭىز كېرەك .
- نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.
- تېخىمۇ مۇرەككەپ زاپچاسلاردا مەسىلە پەيدا قىلىشتىن ساقلىنىشنى بەلگىلەڭ
container: 'body'
(بىزنىڭ كىرگۈزۈش گۇرۇپپىلىرىمىز ، كۇنۇپكا گۇرۇپپىلىرىمىز دېگەندەك). - يوشۇرۇن ئېلېمېنتلارنى قوزغىتىش قوراللىرى ئىشلىمەيدۇ.
- قورال
.disabled
ياكىdisabled
ئېلېمېنتلار چوقۇم ئورالغان ئېلېمېنتتا قوزغىتىلىشى كېرەك. - كۆپ قۇرنى ئۆز ئىچىگە ئالغان ئۇلىنىشتىن قوزغالغاندا ، قورال كۆرسەتمىلىرى مەركەزلىك بولىدۇ. بۇ ھەرىكەتتىن ساقلىنىش ئۈچۈن s
white-space: nowrap;
نى ئىشلىتىڭ .<a>
- ماس كېلىدىغان ئېلېمېنتلار DOM دىن چىقىرىۋېتىلىشتىن بۇرۇن قورال قوراللىرى چوقۇم يوشۇرۇلۇشى كېرەك.
- سايە DOM ئىچىدىكى ئېلېمېنتنىڭ ياردىمىدە قورال قوراللىرىنى قوزغىتىشقا بولىدۇ.
بۇ زاپچاسنىڭ كارتون ئۈنۈمى prefers-reduced-motion
مېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ .
ھەممىسىگە ئېرىشتىڭىزمۇ؟ قالتىس ، ئۇلارنىڭ بەزى مىساللار بىلەن قانداق ئىشلەيدىغانلىقىنى كۆرۈپ باقايلى.
مىسال: ھەممە يەردە قورال قوراللىرىنى قوزغىتىڭ
بىر بەتتىكى بارلىق قورال قوراللىرىنى باشلاشنىڭ بىر ئۇسۇلى ، ئۇلارنىڭ data-toggle
خاسلىقى بويىچە تاللاش:
مىساللار
تۆۋەندىكى ئۇلىنىشلارنى بېسىپ قورال قوراللىرىنى كۆرۈڭ:
تار ئىشتان كېيىنكى دەرىجىلىك keffiyeh بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. سۈرەت پونكىتى ساقال خام دېنىم خەت ساندۇقى گۆشسىز خەۋەرچى سومكىسى توختاپ قالدى. دېھقانچىلىق مەيدانىدىن ئۈستەلگە ئولتۇرىدىغان سەيتان ، mcsweeney نىڭ مۇقىم سىجىللىقىدىكى 8 بىتلىق ئامېرىكا كىيىم-كېچەكلىرىنىڭ تېررى رىچاردسون ۋىنىل چامبراي بار . ساقاللىرى توختاپ قالدى ، كارتىلار بانخ مى لومو گۈلدۈرماما. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleangan vegan chambray. ھەقىقەتەن كىشىنى ھەيران قالدۇرىدىغان ھۈنەرۋەن ھەر قانداق ئاچقۇچ ، مەنزىرىلىك دېھقانچىلىق مەيدانىدىن ئۈستەل بانكىسى Austin twitter بىر تەرەپ قىلغان ھەقسىز كرېدىت خام دېنى يەككە مەنبەلىك قەھۋە ۋىرۇسى.
تۆۋەندىكى كۇنۇپكىلارنى بېسىپ تۇرۇپ ، ئۈستى ، ئوڭ ، ئاستى ۋە سولدىن ئىبارەت تۆت قورال كۆرسەتمىسىنى كۆرۈڭ.
خاس HTML قوشۇلغان:
ئىشلىتىش
قورال قورال قىستۇرمىسى ئېھتىياجغا ئاساسەن مەزمۇن ۋە بەلگە ھاسىل قىلىدۇ ، سۈكۈتتىكى ھالەتتە قوزغىتىش قوراللىرى قوزغاتقۇچ ئېلېمېنتىدىن كېيىن.
قورال قورالنى JavaScript ئارقىلىق قوزغىتىڭ:
ئېشىپ كېتىش auto
ۋەscroll
overflow: auto
قورال قاچىسى ئورنى ئاتا-ئانىلار قاچىسى بىزدە ياكى overflow: scroll
بىزگە ئوخشاش بولغاندا ئاپتوماتىك ئۆزگەرتىشكە ئۇرۇنىدۇ .table-responsive
، ئەمما يەنىلا ئەسلىدىكى ئورۇننىڭ ئورنىنى ساقلايدۇ. ھەل قىلىش ئۈچۈن ، boundary
كۆڭۈلدىكى قىممەتتىن باشقا تاللاشنى تاللاڭ 'scrollParent'
، مەسىلەن 'window'
:
Markup
قورال كۆرسەتكۈچىگە لازىملىق بەلگە پەقەت بىر data
خاسلىق title
بولۇپ ، HTML ئېلېمېنتىدا قورال قوراللىرى بولۇشنى خالايسىز. قورال قورالنىڭ ھاسىل قىلىنغان بەلگىسى بىر قەدەر ئاددىي ، گەرچە ئۇ ئورۇن تەلەپ قىلسىمۇ (سۈكۈتتىكى ھالەتتە top
قىستۇرما تەرىپىدىن بەلگىلىنىدۇ).
قورال قوراللىرىنى ياساش كۇنۇپكا تاختىسى ۋە ياردەمچى تېخنىكا ئىشلەتكۈچىلەر ئۈچۈن خىزمەت قىلىدۇ
سىز پەقەت HTML ئېلېمېنتلىرىغا ئەنئەنىۋى كۇنۇپكا تاختىسى فوكۇسلانغان ۋە ئۆز-ئارا تەسىر كۆرسىتىدىغان (ئۇلىنىش ياكى شەكىل كونترول دېگەندەك) قورال قوراللىرىنى قوشۇشىڭىز كېرەك. خاسلىقنى قوشۇش ئارقىلىق خالىغان HTML ئېلېمېنتلىرى (مەسىلەن <span>
) نى فوكۇس توغرىلىغىلى بولسىمۇ tabindex="0"
، ئەمما بۇ كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ئۈچۈن ئۆز-ئارا تەسىر كۆرسىتەلمەيدىغان ئېلېمېنتلارغا ئادەمنى بىزار قىلىدىغان ۋە قايمۇقتۇرىدىغان بەتكۈچ توختايدۇ ، نۆۋەتتە كۆپىنچە ياردەمچى تېخنىكىلار بۇ ئەھۋالدا قورال كۆرسەتكۈچىنى ئېلان قىلمايدۇ. بۇنىڭدىن باشقا ، قورال قوراللىرىڭىزنىڭ قوزغاتقۇچىسىغىلا تايانماڭ hover
، چۈنكى بۇ قورال قوراللىرىڭىزنى كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ئۈچۈن قوزغىتالمايدۇ.
چەكلەنگەن ئېلېمېنتلار
خاسلىقى بار ئېلېمېنتلار disabled
ئۆز-ئارا تەسىر كۆرسىتەلمەيدۇ ، يەنى ئىشلەتكۈچىلەر فوكۇس توغرىلىيالمايدۇ ، يۆتكىۋېتەلمەيدۇ ياكى ئۇلارنى چېكىپ قورال كۆرسەتكۈچى (ياكى سەكرىمە) قوزغىتالمايدۇ. خىزمەت ئۇسۇلى بولۇش سۈپىتىڭىز بىلەن ، قورال قورالنى ئورالمىدىن قوزغاتماقچى <div>
ياكى <span>
ئەڭ ياخشىسى كۇنۇپكا تاختىسىنى فوكۇس توغرىلاپ ئىشلىتىپ ، چەكلەنگەن ئېلېمېنتنى tabindex="0"
قاپلىۋەتمەكچى بولىسىز.pointer-events
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-
ئوخشاش data-animation=""
.
شۇنىڭغا دىققەت قىلىڭكى ، بىخەتەرلىكنى كۆزدە تۇتۇپ ، sanitize
سانلىق مەلۇمات خاسلىقى ئارقىلىق تاللانمىلارنى تەمىنلىگىلى بولمايدۇ.sanitizeFn
whiteList
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
animation | boolean | true | قورال قورالغا CSS سۇس ئۆتۈشنى ئىشلىتىڭ |
قاچا | string | element | false | false | قورال كۆرسەتكۈچىنى مەلۇم ئېلېمېنتقا قوشىدۇ. مىسال : |
كېچىكىش | سان | ئوبيېكت | 0 | قورال كۆرسەتكۈچى (ms) نى كۆرسىتىش ۋە يوشۇرۇش - قولدا قوزغىتىش تىپىغا ماس كەلمەيدۇ ئەگەر بىر سان تەمىنلەنسە ، يوشۇرۇش / كۆرسىتىشكە كېچىكىش قوللىنىلىدۇ ئوبيېكت قۇرۇلمىسى: |
html | boolean | false | قورال قورالىدا HTML غا يول قويۇڭ. ئەگەر راست بولسا ، قورال كۆرسەتكۈچىدىكى HTML خەتكۈچلىرى ئەگەر XSS ھۇجۇمىدىن ئەنسىرىسىڭىز تېكىست ئىشلىتىڭ. |
ئورۇنلاشتۇرۇش | string | function | 'top' | قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئاپتوماتىك | top | ئاستى | left | توغرا. ئېنىقلانغاندىن كېيىن ، ئۇ قورال قورالنى ھەرىكەتچان ھالدا قايتىدىن ئۆزگەرتىدۇ ئورۇنلاشتۇرۇشنى بەلگىلەشتە فۇنكسىيە ئىشلىتىلگەندە ، ئۇ قورال قورال DOM تۈگۈنى بىلەن بىرىنچى تالاش-تارتىش ، قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى دەپ ئاتىلىدۇ. |
تاللىغۇچ | string | false | false | ئەگەر تاللىغۇچ تەمىنلەنسە ، قورال كۆرسەتكۈچ ئوبيېكتى بەلگىلەنگەن نىشانغا تاپشۇرۇلىدۇ. jQuery.on ئەمەلىيەتتە ، بۇ ھەرىكەتچان قوشۇلغان DOM ئېلېمېنتلىرىغا ( قوللاش) قورال قوراللىرىنى ئىشلىتىشكىمۇ ئىشلىتىلىدۇ . بۇنى ۋە مەزمۇنلۇق مىسالنى كۆرۈڭ . |
قېلىپ | string | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
قورال قوراللىرىنى قۇرغاندا ئىشلىتىدىغان HTML نى ئاساس قىلىڭ. قورال قوراللىرى
سىرتقى ئورالما ئېلېمېنتىنىڭ |
ماۋزۇ | string | element | function | '' |
|
trigger | string | 'hover focus' | قورال قوراللىرى قانداق قوزغىتىلىدۇ - نى بېسىڭ hover | فوكۇس | manual. سىز بىر نەچچە قوزغاتقۇچتىن ئۆتۈپ كېتىشىڭىز مۇمكىن. ئۇلارنى بوشلۇق بىلەن ئايرىڭ.
|
offset | سان | string | function | 0 | نىشانغا سېلىشتۇرغاندا قورال قوراللىرىنىڭ تولۇقلىنىشى. فۇنكسىيەنى ئېنىقلاش ئۈچۈن فۇنكسىيە ئىشلىتىلگەندە ، ئۇ بىرىنچى دەلىل سۈپىتىدە offset سانلىق مەلۇماتلىرىنى ئۆز ئىچىگە ئالغان جىسىم بىلەن ئاتىلىدۇ. فۇنكسىيە ئوخشاش قۇرۇلمىغا ئىگە ئوبيېكتنى قايتۇرۇشى كېرەك. قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى تالاش-تارتىش سۈپىتىدە ئۆتتى. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ offset ھۆججىتىنى كۆرۈڭ . |
fallbackPlacement | string | سانلار گۇرپىسى | 'flip' | Popper نىڭ قايسى ئورۇنغا قايتىدىغانلىقىنى بەلگىلەشكە يول قويۇڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ ھەرىكەت ھۆججىتىنى كۆرۈڭ |
چېگرا | string | ئېلېمېنت | 'scrollParent' | قورال قورالنىڭ چەكتىن ئېشىپ كېتىش چەكلىمىسى. 'viewport' ، ياكى HTMLElement پايدىلىنىش قىممىتى (پەقەت JavaScript) نىڭ 'window' قىممىتىنى قوبۇل قىلىدۇ . 'scrollParent' تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper.js نىڭ ئالدىنى ئېلىش ئېقىمى ھۆججىتىنى كۆرۈڭ . |
تازىلىق | boolean | true | تازىلىقنى قوزغىتىش ياكى چەكلەش. ئەگەر قوزغىتىلسا 'template' ۋە 'title' تاللاشلار تازىلىنىدۇ. |
whiteList | ئوبيېكت | كۆڭۈلدىكى قىممىتى | رۇخسەت قىلىنغان خاسلىق ۋە بەلگىلەرنى ئۆز ئىچىگە ئالغان ئوبيېكت |
sanitizeFn | null | function | null | بۇ يەردە ئۆزىڭىزنىڭ تازىلاش ئىقتىدارىنى تەمىنلىيەلەيسىز. ئەگەر مەخسۇس كۇتۇپخانا ئىشلىتىپ تازىلىق قىلىشنى ياخشى كۆرسىڭىز ، بۇ پايدىلىق بولىدۇ. |
popperConfig | null | ئوبيېكت | null | Bootstrap نىڭ سۈكۈتتىكى Popper.js سەپلىمىسىنى ئۆزگەرتىش ئۈچۈن Popper.js نىڭ سەپلىمىسىنى كۆرۈڭ |
يەككە قورال قوراللىرىنىڭ سانلىق مەلۇمات خاسلىقى
ئايرىم قورال قوراللىرىنىڭ تاللانمىلىرىنى يۇقىرىدا چۈشەندۈرۈلگەندەك سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق بەلگىلىگىلى بولىدۇ.
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
$().tooltip(options)
قورال توپلىغۇچنى ئېلېمېنتلار توپلىمىغا باغلايدۇ.
.tooltip('show')
بىر ئېلېمېنتنىڭ قورال قوراللىرىنى ئاشكارىلايدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.tooltip
بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.
.tooltip('hide')
ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.tooltip
بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.
.tooltip('toggle')
ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.tooltip
hidden.bs.tooltip
.tooltip('dispose')
ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ ۋە يوقىتىدۇ. ۋەكىللەر ئۆمىكىنى ئىشلىتىدىغان قوراللار ( تاللاش ئارقىلىقselector
ياسالغان ) ئەۋلاد قوزغاتقۇچ ئېلېمېنتلىرىدا ئايرىم بۇزۇلمايدۇ.
.tooltip('enable')
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ئىقتىدارىنى بېرىدۇ. قورال قوراللىرى سۈكۈتتىكى ھالەتتە قوزغىتىلغان.
.tooltip('disable')
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ئىقتىدارىنى يوقىتىدۇ. قورال قورالنى قايتا قوزغىتىلغاندىلا كۆرسەتكىلى بولىدۇ.
.tooltip('toggleEnabled')
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ياكى يوشۇرۇش ئىقتىدارىنى ئۆزگەرتىدۇ.
.tooltip('update')
ئېلېمېنتنىڭ قورال قوراللىرىنىڭ ئورنىنى يېڭىلايدۇ.
Events
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
show.bs.tooltip | show مىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ . |
shown.bs.tooltip | بۇ قورال قورال كۆرسەتكۈچى ئىشلەتكۈچىگە كۆرۈنگەندە ئىشتىن بوشىتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). |
hide.bs.tooltip | hide ئۈلگە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ . |
hidden.bs.tooltip | بۇ ھادىسە قورال قوراللىرى ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). |
inserted.bs.tooltip | بۇ پائالىيەت پائالىيەتتىن كېيىن show.bs.tooltip DOM غا قورال كۆرسەتكۈچى ئەندىزىسى قوشۇلغاندىن كېيىن ئېتىلىدۇ. |