ड्रॉपडाउन्स्
Bootstrap ड्रॉपडाउन प्लगिन् इत्यनेन सह लिङ्क्-सूचीनां प्रदर्शयितुं सन्दर्भ-ओवरलेस् टॉग्ल् कुर्वन्तु ।
ड्रॉपडाउन्स् टॉग्लेबलाः सन्ति, लिङ्क्-सूचीनां प्रदर्शनार्थं सन्दर्भात्मक-ओवरलेस् इत्यादीनि च । ते समाविष्टेन Bootstrap ड्रॉपडाउन JavaScript प्लगिन् इत्यनेन सह अन्तरक्रियाशीलाः कृताः सन्ति । ते क्लिक् कृत्वा टोग्ल् भवन्ति, न तु होवरिंग् इत्यनेन; एषः एकः इच्छितः डिजाइननिर्णयः अस्ति।
ड्रॉपडाउन्स् तृतीयपक्षपुस्तकालयस्य, Popper.js , इत्यत्र निर्मिताः सन्ति, यत् गतिशीलं स्थितिं दृश्यपोर्ट् अन्वेषणं च प्रदाति । Bootstrap इत्यस्य JavaScript इत्यस्मात् पूर्वं popper.min.js इत्येतत् अवश्यमेव समाविष्टं कुर्वन्तु अथवा bootstrap.bundle.min.js/ इत्यस्य उपयोगं कुर्वन्तु bootstrap.bundle.jsयस्मिन् Popper.js अस्ति । Popper.js इत्यस्य उपयोगः navbars मध्ये dropdowns इत्यस्य स्थितिं कर्तुं न भवति यद्यपि गतिशीलस्थापनस्य आवश्यकता नास्ति।
यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकताutil.js अस्ति .
WAI ARIA मानकं वास्तविकं role="menu"विजेट् परिभाषयति , परन्तु एतत् अनुप्रयोग-सदृश-मेनू-विशिष्टं भवति ये क्रियाः वा कार्याणि वा प्रेरयन्ति । ARIA मेनूषु केवलं मेनू-वस्तूनि, चेकबॉक्स-मेनू-वस्तूनि, रेडियो-बटन-मेनू-वस्तूनि, रेडियो-बटन-समूहाः, उप-मेनू च समाविष्टानि भवितुम् अर्हन्ति ।
बूटस्ट्रैप् इत्यस्य ड्रॉप्डाउन्स् तु सामान्यरूपेण विविधपरिस्थितिषु मार्कअपसंरचनेषु च प्रयोज्यरूपेण निर्मिताः सन्ति । यथा, अन्वेषणक्षेत्राणि अथवा प्रवेशप्रपत्राणि इत्यादीनि अतिरिक्तनिवेशानि तथा रूपनियन्त्रणानि च समाविष्टानि ड्रॉपडाउन्स् निर्मातुं शक्यते । अस्य कारणात्, Bootstrap सत्यानां ARIA मेनूनां कृते आवश्यकानां roleand विशेषतानां कस्यापि अपेक्षां न करोति (न च स्वयमेव योजयति) । लेखकैः एतानि अधिकविशिष्टानि विशेषतानि स्वयमेव समावेशयितव्यानि भविष्यन्ति।aria-
तथापि, Bootstrap अधिकांशमानककीबोर्डमेनूपरस्परक्रियाणां कृते अन्तःनिर्मितसमर्थनं योजयति, यथा .dropdown-itemकर्सरकुंजीनां उपयोगेन व्यक्तिगततत्त्वेषु गन्तुं क्षमता तथा च ESCकीलेन मेनू बन्दं कर्तुं क्षमता
ड्रॉप्डाउन् इत्यस्य टॉग्ल् (भवतः बटन् अथवा लिङ्क्) तथा ड्रॉप् डाउन मेनू इत्यस्य अन्तः .dropdown, अथवा अन्यत् एलिमेण्ट् यत् घोषयति इति वेष्टयन्तु position: relative;। भवतः सम्भाव्य आवश्यकतानां अनुकूलतायै तत्त्वेभ्यः <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">
<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>तथैव, एकबटन ड्रॉपडाउन्स् इव प्रायः समानं मार्कअपं कृत्वा, परन्तु .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 इत्यस्य विषये तत् न भवति । इदानीं भवान् वैकल्पिकरूपेण केवलं s <button>इत्यस्य स्थाने स्वस्य dropdowns मध्ये elements इत्यस्य उपयोगं कर्तुं शक्नोति ।<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>इत्यनेन सह अ-अन्तर्क्रियाशील-ड्रॉप्-डाउन-वस्तूनि अपि निर्मातुं शक्नुवन्ति .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" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>पूर्वनिर्धारितरूपेण, एकं ड्रॉप्डाउन मेनू स्वयमेव 100% उपरितः तस्य मातापितृणां वामभागे च स्थितं भवति । .dropdown-menu-righta मध्ये योजयन्तु .dropdown-menuदक्षिणतः ड्रॉपडाउन मेनू संरेखयन्तु ।
शिरः उपरि ! ड्रॉपडाउन्स् 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 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-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>ड्रॉप् डाउन इत्यस्य स्थानं परिवर्तयितुं data-offsetवा इत्यस्य उपयोगं कुर्वन्तु ।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>.showdata attributes अथवा JavaScript इत्यस्य माध्यमेन, ड्रॉप् डाउन प्लगिन् मातापितृसूची मदस्य उपरि वर्गं टॉगल कृत्वा गुप्तसामग्री (ड्रॉपडाउन मेनू) टॉगलं करोति । अनुप्रयोगस्तरस्य ड्रॉपडाउन मेनू data-toggle="dropdown"-समापनार्थं विशेषता अवलम्ब्यते, अतः सर्वदा तस्य उपयोगः उत्तमः विचारः अस्ति ।
स्पर्श-सक्षम-यन्त्रेषु, एकं ड्रॉप्-डाउन् उद्घाट्य तत्त्वस्य तत्कालीन-सन्ततिषु रिक्त- ( $.noop) -हन्डलर्-इत्येतत् योजयति । This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , यत् अन्यथा ड्रॉपडाउनस्य बहिः कुत्रापि नलः ड्रॉपडाउनं बन्दं करोति इति कोडं प्रेरयितुं निवारयिष्यति। एकदा ड्रॉप्डाउन् बन्दं जातं चेत्, एते अतिरिक्तरिक्ताः हन्डलर् अपसारिताः भवन्ति ।mouseover<body>mouseover
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>जावास्क्रिप्ट् मार्गेण ड्रॉप्डाउन्स् आह्वयन्तु:
$('.dropdown-toggle').dropdown()data-toggle="dropdown"अद्यापि आवश्यकम्
भवान् जावास्क्रिप्ट् मार्गेण स्वस्य ड्रॉप्डाउन् आह्वयति वा तस्य स्थाने data-api इत्यस्य उपयोगं करोति वा इति न data-toggle="dropdown"कृत्वा, ड्रॉप्डाउन् इत्यस्य ट्रिगर एलिमेण्ट् इत्यत्र सर्वदा उपस्थितः भवितुम् आवश्यकम् अस्ति ।
विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""।
| नामः | प्रकारः | मूलभूतम् | वर्णनम् |
|---|---|---|---|
| offset इति | संख्या | तार | नियोग | ० | तस्य लक्ष्यस्य सापेक्षं ड्रॉपडाउनस्य आफ्सेट् । अधिकविवरणार्थं Popper.js इत्यस्य offset docs पश्यन्तु । |
| पर्यस् | बूलियन इति | सत्यम् | सन्दर्भतत्त्वे अतिव्याप्तेः सन्दर्भे Dropdown इत्यस्य फ्लिप् कर्तुं अनुमन्यताम् । अधिकविवरणार्थं Popper.js इत्यस्य flip docs पश्यन्तु । |
| सीमा | तार | तत्व | 'scrollParent' इति । | ड्रॉपडाउन मेनू की ओवरफ्लो बाध्यता सीमा। 'viewport', 'window', 'scrollParent', अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति (केवलं JavaScript) । अधिकसूचनार्थं Popper.js इत्यस्य preventOverflow docs पश्यन्तु । |
| सन्दर्भः | तार | तत्व | 'टोगल' इ��ि । | ड्रॉपडाउन मेनू का सन्दर्भ तत्व। 'toggle', 'parent', अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति । अधिकविवरणार्थं Popper.js इत्यस्य referenceObject docs पश्यन्तु । |
| प्रदर्शन | सूत्र | 'गतिशील' इति । | पूर्वनिर्धारितरूपेण, वयं गतिशीलस्थापनार्थं Popper.js इत्यस्य उपयोगं कुर्मः । इत्यनेन एतत् निष्क्रियं कुर्वन्तु static। |
ध्यानं कुर्वन्तु यदा , boundaryइत्यस्मात् परं किमपि मूल्यं सेट् भवति तदा 'scrollParent'शैली पात्रे position: staticप्रयुक्ता भवति ।.dropdown
| प्रक्रिया | वर्णनम् |
|---|---|
$().dropdown('toggle') |
दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य ड्रॉप्डाउन मेनू टॉग्ल् करोति । |
$().dropdown('update') |
कस्यचित् एलिमेण्ट् इत्यस्य ड्रॉप्डाउन् इत्यस्य स्थितिं अद्यतनं करोति । |
$().dropdown('dispose') |
कस्यचित् तत्त्वस्य पतनं नष्टं करोति । |
.dropdown-menuसर्वे ड्रॉपडाउन इवेण्ट् 's parent एलिमेण्ट् इत्यत्र प्रज्वलिताः भवन्ति तथा च एकः relatedTargetगुणः भवति, यस्य मूल्यं टॉग्लिंग् एङ्कर् एलिमेण्ट् अस्ति । hide.bs.dropdownतथा च hidden.bs.dropdownइवेण्ट्स् मध्ये एकः clickEventगुणः भवति (केवलं यदा मूल इवेण्ट् प्रकारः अस्ति click) यस्मिन् क्लिक् इवेण्ट् कृते Event Object भवति ।
| घटना | वर्णनम् |
|---|---|
show.bs.dropdown |
show instance मेथड् आह्वयते चेत् एषा इवेण्ट् तत्क्षणमेव प्रज्वलति । |
shown.bs.dropdown |
इदं घटना तदा प्रज्वलितं भवति यदा ड्रॉपडाउन् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां प्रतीक्षां करिष्यति, पूर्णं कर्तुं) । |
hide.bs.dropdown |
यदा hide instance मेथड् आहूतम् अस्ति तदा एतत् इवेण्ट् तत्क्षणमेव प्रज्वलितं भवति । |
hidden.bs.dropdown |
इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण गोपनं समाप्तं भवति (CSS संक्रमणानां प्रतीक्षां करिष्यति, पूर्णं कर्तुं) । |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})