JavaScript tab plug-in instance code, javascripttab

JavaScript tab plug-in instance code, javascripttab

Today, we will start with the simplest way to rewrite an existing Tab switch function into a javascript plug-in.

Native function writing

The simplest way to rewrite a javascript method as a js plug-in is to mount this method to a window global object.

Let's take a look at the original code written using the function:

Tab.html

<! DOCTYPE html> 
H.css
@ Charset "UTF-8"; // * // author: hjb2722404 // description: // date: 2016/2/18 */. tabs ul {width: 100%; list-style-type: none ;}. tabs ul li {width: 48%; display: inline-block; margin: 0; padding: 0 ;}. tabs ul li a {border-bottom: 3px solid # cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: ""; color: # a94442 }. tabs ul li. cur {border-bottom: 3px solid # f26123 ;}. tabCons section {display: none ;}. tabCons section: nth-child (1) {display: block ;}
The above two pieces of code are the basic code, and then we will improve the Code step by step.
Native plug-in writing
Now, we will rewrite this method to the plug-in mounted to the window object:
Tab.html
...... // The following is the first change to <script type = "text/javascript" src = "h_tabs.js"> </script> <script> H_tab ("tab "); </script> </body> 
H_tabs.js
window.H_tab = function(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName("a");var oCons = document.getElementById(tabId).getElementsByTagName("section");for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}};
However, we found that this method is simple, but there is also a problem: window is a global object. If we mount all our methods to it as a plug-in, there are many plug-ins, namespace conflicts are easy to generate. On the other hand, although native js can reduce external dependencies, it still has a large amount of code and is cumbersome to write.
Jquery
We try to introduce the jquery library and rewrite this plug-in to the jquery plug-in.
Jquery plugin has three forms: Class-level form, object-level form, and jquery UI component form.
Jquery class-level plug-in writing-a single method
Let's first look at the form of class-level plug-ins.
The first type of plug-ins directly mount this method to the root space of jquery as a tool method:
Tab.html
……<script src="../jquery.js" type="text/javascript"></script><script type="text/javascript" src="h_tabs.js"></script><script>$.h_tab('tab');</script></body>
H_tabs.js
$.h_tab = function(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName("a");var oCons = document.getElementById(tabId).getElementsByTagName("section");for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}};
Jquery class-level plug-in writing-multiple methods
If you want to bind multiple methods to the jquery Root Space, write as follows:
Tab.html
……<script src="../jquery.js" type="text/javascript"></script><script type="text/javascript" src="h_tabs.js"></script><script>$.h_tab('tab');$.h_hello('hjb');</script></body>
H_tabs.js
$.extend({h_tab:function(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName("a");var oCons = document.getElementById(tabId).getElementsByTagName("section");for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}},h_hello :function(name){console.log("hello,",name);}});
Although $. the extend () tool directly mounts functions to the jquery root namespace, which is simple and easy to use, but unfortunately, this method cannot use jquery's powerful sizzle engine, that is, the DOM element you choose cannot use this method.
Therefore, we need to use the object-level plug-in development method.
Jquery object-level plug-in writing
The development method of Object-level plug-ins is to bind their methods to the jquery prototype using the $. fn. extend () method, so that all jquery object teams can apply this method to execute the corresponding operations.
The Code is as follows:
Tab.html
...... <Script src = ".. /jquery. js "type =" text/javascript "> </script> <script type =" text/javascript "src =" h_tabs.js "> </script> <script> // object level plug-in reference method, note the difference between the method and the method of the Class-level plug-in $ ('# tab '). h_tab ('tab '); </script> </body> 
H_tabs.js
(function($){$.fn.extend({h_tab:function(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName('a');var oCons = document.getElementById(tabId).getElementsByTagName('section');for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}}});})(jQuery);
Here, we use a closure to encapsulate the plug-in to avoid namespace pollution.
Here, there are still some problems, that is, our method must pass parameters before it can run, which leads to the use of $ ('# tab') for calling ') select the div whose id is tab, and then obtain the element based on the input ID in the plug-in.
Now that we have used the jquery selector, we can introduce this to solve the redundancy problem of repeated element acquisition.
Jquery object-level plug-in writing-introduce this
Tab.html
……<script src="../jquery.js" type="text/javascript"></script><script type="text/javascript" src="h_tabs.js"></script><script>$('#tab').h_tab();</script></body>
H_tabs.js
(Function ($) {$. fn. extend ({h_tab: function () {// introduce thisvar oLinks = this here. find ('A'); var oCons = this. find ('colity'); for (var I = 0; I <oLinks. length; I ++) {oLinks [I]. index = I; oLinks [I]. onclick = function () {for (var j = 0; j <oLinks. length; j ++) {oLinks [j]. className = ""; oCons [j]. style. display = "none";} this. className = "cur"; oCons [this. index]. style. display = "block" ;}}}) ;}( jQuery );
Note that the element object we call this plug-in is ('tab '), and this is used directly. find () is equivalent to ('tab '). find () instead of $ (this ). find (), note that the difference between the two writing methods is distinguished by using the agent method.
As a plug-in, it should be controllable by developers, so it should also provide users with some configuration interfaces.
Jquery object-level plug-in writing-add configuration items
Tab.html
...... <Ul> <! -- Compare the code at the beginning of the article, note the changes here --> <li> <a href = "#" class = "current"> tab1 </a> </li> <a href = "# "> tab2 </a> </li> ...... <Script src = ".. /jquery. js "type =" text/javascript "> </script> <script type =" text/javascript "src =" h_tabs.js "> </script> <script >$ ('# tab '). h_tab ({// make the style name of the current tab label customizable with curName: 'current'}); </script> </body> 
Here, we change the name of the "current tab label Style Class" from "cur" to "current" and import it as a configuration item to the plug-in.
H.css
. Tabs ul {width: 100%; list-style-type: none ;}. tabs ul li {width: 48%; display: inline-block; margin: 0; padding: 0 ;}. tabs ul li a {border-bottom: 3px solid # cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: ""; color: # a94442}/* Note the differences between the following line and the previous style code */. tabs ul li. current {border-bottom: 3px solid # f26123 ;}. tabCons section {display: none ;}. tabCons section: nth-child (1) {display: block ;}
We have made corresponding changes in the style sheet.
H_tabs.js
(Function ($) {$. fn. extend ({// pass an object to the method as the parameter h_tab: function (opts) {// define the default configuration var defaults = {curName: 'cur '}; // overwrite the default items in the default parameters and merge them into a new parameter object. var Opt = $. extend ({}, defaults, opts); var oLinks = this. find ('A'); var oCons = this. find ('colity'); for (var I = 0; I <oLinks. length; I ++) {oLinks [I]. index = I; oLinks [I]. onclick = function () {for (var j = 0; j <oLinks. length; j ++) {oLinks [j]. className = ""; oCons [j]. style. display = "none";} // use the configuration item value here this. className = Opt ['curname']; oCons [this. index]. style. display = "block" ;}}}) ;}( jQuery );
Here we use jquery's $. the ability of the extend () method to merge objects, overwrite the default configuration items with user-passed configuration items, and finally merge them into a new configuration item for later programs.
The above is the example code of the JavaScript tab plug-in introduced by xiaobian. I hope it will help you!
Articles you may be interested in:

       

 
        
Example of TAB effect for JavaScript Edition
 
        
Switch tabs using native javascript
 
        
Js simple method of implementing vertical tab
 
        
Jquery plugin tytabs. jquery. min. js implements the gradient TAB Effect
 
        
Code for implementing a TAB effect similar to the menu style in js
 
        
Js implements the black simple sliding door webpage tab Effect
 
        
JavaScript code for implementing webpage TAB menu effects based on object-oriented