Bootstrap source code Analysis of dropdown

SOURCE Analysis:

DROPDOWNS.SCSS: drop-down box module
Javascripts/bootstrap/dropdown.js: Implementing a drop-down box response

Realize the function and principle:

Drop-down tab, the ability to display selected items is not implemented by default

Principle:

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

SOURCE Analysis:

1, caret: realize the downward triangle, using the border to achieve the
1.1, border color By default is the font color
1.2, the realization of the triangle: the border to have width, and then the adjacent sides need to have a width, but the color is transparent; Finally, the element is an inline block element to make it high and wide by 0.
1.3, the code is as follows

<span style=""></span>

2, in the document bound the Click event monitoring, the type of monitoring is data-toggle= "dropdown".
3, JS plug-in write plugin function, and class constructor is used for JS method call plug-in;
4, while the data-* mode call plug-in, used to the document injection event implementation, the code is as follows:

$ (document). On (' Click.bs.dropdown.data-api ', Clearmenus). On (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 calls directly the method of dropdown definition, where the design is based on the plugin's framework, the invocation of the data-* mode and the JS plug-in mode, and the two invocation patterns utilize the same code.
5, if the use of JS plug-in calls, the basic method to call themselves, when the instance is created only bound toggle event.

var function (Element) {  $ (Element). On (this. Toggle)}

6, Clearmenu: will only clear data-toggle= "dropdown" element
7, Dropdown-backdrop: Used to move the processing of no Click event
8, KeyDown: When the dropdown button to get focus, press the key can expand, press the function of the key contraction
9, Data-target and herf= "#id": is to implement click, expand the specified drop-down list, the default is to expand 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, implement up Popup submenu, with bottom:100% (Popup submenu bottom positioning) implementation
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>

Bootstrap source code Analysis of dropdown