Sourceتامچە
Bootstrap چۈشۈرۈش قىستۇرمىسى بىلەن ئۇلىنىش تىزىملىكى ۋە تېخىمۇ كۆپ مەزمۇنلارنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلاڭ.
تۆۋەنلەش كۆزنەكلىرى يۆتكىلىشچان ، ئۇلىنىش تىزىملىكىنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلايدۇ. ئۇلار ئۆز ئىچىگە ئالغان Bootstrap چۈشۈش JavaScript قىستۇرمىسى بىلەن ئۆز-ئارا تەسىر كۆرسىتىدۇ. ئۇلار چېكىش ئارقىلىق ئەمەس ، چېكىش ئارقىلىق يۆتكىلىدۇ. بۇ قەستەن لايىھىلەش قارارى.
Dropdowns ھەرىكەتچان ئورۇن بەلگىلەش ۋە كۆرۈنۈشنى تەكشۈرۈش بىلەن تەمىنلەيدىغان Popper.js ئۈچىنچى تەرەپ كۈتۈپخانىسىغا قۇرۇلدى. Bootstrap نىڭ JavaScript ياكى popper.js نى ئۆز ئىچىگە ئالغان ئىشلىتىشتىن بۇرۇن popper.min.js نى جەزملەشتۈرۈڭ . Popper.js ھەرىكەتچان ئورۇن بەلگىلەش ھاجەتسىز بولسىمۇ ، دېڭىز ئاستى بالداقتىكى چۈشۈشنى ئورۇنلاشتۇرمايدۇ.bootstrap.bundle.min.js
bootstrap.bundle.js
ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js
.
WAI ARIA ئۆلچىمى ئەمەلىي role="menu"
كىچىك قورالغا ئېنىقلىما بېرىدۇ ، ئەمما بۇ ھەرىكەت ياكى ئىقتىدار قوزغىتىدىغان قوللىنىشچان پروگراممىلارغا خاس. ARIA تىزىملىكلىرى پەقەت تىزىملىك تۈرلىرى ، تەكشۈرۈش رامكىسى تىزىملىكى ، رادىئو كۇنۇپكىسى تىزىملىك تۈرلىرى ، رادىئو كۇنۇپكا گۇرۇپپىسى ۋە تارماق تىزىملىكلەرنىلا ئۆز ئىچىگە ئالىدۇ.
Bootstrap نىڭ چۈشۈش نىسبىتى بولسا ئومۇمىي جەھەتتىن لايىھەلەنگەن بولۇپ ، ھەر خىل ئەھۋال ۋە بەلگە قۇرۇلمىلىرىغا ماس كېلىدۇ. مەسىلەن ، ئىزدەش بۆلىكى ياكى كىرىش جەدۋىلى قاتارلىق قوشۇمچە كىرگۈزۈش ۋە شەكىل كونتروللىرىنى ئۆز ئىچىگە ئالغان تامچە قۇرغىلى بولىدۇ. بۇ سەۋەبتىن ، Bootstrap ھەقىقىي ARIA تىزىملىكلىرىگە لازىملىق role
ۋە خاسلىقلارنىڭ ھېچقايسىسىنى ئۈمىد قىلمايدۇ (ياكى ئاپتوماتىك قوشمايدۇ) . ئاپتورلار بۇ تېخىمۇ كونكرېت خاسلىقنى ئۆز ئىچىگە ئېلىشى كېرەك.aria-
قانداقلا بولمىسۇن ، Bootstrap نۇر بەلگىسى كۇنۇپكىسى ئارقىلىق يەككە ئېلېمېنتلار ئارقىلىق يۆتكىلىش .dropdown-item
ۋە تىزىملىك بىلەن كۇنۇپكىنى تاقاش قاتارلىق نۇرغۇن ئۆلچەملىك كۇنۇپكا تاختىسىنىڭ ئۆز-ئارا تەسىرلىشىشىنى ئۆز ئىچىگە ESCئالىدۇ.
تارتما كۇنۇپكىنى (كۇنۇپكا ياكى ئۇلىنىش) ۋە تارتما تىزىملىكنى .dropdown
ياكى ئېلان قىلىدىغان باشقا ئېلېمېنتنى ئوراپ قويۇڭ position: relative;
. يوشۇرۇن ئېھتىياجلىرىڭىزغا تېخىمۇ ياخشى ماسلىشىش ئۈچۈن تامچە ياكى ئېلېمېنتلار قوزغىتىلىدۇ <a>
.<button>
ھەر قانداق يەككە .btn
بەلگە ئۆزگەرتىش ئارقىلىق تۆۋەنلەش ھالىتىگە ئايلاندۇرغىلى بولىدۇ. ئۇلارنى قانداق قىلىپ ھەر ئىككى <button>
ئېلېمېنت بىلەن خىزمەت قىلالايسىز؟
ئېلېمېنتلار بىلەن <a>
:
ئەڭ ياخشى يېرى سىز بۇنى ھەر قانداق كۇنۇپكا بىلەن ئۆزگەرتەلەيسىز:
ئوخشاشلا ، يەككە كۇنۇپكا چۈشۈش بىلەن ئوخشاش بەلگە بىلەن بۆلۈش كۇنۇپكىسى چۈشۈشنى ھاسىل قىلىڭ ، ئەمما تامچە .dropdown-toggle-split
پەرۋىش ئەتراپىغا مۇۋاپىق بوشلۇق قوشۇش.
بىز بۇ قوشۇمچە سىنىپنى ئىشلىتىپ padding
پەرۋىشنىڭ ئىككى تەرىپىدىكى گورىزونتالنى% 25 تۆۋەنلىتىمىز ھەمدە margin-left
دائىملىق كۇنۇپكا چۈشۈرۈش ئۈچۈن قوشۇلغاننى چىقىرىمىز. بۇ قوشۇمچە ئۆزگەرتىشلەر پەرۋىشنى بۆلۈش كۇنۇپكىسىغا مەركەزلەشتۈرۈپ ، ئاساسىي كۇنۇپكىنىڭ يېنىغا تېخىمۇ مۇۋاپىق چوڭلۇقتىكى زەربە بېرىش رايونى بىلەن تەمىنلەيدۇ.
كونۇپكا تاختىسىنىڭ سۈكۈتتىكى ۋە بۆلۈش كۇنۇپكىسى قاتارلىق بارلىق چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.
باش ئېلېمېنتنى قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئۈستىدىكى تىزىملىكلەرنى قوزغىتىڭ .dropup
.
باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئوڭ تەرىپىدىكى تىزىملىك تىزىملىكى .dropright
.
باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ سول تەرىپىدىكى تىزىملىك تىزىملىكى .dropleft
.
تارىختىن چۈشۈش تىزىملىكىدىكى مەزمۇنلار ئۇلىنىش بولۇشى كېرەك ئىدى ، ئەمما v4 بىلەن ئەمدى ئۇنداق بولمايدۇ. ھازىر تاللانمىلىرىڭىزدىكى ئېلېمېنتلارنى پەقەت s نىڭ <button>
ئورنىغا ئىشلەتسىڭىز بولىدۇ.<a>
سىز يەنە ئۆز-ئارا تەسىر كۆرسەتمەيدىغان تامچە تۈرلەرنى قۇرالايسىز .dropdown-item-text
. ئىختىيارى CSS ياكى تېكىست قوراللىرى بىلەن تېخىمۇ ئۇسلۇبنى ئەركىن ھېس قىلىڭ.
ئېسىلما .active
ھالەتتىكى تۈرلەرگە ئۇلارنى ئاكتىپ ھالەتتە ئۇسلۇب قىلىڭ .
تۆۋەنگە .disabled
چۈشۈرۈلگەن تۈرلەرگە ئۇلارنى مېيىپ قىلىپ ئۇسلۇب قىلىڭ .
سۈكۈت بويىچە ، چۈشۈش تىزىملىكى ئاپتوماتىك ھالدا ئاتا-ئانىسىنىڭ ئۈستى ۋە سول تەرىپىدىن% 100 ئورۇنلىنىدۇ. .dropdown-menu-right
ئوڭغا ئوڭغا قوشۇش .dropdown-menu
تىزىملىكى.
Heads up! تامچە چۈشۈش Popper.js نىڭ ياردىمىدە ئورۇنلاشتۇرۇلغان.
ھەر بىر ئېسىلما تىزىملىكتىكى ھەرىكەت بۆلەكلىرىگە بەلگە قوشۇڭ.
بۆلگۈچ بىلەن مۇناسىۋەتلىك تىزىملىك تۈرلىرىنى گۇرۇپپىلارغا ئايرىڭ.
ھەر قانداق ھەقسىز تېكىستنى ئېسىلما تىزىملىك ئىچىگە تېكىست بىلەن قويۇپ ، بوشلۇق ئەسلىھەلىرىنى ئىشلىتىڭ . تىزىملىك كەڭلىكىنى چەكلەش ئۈچۈن قوشۇمچە چوڭلۇقتىكى ئۇسلۇبلارغا ئېھتىياجلىق بولۇشىڭىزغا دىققەت قىلىڭ.
تامچە تىزىملىكنىڭ ئىچىگە جەدۋەل قويۇڭ ياكى ئۇنى ئېسىلما تىزىملىككە ئايلاندۇرۇڭ ، ھەمدە گىرۋەك ياكى تاختا ئىشلىتىشتىن پايدىلىنىپ ، ئۇنىڭغا ئېھتىياجلىق سەلبىي بوشلۇق بېرىڭ.
چۈشۈش ئورنىنى ئىشلىتىڭ data-offset
ياكى ئۆزگەرتىڭ.data-reference
سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ، تارتما قىستۇرما .show
ئانا تىزىملىك تۈرىدىكى دەرسنى ئالماشتۇرۇش ئارقىلىق يوشۇرۇن مەزمۇننى (چۈشۈرۈش تىزىملىكى) ئالماشتۇرىدۇ. بۇ data-toggle="dropdown"
خاسلىق قوللىنىشچان پروگراممىلاردىكى تامچە تىزىملىكلەرنى تاقاشقا تايىنىدۇ ، شۇڭا ئۇنى دائىم ئىشلىتىش ياخشى ئۇسۇل.
سېزىمچان ئۈسكۈنىلەردە ، تامچە ئېچىش ئېلېمېنتنىڭ بىۋاسىتە بالىلىرىغا قۇرۇق ( $.noop
) بىر تەرەپ قىلغۇچ قوشىدۇ. ئېتىراپ قىلىشقا تېگىشلىكى شۇكى ، بۇ سەت خاككېرلار iOS پائالىيەت ۋەكىللەر ئۆمىكىدىكى قالايمىقانچىلىقنى چۆرىدىگەن ھالدا ئىشلەشكە موھتاج ، بۇنداق بولغاندا تامچە چۈشۈشنىڭ سىرتىدىكى ھەر قانداق بىر چېكىشنىڭ تۆۋەنلەش كودىنى قوزغىتىشىنىڭ ئالدىنى ئالىدۇ. تامچە تاقالغاندىن كېيىن ، بۇ قوشۇمچە قۇرۇق تۇتقۇچلار چىقىرىۋېتىلىدۇ.mouseover
<body>
mouseover
سانلىق مەلۇمات خاسلىقى ئارقىلىق
ئۇلىنىش ياكى كۇنۇپكىنى قوشسىڭىز data-toggle="dropdown"
، چۈشۈشنى قوزغىتىڭ.
چۈشۈشنى JavaScript ئارقىلىق تېلېفون قىلىڭ:
data-toggle="dropdown"
يەنىلا تەلەپ قىلىنىدۇ
مەيلى سىز JavaScript ئارقىلىق چۈشۈش تېلېفونىڭىزغا تېلېفون قىلىڭ ياكى ئۇنىڭ ئورنىغا سانلىق مەلۇمات api نى ئىشلىتىڭ ، data-toggle="dropdown"
ھەمىشە چۈشۈش قوزغاتقۇچ ئېلېمېنتىدا بولۇشى تەلەپ قىلىنىدۇ.
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-
ئوخشاش data-offset=""
.
ئىسمى |
تىپ |
سۈكۈتتىكى |
چۈشەندۈرۈش |
offset |
سان | string | function |
0 |
نىشانغا سېلىشتۇرغاندا تۆۋەنلەشنىڭ تولۇقلىنىشى. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ offset ھۆججىتىنى كۆرۈڭ . |
flip |
boolean |
true |
پايدىلىنىش ئېلېمېنتى قاپلانغان ئەھۋال ئاستىدا Dropdown نىڭ سىيرىلىشىغا يول قويۇڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ flip ھۆججىتىنى كۆرۈڭ . |
چېگرا |
string | ئېلېمېنت |
'scrollParent' |
ئېسىلما تىزىملىكنىڭ ئېقىپ كېتىش چەكلىمىسى. 'viewport' ، ياكى HTMLElement پايدىلىنىش قىممىتى (پەقەت JavaScript) نىڭ 'window' قىممىتىنى قوبۇل قىلىدۇ . 'scrollParent' تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper.js نىڭ ئالدىنى ئېلىش ئېقىمى ھۆججىتىنى كۆرۈڭ . |
پايدىلىنىش ماتېرىيالى |
string | ئېلېمېنت |
'toggle' |
تارتما تىزىملىكنىڭ پايدىلىنىش ئېلېمېنتى. 'toggle' نىڭ قىممىتىنى 'parent' ياكى HTMLElement پايدىلىنىشىنى قوبۇل قىلىدۇ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ پايدىلىنىش ئوبيېكتى ھۆججىتىنى كۆرۈڭ . |
كۆرسىتىش |
string |
'dynamic' |
سۈكۈت بويىچە ، بىز Popper.js نى ھەرىكەتچان ئورۇن بەلگىلەشكە ئىشلىتىمىز. بۇنى چەكلەڭ static . |
boundary
قاچاندىن باشقا قىممەتكە تەڭشەلگەنلىكىگە دىققەت قىلىڭ 'scrollParent'
، ئۇسلۇب قاچىغا position: static
قوللىنىلىدۇ .dropdown
.
ئۇسۇل |
چۈشەندۈرۈش |
$().dropdown('toggle') |
بېرىلگەن يولباشچى ياكى بەتكۈچ يولباشچىنىڭ تارتما تىزىملىكىنى بىر تەرەپ قىلىدۇ. |
$().dropdown('update') |
ئېلېمېنتنىڭ چۈشۈش ئورنىنى يېڭىلايدۇ. |
$().dropdown('dispose') |
ئېلېمېنتنىڭ تۆۋەنلىشىنى يوقىتىدۇ. |
بارلىق چۈشۈش ھادىسىلىرى ئاتا- .dropdown-menu
ئانىلار ئېلېمېنتىغا قارىتىلغان بولۇپ ، بىر خۇسۇسىيىتى بار relatedTarget
، ئۇنىڭ قىممىتى يۆتكىلىشچان لەڭگەر ئېلېمېنتى. hide.bs.dropdown
ۋە hidden.bs.dropdown
ۋەقەلەرنىڭ چېكىلىش پائالىيىتى ئۈچۈن پائالىيەت ئوبيېكتى بولغان clickEvent
خاسلىقى بار (پەقەت ئەسلىدىكى پائالىيەت تىپى بولغاندىلا ).click
Event |
چۈشەندۈرۈش |
show.bs.dropdown |
بۇ ئۈلگە كۆرسىتىش ئۇسۇلى چاقىرىلغاندا دەرھال ئوت ئاپىتى يۈز بېرىدۇ. |
shown.bs.dropdown |
بۇ ھادىسە ئىشلەتكۈچىگە كۆرۈنگەندە (CSS نىڭ ئۆتۈشىنى ساقلايدۇ) تاماملىنىدۇ. |
hide.bs.dropdown |
يوشۇرۇن ھادىسە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىلىدۇ. |
hidden.bs.dropdown |
بۇ ھادىسە چۈشۈش ئىشلەتكۈچىدىن يوشۇرۇن ھالەتتە تاماملانغاندىن كېيىن چىقىرىلىدۇ (CSS نىڭ ئۆتۈشىنى ساقلايدۇ). |