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 ARIA role="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 tugma

Har qanday singl .btnba'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" 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:

<div class="dropdown">
  <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:

<!-- 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>

Ajratish tugmasi

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.

<!-- 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>

Yo'nalishlar

Ochilish

.dropupAsosiy 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-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>

Dropright

.droprightAsosiy 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-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>

Chap tomonda

.dropleftAsosiy 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-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 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" 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>

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

.activeOchiladigan 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

.disabledOchiladigan 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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

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-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>

Ochiladigan ro'yxatning joylashuvini o'zgartirish uchun data-offsetyoki dan foydalaning .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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

.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 .
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.js's referenceObject docs ga qarang .
ko'rsatish	ip	"dinamik"	Odatiy bo'lib, biz dinamik joylashishni aniqlash uchun Popper.js dan foydalanamiz. Buni bilan o'chirib qo'ying `static`.

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. hide.bs.dropdownva hidden.bs.dropdownhodisalar bosish hodisasi uchun Hodisa ob'ektini o'z ichiga olgan clickEventxususiyatga 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 ro'yxatni foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Ochiladigan menyular

Umumiy koʻrinish

Foydalanish imkoniyati

Misollar

Yagona tugma

Ajratish tugmasi

Hajmi

Yo'nalishlar

Ochilish

Dropright

Chap tomonda

Menyu elementlari

Faol

O'chirilgan

Menyuni tekislash

Menyu tarkibi

Sarlavhalar

Ajratuvchilar

Matn

Shakllar

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript orqali

`data-toggle="dropdown"`hali ham talab qilinadi

Variantlar

Usullari

Voqealar

Ochiladigan menyular

Umumiy koʻrinish

Foydalanish imkoniyati

Misollar

Yagona tugma

Ajratish tugmasi

Hajmi

Yo'nalishlar

Ochilish

Dropright

Chap tomonda

Menyu elementlari

Faol

O'chirilgan

Menyuni tekislash

Menyu tarkibi

Sarlavhalar

Ochiladigan sarlavha

Ajratuvchilar

Matn

Shakllar

Ochiladigan variantlar

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript orqali

data-toggle="dropdown"hali ham talab qilinadi

Variantlar

Usullari

Voqealar

`data-toggle="dropdown"`hali ham talab qilinadi