Discussion on bootstrap Source Code Analysis Tab (tab) _javascript tips

Implementing the Tab tab, this plugin is relatively simple

Source file:

Tab.js

Implementation principle

1. When you click an element, first remove the original highlighted element

2, then to the clicked element to highlight

3, if the click Element is a drop-down box of an option, select itself, and choose the dropdown box

5. If the animation is defined, the animation is performed first and then the callback

SOURCE Analysis:

1. The Show method, which is triggered when you click an element, triggers the following four events

1.1, Hiden.bs.tab: Hide the previous element

1.2, Show.bs.tab: Display the current element

1.3, Hideen.bs.tab: Hide the previous element complete

1.4, Shown.bs.tab: Display the current element complete

1.5, Hiden/show Event source code:

var $previous = $ul. Find ('. Active:last a ')
  var hideevent = $. Event (' Hide.bs.tab ', {
   relatedtarget: $this [0]
  })
  var showevent = $. Event (' Show.bs.tab ', {
   relatedtarget: $previous [0]
})

2. Active: Activating the current object

2.1, add the Aria-expanded property to the navigation element, mark whether this element is in the expanded state

2.2, the use of reflow mechanism, the acquisition of offsetwidth properties to achieve partial redraw

The above article on the bootstrap source code Analysis of the tab (tab) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.