Bootstrap source code Analysis of dropdown

Source: Internet
Author: User
Tags border color

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.