This article introduces the use of the Bootstrap dropdown module dropdown for your reference. The specific content is as follows
1. Source code analysis:
Dropdowns.scss: dropdown box module
Javascripts/bootstrap/dropdown.js: Implement drop-down box response
2. Functions and principles:
Pull down tab, the function of displaying selected items cannot be realized by default.
principle:
1. Use the dropdown class as the anchor point, and then let the child list dropdown-menu absolutely position it. You also need to add a click point as the setting data-toggle="dropdown" to make the association.
2. Need support from js plug-in
3. Source code analysis:
1. caret: implement downward triangle, using borders to implement
1.1. The border color is the font color by default
1.2. Implementation of triangles: The border must have a width, and then the adjacent sides must have a width, but the color is transparent; finally, the element needs to be a block element in the row to make its height and width 0.
1.3. The code is as follows
The code copy is 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. The listening type of click event is bound to the document, and the listening type is data-toggle="dropdown".
3. The Plugin function written by the Js plugin and the class constructor are used to call the plugin using the JS method;
4. The data-* mode calls the plug-in, which is used to inject events into the document, 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 method defined by Dropdown. The wonderful design here lies in the plug-in framework, the call of the data-* mode and the call of the Js plug-in mode, while these two calling modes use the same code.
5. If you call it with the Js plug-in, you have to call the basic methods yourself. Only the toggle event will be bound when creating an instance.
var Dropdown = function (element) { $(element).on('click.bs.dropdown', this.toggle)}6. ClearMenu: Only the element of data-toggle="dropdown" is cleared
7. dropdown-backdrop: used to move the processing of no click events
8. Keydown: When the dropdown button gets the focus, press the key to expand and press the upper key to shrink.
9. data-target and herf="#id": To achieve clicking, expand the specified drop-down list. The default is to expand the sibling nodes behind the button:
<ul> <li><a>Index</a></li> <li><a>Zhenglu</a></li> <li > <a data-toggle="dropdown" href="#name" >User tools</a></li></ul><div id="name" > <ul > <li><a>About us</a></li> </ul></div>
10. Implement the pop-up submenu and use bottom:100% (positioning of bottom pop-up submenu) to implement it
11. Application examples
<div id="dropdown"><a id="dropdown-btn" data-target="#dropdown" >number</a><ul > <li><a>3343</a></li><li><a>555</a></li></ul></div>
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.