Bootstrap module dropdown Implementation of the Drop-down box response _javascript Technique

This paper introduces the use method of the Bootstrap box module dropdown, which can be used for reference, and the specific contents are as follows

First, the source code analysis:
dropdowns.scss: Drop down box module
javascripts/bootstrap/dropdown.js: Implement dropdown box response

Second, function and principle:
Dropdown tab, default does not enable display of selected items

Principle:

1, using the dropdown class as the anchor point, and then let the children's list dropdown-menu absolute positioning implementation, but also need to add a click as the setting data-toggle= "dropdown" to do the association.
2, the need for JS plug-in support

Third, the source code analysis:
1, caret: to achieve a downward triangle, using the border implementation of the
1.1, Border color default is the font color
1.2, the realization of the triangle: the border should have width, then the adjacent sides need to have width, but the color is transparent; Finally, you need elements to be inline block elements to make them high and wide to 0.
1.3, the code is as follows

Copy Code code as follows:

<span style= "border-left:4px solid; border-top:4px solid Transparent; border-bottom:4px solid Transparent; height:0px; width:0px; Line-height:normal; Display:inline-block; "></span>

2, in the document bound Click event Monitoring, listening type for data-toggle= "dropdown".
3, JS plug-in write plugin function, and class constructor is used for JS way to invoke Plug-ins;
4, and data-* mode invoke plug-in, use is to the document injection event implementation, the code is as follows:

$ (document)
. On (' Click.bs.dropdown.data-api ', Clearmenus)
. On (' Click.bs.dropdown.data-api ', '. Dropdown Form ', function (e) {e.stoppropagation ()})
. On (' Click.bs.dropdown.data-api ', toggle, Dropdown.prototype.toggle)
. On (' Keydown.bs.dropdown.data-api ', toggle, Dropdown.prototype.keydown)
. On (' Keydown.bs.dropdown.data-api ', '. Dropdown-menu ', Dropdown.prototype.keydown)

The code directly calls the dropdown definition of the method, which is a wonderful design in the framework of Plug-ins, data-* mode calls and JS plug-in mode calls, and these two invocation patterns are using the same code.
5, if the use of JS plug-in calls, the underlying method will be called on its own, when the creation of an instance will only bind toggle events.

var Dropdown = function (Element) {
 $ (Element). On (' Click.bs.dropdown ', This.toggle)
}

6, Clearmenu: will only clear data-toggle= "dropdown" Elements
7, Dropdown-backdrop: For Mobile No click event Processing
8, KeyDown: When the dropdown button to get focus, press the key can be expanded, press the key to shrink the function
9, Data-target and herf= "#id": is to implement click, expand the specified Drop-down list, by default is expanded with the button behind the sibling node:

<ul class= "nav nav-pills navbar-nav" >
 <li><a>Index</a></li>
 <li><a > LV </a></li>
 <li > <a data-toggle= "dropdown" href= "#name" > Utility </a></li>
</ul>
<div id= "name" >
 <ul class= "Dropdown-menu" >
 <li><a> About Us </a></li>
 </ul>
</div>

10, the implementation of pop-up submenu up, with bottom:100% (pop-up submenu bottom positioning) to achieve
11. Application Example

<div id= "dropdown" class= "dropdown" >
<a id= "dropdown-btn" data-target= "#dropdown" >number</a>
<ul class= "Dropdown-menu" >
 <li><a>3343</a></li>
<li><a> 555</a></li>
</ul>
</div>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to learn JavaScript program to help you.