Source

Ochiladigan menyular

Bootstrap ochiladigan plagin yordamida havolalar roʻyxatini 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.js uchinchi tomon kutubxonasida qurilgan bo'lib , u dinamik joylashishni aniqlash va ko'rish maydonini aniqlash imkonini beradi. Bootstrap-ning JavaScript-dan oldin popper.min.js -ni qo'shganingizga ishonch hosil qiling yoki Popper.js bootstrap.bundle.min.js- dan foydalaning bootstrap.bundle.js. Popper.js 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, katakcha menyusi elementlari, radio tugmalar menyusi elementlari, radio tugmalar guruhlari va pastki menyular bo'lishi mumkin.

Boshqa tomondan, Bootstrap-ning ochiladigan ro'yxatlari umumiy bo'lishi va 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 roleva 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-itemkursor tugmachalari yordamida alohida elementlar bo'ylab harakatlanish va menyuni tugma bilan yopish qobiliyati ESC.

Misollar

Ochilish tugmachasini (tugmangiz yoki havolangiz) va ochiladigan menyuni .dropdownyoki 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 tugmachalar ochiladi

Har qanday singl .btnba'zi belgilash o'zgarishlari bilan ochiladigan menyuga aylantirilishi mumkin. <button>Ularni ikkala element bilan ishlashga qanday qo'yishingiz mumkin :

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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:

Action Another action Something else here 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

Ochiladigan tugmachalarni ajratish

Xuddi shunday, ochiladigan ochiladigan tugmachalarni bir xil tugmachalar bilan deyarli bir xil belgilar bilan, lekin .dropdown-toggle-splitochiladigan karet atrofida to'g'ri bo'sh joy uchun qo'shilgan holda yarating.

paddingBiz karetaning har ikki tomonidagi gorizontalni 25% ga qisqartirish va margin-leftoddiy 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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup o'zgarishi

.dropupAsosiy elementga qo'shish orqali elementlar ustidagi ochiladigan menyularni ishga tushiring.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropning o'zgarishi

.droprightAsosiy elementga qo'shish orqali elementlarning o'ng tomonidagi ochiladigan menyularni ishga tushiring .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Chapdagi o'zgarish

.dropleftAsosiy elementga qo'shish orqali elementlarning chap tomonidagi ochiladigan menyularni ishga tushiring .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

Tarixiy jihatdan ochiladigan menyu mazmuni havolalar bo'lishi kerak edi , ammo 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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Ochiladigan .dropdown-menu-rightmenyuni .dropdown-menuo'ngga tekislang.

Oldindan qisqa ma'lumot berish! Ochiladigan menyular Popper.js tufayli joylashtiriladi (ular navigatsiya panelida bo'lmaganidan tashqari).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.

Ochiladigan sarlavha
Harakat Yana bir harakat 
<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>

Tegishli menyu elementlarini ajratuvchi bilan ajrating.

Harakat Yana bir harakat Bu yerda boshqa narsa
Ajratilgan havola 
<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>

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.

Bu yerda yangimi? Ro'yxatdan o'tish Parolni unutdingizmi? 
<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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Faol menyu elementlari

.activeOchiladigan ro'yxatdagi elementlarga qo'shing va ularni faol deb belgilang .

Oddiy havola Faol havola Boshqa havola 
<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 menyu elementlari

.disabledOchiladigan ro'yxatdagi elementlarga qo'shing , ularni o'chirib qo'ying .

Oddiy havola O'chirilgan havola Boshqa havola 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Foydalanish

.showMa'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin asosiy ro'yxat elementidagi sinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi . Atribut data-toggle="dropdown"ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.

Sensorli qurilmalarda ochiladigan menyuni ochish elementning bevosita bolalariga bo'sh ( $.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 id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </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. Qo'shimcha ma'lumot olish uchun Popper.js 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.js ning 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 Popper.js'ning preventOverflow hujjatlariga qarang .

E'tibor bering, qachon boundaryboshqa qiymatga o'rnatilgan bo'lsa 'scrollParent', uslub konteynerga position: staticqo'llaniladi ..dropdown

Usullari

Usul Tavsif
$().dropdown('toggle') Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.
$().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 relatedTargetqiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega.

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 ro'yxatni foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})