ເລື່ອນລົງ
ສະຫຼັບການວາງຊ້ອນຕາມບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ ແລະອື່ນໆອີກດ້ວຍ plugin dropdown Bootstrap.
ເລື່ອນລົງແມ່ນສາມາດສະຫຼັບໄດ້, ການວາງຊ້ອນກັນຕາມບໍລິບົດເພື່ອສະແດງລາຍຊື່ຂອງລິ້ງ ແລະອື່ນໆອີກ. ພວກມັນຖືກສ້າງປະຕິສຳພັນກັບປລັກອິນ JavaScript ແບບເລື່ອນລົງຂອງ Bootstrap. ພວກມັນຖືກສະຫຼັບໂດຍການຄລິກ, ບໍ່ແມ່ນໂດຍການເລື່ອນ; ນີ້ແມ່ນ ການຕັດສິນໃຈອອກແບບໂດຍເຈດຕະນາ.
Dropdowns ຖືກສ້າງຂຶ້ນໃນຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ, Popper.js , ເຊິ່ງສະຫນອງການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແລະການກວດສອບຊ່ອງເບິ່ງ. ໃຫ້ແນ່ໃຈວ່າລວມເອົາ popper.min.js ກ່ອນ JavaScript ຂອງ Bootstrap ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper.js. Popper.js ບໍ່ໄດ້ຖືກນໍາໃຊ້ເພື່ອຈັດຕໍາແຫນ່ງ dropdowns ໃນ navbars ເຖິງແມ່ນວ່າການວາງຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແມ່ນບໍ່ຈໍາເປັນ.
ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js .
ມາດ ຕະ ຖານ WAI ARIA ກໍານົດ role="menu"widget ຕົວຈິງ , ແຕ່ນີ້ແມ່ນສະເພາະກັບເມນູທີ່ຄ້າຍຄືຄໍາຮ້ອງສະຫມັກທີ່ຈະກະຕຸ້ນການປະຕິບັດຫຼືຫນ້າທີ່. ເມນູ ARIA ສາມາດມີພຽງແຕ່ລາຍການເມນູ, ລາຍການເມນູກ່ອງກາໝາຍ, ລາຍການເມນູປຸ່ມວິທະຍຸ, ກຸ່ມປຸ່ມວິທະຍຸ ແລະເມນູຍ່ອຍ.
ໃນທາງກົງກັນຂ້າມ, ການຫຼຸດລົງຂອງ Bootstrap ໄດ້ຖືກອອກແບບເພື່ອໃຫ້ເປັນແບບທົ່ວໄປແລະໃຊ້ໄດ້ກັບຫຼາຍໆສະຖານະການແລະໂຄງສ້າງເຄື່ອງຫມາຍ. ຕົວຢ່າງ, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງ dropdowns ທີ່ມີ inputs ເພີ່ມເຕີມແລະການຄວບຄຸມແບບຟອມ, ເຊັ່ນ: ຊ່ອງຄົ້ນຫາຫຼືແບບຟອມເຂົ້າສູ່ລະບົບ. ສໍາລັບເຫດຜົນນີ້, Bootstrap ບໍ່ໄດ້ຄາດຫວັງ (ຫຼືເພີ່ມອັດຕະໂນມັດ) ໃດໆ roleແລະ aria-ຄຸນລັກສະນະທີ່ຕ້ອງການສໍາລັບ ເມນູ ARIA ທີ່ແທ້ຈິງ. ຜູ້ຂຽນຈະຕ້ອງລວມເອົາຄຸນລັກສະນະສະເພາະເຫຼົ່ານີ້ດ້ວຍຕົນເອງ.
ຢ່າງໃດກໍຕາມ, Bootstrap ເພີ່ມການສະຫນັບສະຫນູນໃນຕົວສໍາລັບການໂຕ້ຕອບຂອງເມນູແປ້ນພິມມາດຕະຖານສ່ວນໃຫຍ່, ເຊັ່ນ: ຄວາມສາມາດໃນການຍ້າຍຜ່ານ .dropdown-itemອົງປະກອບສ່ວນບຸກຄົນໂດຍໃຊ້ປຸ່ມຕົວກະພິບແລະປິດເມນູດ້ວຍ ESCປຸ່ມ.
ຫໍ່ປິດສະຫຼັບຂອງແບບເລື່ອນລົງ (ປຸ່ມ ຫຼືລິ້ງຂອງທ່ານ) ແລະເມນູເລື່ອນລົງພາຍໃນ .dropdown, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;. Dropdowns ສາມາດຖືກກະຕຸ້ນຈາກ <a>ຫຼື <button>ອົງປະກອບເພື່ອໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການທີ່ເປັນໄປໄດ້ຂອງທ່ານ.
ອັນໃດອັນໜຶ່ງ .btnສາມາດປ່ຽນເປັນປຸ່ມສະຫຼັບແບບເລື່ອນລົງໄດ້ ໂດຍມີການປ່ຽນແປງເຄື່ອງໝາຍບາງອັນ. ນີ້ແມ່ນວິທີທີ່ເຈົ້າສາມາດເຮັດໃຫ້ພວກມັນເຮັດວຽກກັບ <button>ອົງປະກອບທັງສອງຢ່າງ:
<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>ແລະມີ <a>ອົງປະກອບ:
<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>ສ່ວນທີ່ດີທີ່ສຸດແມ່ນທ່ານສາມາດເຮັດສິ່ງນີ້ກັບຕົວແປປຸ່ມໃດໆ, ເຊັ່ນກັນ:
<!-- 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>ເຊັ່ນດຽວກັນ, ສ້າງການເລື່ອນລົງປຸ່ມທີ່ແບ່ງອອກໂດຍມີເຄື່ອງຫມາຍ virtually ຄືກັນກັບການເລື່ອນລົງປຸ່ມດຽວ, ແຕ່ມີການເພີ່ມເຕີມ .dropdown-toggle-splitສໍາລັບຊ່ອງຫວ່າງທີ່ເຫມາະສົມປະມານແຖບເລື່ອນລົງ.
ພວກເຮົາໃຊ້ຊັ້ນຮຽນພິເສດນີ້ເພື່ອຫຼຸດແນວນອນ paddingຢູ່ດ້ານໃດຂ້າງຂອງຄາບໄວ້ 25% ແລະເອົາອັນ margin-leftທີ່ເພີ່ມມາສຳລັບການເລື່ອນລົງປຸ່ມປົກກະຕິ. ການປ່ຽນແປງພິເສດເຫຼົ່ານັ້ນເຮັດໃຫ້ຄາບຕິດຢູ່ກາງປຸ່ມແຍກ ແລະໃຫ້ພື້ນທີ່ຕີຂະໜາດທີ່ເໝາະສົມກວ່າຢູ່ຂ້າງປຸ່ມຫຼັກ.
<!-- 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>ປຸ່ມເລື່ອນລົງເຮັດວຽກກັບປຸ່ມທຸກຂະໜາດ, ລວມທັງປຸ່ມແບບເລື່ອນລົງແບບເລີ່ມຕົ້ນ ແລະການແບ່ງປັນ.
<!-- 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ໃສ່ອົງປະກອບຫຼັກ.
<!-- 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ໃສ່ອົງປະກອບຫຼັກ.
<!-- 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>ກະຕຸ້ນເມນູແບບເລື່ອນລົງທາງຊ້າຍຂອງອົງປະກອບໂດຍການເພີ່ມ .dropleftໃສ່ອົງປະກອບຫຼັກ.
<!-- 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>ເນື້ອໃນເມນູແບບເລື່ອນລົງປະຫວັດສາດ ຕ້ອງ ເປັນການເຊື່ອມຕໍ່, ແຕ່ນັ້ນບໍ່ແມ່ນກໍລະນີກັບ v4 ອີກຕໍ່ໄປ. ໃນປັດຈຸບັນທ່ານສາມາດເລືອກໃຊ້ <button>ອົງປະກອບໃນ dropdowns ຂອງທ່ານແທນທີ່ຈະເປັນພຽງແຕ່ <a>s.
<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>ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູເລື່ອນລົງຈະຖືກຈັດວາງໂດຍອັດຕະໂນມັດ 100% ຈາກດ້ານເທິງ ແລະທາງຊ້າຍຂອງພໍ່ແມ່ຂອງມັນ. ຕື່ມການໃສ່ .dropdown-menu-rightໄປ .dropdown-menuທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.
ລະວັງ! Dropdowns ແມ່ນຖືກຈັດໃສ່ຍ້ອນ Popper.js (ຍົກເວັ້ນເມື່ອພວກມັນຖືກບັນຈຸຢູ່ໃນແຖບ navbar).
<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>ເພີ່ມສ່ວນຫົວໃສ່ປ້າຍກຳກັບພາກສ່ວນຂອງຄຳສັ່ງຢູ່ໃນເມນູແບບເລື່ອນລົງໃດໆກໍຕາມ.
<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>ແຍກກຸ່ມຂອງລາຍການເມນູທີ່ກ່ຽວຂ້ອງດ້ວຍຕົວແບ່ງ.
<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 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>ເພີ່ມ .activeໃສ່ລາຍການໃນລາຍການແບບເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນການເຄື່ອນໄຫວ .
<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>ເພີ່ມ .disabledໃສ່ລາຍການໃນເມນູເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນປິດໃຊ້ງານ .
<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>ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ ຫຼື JavaScript, ປລັກອິນແບບເລື່ອນລົງຈະສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ (ເມນູແບບເລື່ອນລົງ) ໂດຍການສະຫຼັບ .showຊັ້ນຮຽນຢູ່ໃນລາຍການລາຍຊື່ຫຼັກ. ຄຸນລັກ ສະ data-toggle="dropdown"ນະແມ່ນອີງໃສ່ການປິດເມນູແບບເລື່ອນລົງໃນລະດັບແອັບພລິເຄຊັນ, ສະນັ້ນມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ມັນຕະຫຼອດເວລາ.
ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາຜັດ, ການເປີດເມນູແບບເລື່ອນລົງຈະເພີ່ມຕົວຈັດການຫວ່າງເປົ່າ ( $.noop) mouseoverໃຫ້ກັບເດັກນ້ອຍໃນທັນທີຂອງ <body>ອົງປະກອບ. ການ hack ທີ່ຫນ້າກຽດທີ່ຍອມຮັບນີ້ແມ່ນມີຄວາມຈໍາເປັນເພື່ອເຮັດວຽກຮອບໆ quirk ໃນ iOS' event delegation , ເຊິ່ງຖ້າບໍ່ດັ່ງນັ້ນຈະປ້ອງກັນການປາດຈາກບ່ອນໃດກໍ່ຕາມຢູ່ນອກ dropdown ຈາກການກະຕຸ້ນລະຫັດທີ່ປິດ dropdown ໄດ້. ເມື່ອ dropdown ໄດ້ຖືກປິດ, mouseoverhandlers ຫວ່າງເພີ່ມເຕີມເຫຼົ່ານີ້ໄດ້ຖືກໂຍກຍ້າຍອອກ.
ເພີ່ມ data-toggle="dropdown"ໃສ່ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບການເລື່ອນລົງ.
<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>ໂທຫາ dropdowns ຜ່ານ JavaScript:
$('.dropdown-toggle').dropdown()data-toggle="dropdown"ຍັງຕ້ອງການ
ບໍ່ວ່າທ່ານຈະໂທຫາ dropdown ຂອງທ່ານຜ່ານ JavaScript ຫຼືແທນທີ່ຈະໃຊ້ data-api, data-toggle="dropdown"ສະເຫມີຈໍາເປັນຕ້ອງມີຢູ່ໃນອົງປະກອບ trigger ຂອງ dropdown.
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-offset="".
| ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
|---|---|---|---|
| ຊົດເຊີຍ | ເລກ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 0 | ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper.js . |
| ພິກ | ບູລີນ | ຄວາມຈິງ | ອະນຸຍາດໃຫ້ເລື່ອນລົງເພື່ອພິກໃນກໍລະນີມີການທັບຊ້ອນກັນຢູ່ໃນອົງປະກອບອ້າງອີງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Popper.js's flip docs . |
| ເຂດແດນ | ຊ່ອຍແນ່ | ອົງປະກອບ | 'scrollParent' | Overflow ຂອບເຂດຈໍາກັດຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ 'viewport', 'window', 'scrollParent', ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Docs PreventOverflow ຂອງ Popper.js . |
ໝາຍເຫດເມື່ອ boundaryຖືກຕັ້ງເປັນຄ່າອື່ນນອກເໜືອໄປຈາກ 'scrollParent', ຮູບແບບ position: staticຈະຖືກນຳໃຊ້ກັບ .dropdownບັນຈຸ.
| ວິທີການ | ລາຍລະອຽດ |
|---|---|
$().dropdown('toggle') |
ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ. |
$().dropdown('update') |
ອັບເດດຕຳແໜ່ງການເລື່ອນລົງຂອງອົງປະກອບໃດໜຶ່ງ. |
$().dropdown('dispose') |
ທໍາລາຍການເລື່ອນລົງຂອງອົງປະກອບ. |
ເຫດການແບບເລື່ອນລົງທັງໝົດຖືກຍິງຢູ່ທີ່ ອົງປະກອບຫຼັກ .dropdown-menuຂອງອົງປະກອບ ແລະ ມີ relatedTargetຄຸນສົມບັດ, ເຊິ່ງຄ່າຂອງມັນແມ່ນອົງປະກອບສະມໍ.
| ເຫດການ | ລາຍລະອຽດ |
|---|---|
show.bs.dropdown |
ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອວິທີການສະແດງຕົວຢ່າງຖືກເອີ້ນ. |
shown.bs.dropdown |
ເຫດການນີ້ຖືກຍິງອອກເມື່ອການເລື່ອນລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS, ເພື່ອໃຫ້ສໍາເລັດ). |
hide.bs.dropdown |
ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອວິທີການເຊື່ອງຕົວຢ່າງຖືກເອີ້ນ. |
hidden.bs.dropdown |
ເຫດການນີ້ຖືກຍິງອອກໄປເມື່ອການເລື່ອນລົງໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS, ເພື່ອໃຫ້ສໍາເລັດ). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})