Ochiladigan menyular
Bootstrap ochiladigan plagin yordamida havolalar roʻyxati va boshqalarni koʻrsatish uchun kontekstli qoplamalarni oʻchirib qoʻying.
Umumiy koʻrinish
Ochiladigan menyular o'zgaruvchan, havolalar ro'yxatini ko'rsatish uchun kontekstli qoplamalar va boshqalar. Ular kiritilgan Bootstrap ochiladigan JavaScript plagini bilan interaktiv qilingan. Ular kursorni bosish orqali emas, balki bosish orqali almashtiriladi; Bu qasddan qilingan dizayn qarori .
Ochiladigan menyular Popper uchinchi tomon kutubxonasida qurilgan bo'lib , u dinamik joylashishni aniqlash va ko'rish maydonini aniqlash imkonini beradi. Bootstrap JavaScript-dan oldin popper.min.js ni qo'shishni yoki Popperni o'z ichiga olgan bootstrap.bundle.min.js
/ dan foydalanishni unutmang . bootstrap.bundle.js
Popper navigatsiya panellarida ochiladigan menyularni joylashtirish uchun ishlatilmaydi, ammo dinamik joylashishni aniqlash shart emas.
Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js
.
Foydalanish imkoniyati
WAI ARIArole="menu"
standarti haqiqiy vidjetni belgilaydi , ammo bu amallar yoki funksiyalarni ishga tushiradigan dasturga o'xshash menyularga xosdir. ARIA menyularida faqat menyu elementlari, katakchalar menyusi elementlari, radio tugmalar menyusi elementlari, radio tugmalar guruhlari va pastki menyular bo'lishi mumkin.
Boshqa tomondan, Bootstrap-ning ochiladigan ro'yxatlari umumiy bo'lib, turli vaziyatlar va belgilash tuzilmalari uchun qo'llanilishi uchun mo'ljallangan. Masalan, qidiruv maydonlari yoki kirish shakllari kabi qo'shimcha kirishlar va shakl boshqaruvlarini o'z ichiga olgan ochiladigan menyularni yaratish mumkin. Shu sababli, Bootstrap haqiqiy ARIA menyulari uchun zarur bo'lgan role
va aria-
atributlardan hech birini kutmaydi (va avtomatik ravishda qo'shmaydi) . Mualliflar ushbu aniqroq atributlarni o'zlari kiritishlari kerak.
Biroq, Bootstrap ko'pgina standart klaviatura menyusi o'zaro ta'sirlari uchun o'rnatilgan yordamni qo'shadi, masalan, .dropdown-item
kursor tugmachalari yordamida alohida elementlar bo'ylab harakatlanish va menyuni tugma bilan yopish qobiliyati ESC.
Misollar
Ochilish tugmachasini (tugmangiz yoki havolangiz) va ochiladigan menyuni .dropdown
yoki ni e'lon qiladigan boshqa elementni o'rang position: relative;
. Potensial ehtiyojlaringizni yaxshiroq qondirish uchun ochiladigan menyular <a>
yoki elementlardan ishga tushirilishi mumkin .<button>
Yagona tugma
Har qanday singl .btn
ba'zi belgilash o'zgarishlari bilan ochiladigan menyuga aylantirilishi mumkin. <button>
Ularni ikkala element bilan ishlashga qanday qo'yishingiz mumkin :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Va <a>
elementlar bilan:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Eng yaxshi tomoni shundaki, siz buni istalgan tugma varianti bilan ham qilishingiz mumkin:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Ajratish tugmasi
Xuddi shunday, ochiladigan ochiladigan tugmachalarni bir xil tugmachalar bilan deyarli bir xil belgilar bilan, lekin .dropdown-toggle-split
ochiladigan karet atrofida to'g'ri bo'sh joy uchun qo'shilgan holda yarating.
padding
Biz karetaning har ikki tomonidagi gorizontalni 25% ga qisqartirish va margin-left
oddiy ochiladigan tugmalar uchun qo'shilganlarni olib tashlash uchun ushbu qo'shimcha sinfdan foydalanamiz. Ushbu qo'shimcha o'zgarishlar karetni ajratish tugmachasining markazida ushlab turadi va asosiy tugma yonida yanada mosroq o'lchamdagi urish maydonini ta'minlaydi.
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Hajmi
Ochiladigan tugmachalar barcha o'lchamdagi tugmalar bilan ishlaydi, shu jumladan standart va ajratilgan ochiladigan tugmalar.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Yo'nalishlar
Ochilish
.dropup
Asosiy elementga qo'shish orqali elementlar ustidagi ochiladigan menyularni ishga tushiring.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
.dropright
Asosiy elementga qo'shish orqali elementlarning o'ng tomonidagi ochiladigan menyularni ishga tushiring .
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Chap tomonda
.dropleft
Asosiy elementga qo'shish orqali elementlarning chap tomonidagi ochiladigan menyularni ishga tushiring .
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
Menyu elementlari
Tarixiy ravishda ochiladigan menyu mazmuni havolalar bo'lishi kerak edi , lekin bu endi v4 bilan emas. Endi siz ixtiyoriy ravishda ochiladigan menyuda faqat s <button>
o'rniga elementlardan foydalanishingiz mumkin.<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Bundan tashqari, bilan interaktiv bo'lmagan ochiladigan elementlarni yaratishingiz mumkin .dropdown-item-text
. Maxsus CSS yoki matn yordam dasturlari yordamida uslubni yanada qulayroq qiling.
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Faol
.active
Ochiladigan menyudagi elementlarga qo'shing va ularni faol deb belgilang .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
O'chirilgan
.disabled
Ochiladigan ro'yxatdagi elementlarga qo'shing , ularni o'chirib qo'ying .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Menyuni tekislash
Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Ochiladigan .dropdown-menu-right
menyuni .dropdown-menu
o'ngga tekislang.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Javobgar tekislash
Agar javob beruvchi hizalamadan foydalanmoqchi bo'lsangiz, atributni qo'shish orqali dinamik joylashishni aniqlashni o'chiring data-display="static"
va sezgir o'zgaruvchanlik sinflaridan foydalaning.
Ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq o'ngga tekislash uchun qo'shing .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Chap ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq bilan tekislash uchun .dropdown-menu-right
va qo'shing .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
data-display="static"
Esda tutingki , navigatsiya panelidagi ochiladigan tugmalarga atribut qo'shish shart emas , chunki Popper navigatsiya panellarida ishlatilmaydi.
Menyu tarkibi
Sarlavhalar
Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
Ajratuvchilar
Tegishli menyu elementlarini ajratuvchi bilan ajrating.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
Matn
Erkin shakldagi har qanday matnni matnli ochiladigan menyuga joylashtiring va intervalli yordam dasturlaridan foydalaning . Menyu kengligini cheklash uchun sizga qo'shimcha o'lcham uslublari kerak bo'lishi mumkinligini unutmang.
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
Shakllar
Shaklni ochiladigan menyuga qo'ying yoki uni ochiladigan menyuga aylantiring va unga kerakli salbiy bo'sh joy berish uchun chekka yoki to'ldirish yordam dasturlaridan foydalaning.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Ochiladigan variantlar
Ochiladigan ro'yxatning joylashuvini o'zgartirish uchun data-offset
yoki dan foydalaning .data-reference
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
Foydalanish
Ma'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin ota-onadagi .show
sinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi .dropdown-menu
. Atribut data-toggle="dropdown"
ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.
$.noop
)
ishlov beruvchilarni qo'shadi. Bu, shubhasiz, xunuk
buzg'unchilik iOS-ning tadbirlar delegatsiyasidagi g'alati muammoni hal qilish uchun zarur bo'lib, aks holda ochiladigan menyudan tashqaridagi istalgan joyga teginish ochiladigan menyuni yopuvchi kodni ishga tushirishiga yo'l qo'ymaydi. Ochiladigan menyu yopilgach, ushbu qo'shimcha bo'sh
ishlov beruvchilar o'chiriladi.
mouseover
<body>
mouseover
Ma'lumotlar atributlari orqali
data-toggle="dropdown"
Ochiladigan menyuni almashtirish uchun havola yoki tugmaga qo'shing .
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScript orqali
JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
hali ham talab qilinadi
Ochiladigan menyuga JavaScript orqali qo'ng'iroq qilishingiz yoki uning o'rniga data-api dan foydalanmasligingizdan qat'i nazar, data-toggle="dropdown"
har doim ochiladigan menyuning tetik elementida bo'lish talab qilinadi.
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-offset=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
ofset | raqam | string | funktsiyasi | 0 | Ochiladigan ro'yxatning maqsadiga nisbatan ofset. Ofsetni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida ofset ma'lumotlarini o'z ichiga olgan ob'ekt bilan chaqiriladi. Funktsiya bir xil tuzilishga ega ob'ektni qaytarishi kerak. DOM tugunining ishga tushiruvchi elementi ikkinchi argument sifatida uzatiladi. Qo'shimcha ma'lumot olish uchun Popperning ofset hujjatlariga qarang . |
aylantirmoq | mantiqiy | rost | Agar mos yozuvlar elementi bir-biriga o‘xshab qolsa, ochiladigan menyuni aylantirishga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popper's flip docs ga qarang . |
chegara | string | element | 'scrollParent' | Ochiladigan menyuning to'lib ketish cheklovi chegarasi. 'viewport' , 'window' , 'scrollParent' , yoki HTMLElement havolasi qiymatlarini qabul qiladi (faqat JavaScript). Qo'shimcha ma'lumot olish uchun Popperning preventOverflow hujjatlariga qarang . |
ma'lumotnoma | string | element | "o'tish" | Ochiladigan menyuning mos yozuvlar elementi. 'toggle' , 'parent' yoki HTMLElement havolasi qiymatlarini qabul qiladi . Qo'shimcha ma'lumot olish uchun Popper's referenceObject docs ga qarang . |
ko'rsatish | ip | "dinamik" | Odatiy bo'lib, biz dinamik joylashishni aniqlash uchun Popperdan foydalanamiz. Buni bilan o'chirib qo'ying static . |
popperConfig | null | ob'ekt | null | Bootstrap-ning standart Popper konfiguratsiyasini o'zgartirish uchun Popper konfiguratsiyasiga qarang |
E'tibor bering, qachon boundary
boshqa qiymatga o'rnatilgan bo'lsa 'scrollParent'
, uslub konteynerga position: static
qo'llaniladi ..dropdown
Usullari
Usul | Tavsif |
---|---|
$().dropdown('toggle') |
Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi. |
$().dropdown('show') |
Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini ko'rsatadi. |
$().dropdown('hide') |
Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini yashiradi. |
$().dropdown('update') |
Elementning ochiladigan ro'yxatining o'rnini yangilaydi. |
$().dropdown('dispose') |
Elementning ochiladigan ro'yxatini yo'q qiladi. |
Voqealar
Barcha ochiladigan hodisalar .dropdown-menu
'ning asosiy elementida ishga tushiriladi va relatedTarget
qiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega. hide.bs.dropdown
va hidden.bs.dropdown
hodisalar bosish hodisasi uchun Hodisa ob'ektini o'z ichiga olgan clickEvent
xususiyatga ega (faqat asl hodisa turi bo'lsa ).click
Tadbir | Tavsif |
---|---|
show.bs.dropdown |
Bu hodisa shou namunasi usuli chaqirilganda darhol ishga tushadi. |
shown.bs.dropdown |
Ushbu hodisa ochiladigan ro'yxat foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.dropdown |
Hide misol usuli chaqirilganda, bu hodisa darhol ishga tushiriladi. |
hidden.bs.dropdown |
Ushbu hodisa ochiladigan menyu foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})