ទម្លាក់ចុះ
បិទ/បើកការត្រួតលើគ្នាតាមបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងអ្វីៗជាច្រើនទៀតដោយប្រើកម្មវិធីជំនួយទម្លាក់ចុះ Bootstrap ។
ទិដ្ឋភាពទូទៅ
ការទម្លាក់ចុះគឺអាចបិទបើកបាន ការត្រួតលើបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងច្រើនទៀត។ ពួកវាត្រូវបានធ្វើអន្តរកម្មជាមួយនឹងកម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ Bootstrap រួមបញ្ចូល។ ពួកវាត្រូវបានបិទបើកដោយការចុច មិនមែនដោយសំកាំងទេ។ នេះគឺជា ការសម្រេចចិត្តរចនាដោយចេតនា ។
ការទម្លាក់ចុះត្រូវបានបង្កើតឡើងនៅលើបណ្ណាល័យភាគីទីបី Popper ដែលផ្តល់នូវទីតាំងថាមវន្ត និងការរកឃើញច្រកចូលមើល។ ត្រូវប្រាកដថារួមបញ្ចូល popper.min.js មុនពេល JavaScript របស់ Bootstrap ឬប្រើ bootstrap.bundle.min.js
/ bootstrap.bundle.js
ដែលមាន Popper ។ Popper មិនត្រូវបានប្រើដើម្បីដាក់ទីតាំងទម្លាក់ចុះក្នុង navbars ទោះបីជាមិនទាមទារទីតាំងថាមវន្តក៏ដោយ។
ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារutil.js
.
ភាពងាយស្រួល
ស្ដង់ដា រ WAI ARIA កំណត់ role="menu"
ធាតុក្រាហ្វិក ពិតប្រាកដ មួយ ប៉ុន្តែនេះគឺជាក់លាក់ចំពោះម៉ឺនុយដូចកម្មវិធីដែលបង្កឱ្យមានសកម្មភាព ឬមុខងារ។ ម៉ឺនុយ ARIA អាចមានតែធាតុម៉ឺនុយ ធាតុម៉ឺនុយប្រអប់ធីក ធាតុម៉ឺនុយប៊ូតុងមូល ក្រុមប៊ូតុងមូល និងម៉ឺនុយរង។
ម្យ៉ាងវិញទៀត ការទម្លាក់ចុះរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីឱ្យមានលក្ខណៈទូទៅ និងអាចអនុវត្តបានចំពោះស្ថានភាពផ្សេងៗ និងរចនាសម្ព័ន្ធសម្គាល់។ ជាឧទាហរណ៍ វាអាចបង្កើតបញ្ជីទម្លាក់ចុះដែលមានការបញ្ចូលបន្ថែម និងការគ្រប់គ្រងទម្រង់ ដូចជាវាលស្វែងរក ឬទម្រង់ចូល។ សម្រាប់ហេតុផលនេះ Bootstrap មិនរំពឹងថា (ឬបន្ថែមដោយស្វ័យប្រវត្តិ) ណាមួយនៃ role
និង aria-
គុណលក្ខណៈដែលត្រូវការសម្រាប់ ម៉ឺនុយ ARIA ពិត។ អ្នកនិពន្ធនឹងត្រូវបញ្ចូលគុណលក្ខណៈជាក់លាក់បន្ថែមទៀតទាំងនេះដោយខ្លួនឯង។
ទោះជាយ៉ាងណាក៏ដោយ Bootstrap បន្ថែមការគាំទ្រដែលភ្ជាប់មកជាមួយសម្រាប់អន្តរកម្មម៉ឺនុយក្តារចុចស្តង់ដារភាគច្រើន ដូចជាសមត្ថភាពក្នុងការផ្លាស់ទីតាមរយៈ .dropdown-item
ធាតុនីមួយៗដោយប្រើគ្រាប់ចុចទស្សន៍ទ្រនិច និងបិទម៉ឺនុយដោយប្រើ ESCគ្រាប់ចុច។
ឧទាហរណ៍
រុំបិទបើករបស់ទម្លាក់ចុះ (ប៊ូតុង ឬតំណរបស់អ្នក) និងម៉ឺនុយទម្លាក់ចុះនៅក្នុង .dropdown
ឬធាតុផ្សេងទៀតដែលប្រកាស position: relative;
។ ការទម្លាក់ចុះអាចត្រូវបានបង្កឡើងពី <a>
ឬ <button>
ធាតុនានាដើម្បីឱ្យសមនឹងតម្រូវការសក្តានុពលរបស់អ្នក។
ប៊ូតុងតែមួយ
មួយណា .btn
ក៏បានអាចត្រូវបានប្រែក្លាយទៅជាការបិទបើកដោយទម្លាក់ចុះជាមួយនឹងការផ្លាស់ប្តូរការសម្គាល់មួយចំនួន។ នេះជារបៀបដែលអ្នកអាចដាក់ពួកវាឱ្យធ្វើការជាមួយ <button>
ធាតុទាំងពីរ៖
<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>
ហើយជាមួយនឹង <a>
ធាតុ៖
<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>
ផ្នែកដ៏ល្អបំផុតគឺអ្នកអាចធ្វើវាបានជាមួយនឹងវ៉ារ្យ៉ង់ប៊ូតុងណាមួយផងដែរ៖
<!-- 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>
ប៊ូតុងបំបែក
ស្រដៀងគ្នានេះដែរ បង្កើតការទម្លាក់ចុះនៃប៊ូតុងបំបែកជាមួយនឹងសញ្ញាសម្គាល់ស្ទើរតែដូចគ្នាទៅនឹងការទម្លាក់ចុះនៃប៊ូតុងតែមួយ ប៉ុន្តែជាមួយនឹងការបន្ថែម .dropdown-toggle-split
សម្រាប់គម្លាតត្រឹមត្រូវជុំវិញប្រអប់ទម្លាក់ចុះ។
យើងប្រើថ្នាក់បន្ថែមនេះ ដើម្បីកាត់បន្ថយការផ្តេក padding
នៅផ្នែកម្ខាងៗនៃ cart 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-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-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>
ទិសដៅ
ទម្លាក់ចុះ
កេះម៉ឺនុយទម្លាក់ចុះខាងលើធាតុដោយបន្ថែម .dropup
ទៅធាតុមេ។
<!-- 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
ទៅធាតុមេ។
<!-- 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>
ទម្លាក់
កេះម៉ឺនុយទម្លាក់ចុះនៅខាងឆ្វេងនៃធាតុដោយបន្ថែម .dropleft
ទៅធាតុមេ។
<!-- 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>
ធាតុម៉ឺនុយ
មាតិកាម៉ឺនុយទម្លាក់ចុះជាប្រវត្តិសាស្ត្រ ត្រូវតែ ជាតំណភ្ជាប់ ប៉ុន្តែនោះមិនមែនជាករណីជាមួយ v4 ទៀតទេ។ ឥឡូវនេះអ្នកអាចប្រើជាជម្រើសក្នុងការប្រើ <button>
ធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះរបស់អ្នកជំនួសឱ្យគ្រាន់តែ <a>
s ។
<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>
អ្នកក៏អាចបង្កើតធាតុទម្លាក់ចុះដែលមិនអន្តរកម្មជាមួយ .dropdown-item-text
. មានអារម្មណ៍សេរីដើម្បីធ្វើរចនាប័ទ្មបន្ថែមទៀតជាមួយ CSS ឬឧបករណ៍ប្រើប្រាស់អត្ថបទផ្ទាល់ខ្លួន។
<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>
សកម្ម
បន្ថែម .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">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
ការតម្រឹមម៉ឺនុយ
តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ 100% ពីខាងលើ និងនៅផ្នែកខាងឆ្វេងនៃមេរបស់វា។ បន្ថែម .dropdown-menu-right
ទៅ .dropdown-menu
ស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។
<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>
ការតម្រឹមឆ្លើយតប
ប្រសិនបើអ្នកចង់ប្រើការតម្រឹមឆ្លើយតប សូមបិទការកំណត់ទីតាំងថាមវន្តដោយបន្ថែម data-display="static"
គុណលក្ខណៈ ហើយប្រើថ្នាក់បំរែបំរួលដែលឆ្លើយតប។
ដើម្បីតម្រឹម ខាងស្តាំ ម៉ឺនុយទម្លាក់ចុះជាមួយនឹងចំណុចឈប់ដែលបានផ្តល់ឱ្យ ឬធំជាងនេះ សូមបន្ថែម .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>
ដើម្បីតម្រឹម ខាងឆ្វេង ម៉ឺនុយទម្លាក់ចុះជាមួយនឹងចំណុចឈប់ដែលបានផ្តល់ឱ្យឬធំជាងនេះ បន្ថែម .dropdown-menu-right
និង .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"
គុណលក្ខណៈទៅប៊ូតុងទម្លាក់ចុះនៅក្នុងរបាររុករកទេ ដោយសារ Popper មិនត្រូវបានប្រើនៅក្នុងរបាររុករក។
មាតិកាម៉ឺនុយ
បឋមកថា
បន្ថែមបឋមកថាទៅផ្នែកស្លាកនៃសកម្មភាពនៅក្នុងម៉ឺនុយទម្លាក់ចុះណាមួយ។
<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 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>
ទម្រង់
ដាក់ទម្រង់បែបបទនៅក្នុងម៉ឺនុយទម្លាក់ចុះ ឬបង្កើតវាទៅក្នុងម៉ឺនុយទម្លាក់ចុះ ហើយប្រើឧបករណ៍ប្រើប្រាស់ រឹម ឬឧបករណ៍ប្រើប្រាស់ ដើម្បីផ្តល់ឱ្យវានូវចន្លោះអវិជ្ជមានដែលអ្នកត្រូវការ។
<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>
ជម្រើសទម្លាក់ចុះ
ប្រើ data-offset
ឬ 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>
ការប្រើប្រាស់
តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript កម្មវិធីជំនួយទម្លាក់ចុះបិទបើកមាតិកាដែលលាក់ (ម៉ឺនុយទម្លាក់ចុះ) ដោយបិទបើក .show
ថ្នាក់នៅលើមេ .dropdown-menu
។ គុណលក្ខណៈ data-toggle="dropdown"
គឺពឹងផ្អែកលើការបិទម៉ឺនុយទម្លាក់ចុះនៅកម្រិតកម្មវិធី ដូច្នេះវាជាការប្រសើរក្នុងការប្រើវាជានិច្ច។
$.noop
)
mouseover
ទៅកូនតូចៗនៃ
<body>
ធាតុ។ ការ hack ដ៏អាក្រក់នេះពិតជាចាំបាច់ ដើម្បីធ្វើការជុំវិញ
បញ្ហានៅក្នុងប្រតិភូព្រឹត្តិការណ៍របស់ iOS ដែលនឹងការពារការប៉ះនៅកន្លែងណាមួយនៅខាងក្រៅកម្មវិធីទម្លាក់ចុះពីការកេះកូដដែលបិទការទម្លាក់ចុះ។ mouseover
នៅពេលដែលការទម្លាក់ចុះត្រូវបានបិទ ឧបករណ៍ដោះស្រាយ
ទទេបន្ថែមទាំងនេះ
ត្រូវបានដកចេញ។តាមរយៈគុណលក្ខណៈទិន្នន័យ
បន្ថែម data-toggle="dropdown"
ទៅតំណ ឬប៊ូតុងដើម្បីបិទបើកបញ្ជីទម្លាក់ចុះ។
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
តាមរយៈ JavaScript
ហៅបញ្ជីទម្លាក់ចុះតាមរយៈ JavaScript៖
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
នៅតែត្រូវការ
មិនថាអ្នកហៅ dropdown របស់អ្នកតាមរយៈ JavaScript ឬជំនួសអោយប្រើ data-api ទេ data-toggle="dropdown"
តែងតែតម្រូវឱ្យមានវត្តមាននៅលើធាតុ trigger របស់ dropdown ។
ជម្រើស
ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-
ដូចក្នុង data-offset=""
.
ឈ្មោះ | ប្រភេទ | លំនាំដើម | ការពិពណ៌នា |
---|---|---|---|
អុហ្វសិត | លេខ | ខ្សែអក្សរ | មុខងារ | 0 | អុហ្វសិតនៃការទម្លាក់ចុះទាក់ទងទៅនឹងគោលដៅរបស់វា។ នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់អុហ្វសិត វាត្រូវបានហៅជាមួយវត្ថុដែលមានទិន្នន័យអុហ្វសិតជាអាគុយម៉ង់ដំបូងរបស់វា។ មុខងារត្រូវតែត្រឡប់វត្ថុដែលមានរចនាសម្ព័ន្ធដូចគ្នា។ ថ្នាំង DOM ធាតុកេះត្រូវបានឆ្លងកាត់ជាអាគុយម៉ង់ទីពីរ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper ។ |
ត្រឡប់ | ប៊ូលីន | ពិត | អនុញ្ញាតឱ្យទម្លាក់ចុះដើម្បីត្រឡប់ក្នុងករណីមានការជាន់គ្នាលើធាតុយោង។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារត្រឡប់ របស់ Popper ។ |
ព្រំដែន | ខ្សែអក្សរ | ធាតុ | 'scrollParent' | ហួសព្រំដែនកំណត់នៃម៉ឺនុយទម្លាក់ចុះ។ ទទួលយកតម្លៃនៃ 'viewport' , 'window' , 'scrollParent' , ឬឯកសារយោង HTMLElement (JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារ PreventOverflow របស់ Popper ។ |
ឯកសារយោង | ខ្សែអក្សរ | ធាតុ | 'បិទ/បើក' | ធាតុយោងនៃម៉ឺនុយទម្លាក់ចុះ។ ទទួលយកតម្លៃនៃ 'toggle' , 'parent' , ឬសេចក្តីយោង HTMLElement ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារយោង របស់ Popper ។ |
បង្ហាញ | ខ្សែអក្សរ | 'ថាមវន្ត' | តាមលំនាំដើម យើងប្រើ Popper សម្រាប់ការកំណត់ទីតាំងថាមវន្ត។ បិទវាជាមួយ static . |
popperConfig | null | វត្ថុ | មោឃៈ | ដើម្បីផ្លាស់ប្តូរការកំណត់ Popper លំនាំដើមរបស់ Bootstrap សូមមើល ការកំណត់របស់ Popper |
ចំណាំនៅពេលដែល boundary
ត្រូវបានកំណត់ទៅតម្លៃណាមួយក្រៅពី 'scrollParent'
រចនាប័ទ្ម position: static
ត្រូវបានអនុវត្តទៅ .dropdown
កុងតឺន័រ។
វិធីសាស្រ្ត
វិធីសាស្រ្ត | ការពិពណ៌នា |
---|---|
$().dropdown('toggle') |
បិទ/បើកម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។ |
$().dropdown('show') |
បង្ហាញម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។ |
$().dropdown('hide') |
លាក់ម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។ |
$().dropdown('update') |
ធ្វើបច្ចុប្បន្នភាពទីតាំងនៃការទម្លាក់ចុះនៃធាតុមួយ។ |
$().dropdown('dispose') |
បំផ្លាញការទម្លាក់ចុះនៃធាតុមួយ។ |
ព្រឹត្តិការណ៍
ព្រឹត្តិការណ៍ទម្លាក់ចុះទាំងអស់ត្រូវបានដំណើរការនៅ .dropdown-menu
ធាតុមេរបស់ ហើយមាន relatedTarget
ទ្រព្យសម្បត្តិ ដែលតម្លៃរបស់វាជាធាតុយុថ្កាដែលបិទបើក។ hide.bs.dropdown
ហើយ hidden.bs.dropdown
ព្រឹត្តិការណ៍មាន clickEvent
លក្ខណសម្បត្តិ (តែនៅពេលដែលប្រភេទព្រឹត្តិការណ៍ដើមគឺ click
) ដែលមាន Event Object សម្រាប់ព្រឹត្តិការណ៍ចុច។
ព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.dropdown |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលគេហៅវិធីសាស្ត្របង្ហាញឧទាហរណ៍។ |
shown.bs.dropdown |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការទម្លាក់ចុះត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។ |
hide.bs.dropdown |
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗ នៅពេលដែលវិធីសាស្ត្រលាក់វត្ថុត្រូវបានហៅ។ |
hidden.bs.dropdown |
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលការទម្លាក់ចុះបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។ |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})