Of Stack

JavaScript tab TAB plug in instance code

  • 2020-12-26 05:25:59
  • OfStack

Today, let's start with the simplest one, and rewrite the existing Tab TAB toggle function as an javascript plug-in.

The native function

The easiest way to rewrite an javascript method as an js plug-in is to mount the method under the window global object

Let's take a look at the original functional code:

tab.html 


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>jquery_hjb_tab The plug-in demo</title>
<link rel="stylesheet" href="h.css"/>
</head>
<body>
<div id="tab">
<div class="tabs">
<ul>
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<div class="tabCons">
<section> content 1</section>
<section> content 2</section>
<section> content 3</section>
<section> content 4</section>
</div>
</div>
<script>
window.onload = h_tab('tab');
function h_tab(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";
}

}
}
</script>

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: " Microsoft jas black "; color: #a94442}
.tabs ul li a.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 we will improve on this code step by step in the next step.

Native plug-in writing

Ok, now let's rewrite this method as a plug-in mounted under the window object:

tab.html 


 ... 
//  The following is the first 1 Time changes 
<script type="text/javascript" src="h_tabs.js"></script>
<script>
H_tab("tab");
</script>
</body>
</html>

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";
}
}
};

Written yet, we found that although very simple, but there are also problems: window as a global object, if we put our own methods are mounted to the below it as a plug-in, plug-in 1, more prone to namespace conflicts, another 1, use native js although can reduce dependence on external, but code is relatively large, writing more cumbersome.

jquery writing

We tried to introduce the jquery library and rewrite this plug-in as an jquery plug-in.

jquery plug-ins come in three forms: class-level, object-level, and jquery UI components

The jquery class level plug-ins write individual methods

Let's first look at the form of a class-level plug-in.

In the form of a class-level plug-in, this method is mounted directly under 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>
</html>

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>
</html>

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);
}
});

While it's easy and easy to mount your functions directly to the jquery root namespace using the $.extend () tool method, unfortunately, it doesn't take advantage of jquery's powerful sizzle engine, which means that the DOM element you select does not.

So we're going to use an object-level plug-in development approach.

jquery object-level plug-in writing

The object-level plug-in development approach uses the $.fn.extend () method to bind its methods to the jquery prototype so that all teams of jquery objects can apply the method to perform the corresponding operation

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 methods, note the difference between the above class - level plug-in writing 
$('#tab').h_tab('tab');
</script>
</body>
</html>

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 wrap the plug-in with a closure to avoid namespace pollution

Here, there is a problem that our method must pass parameters to run, which causes us to use $(' #tab') to select div which is tab, and then in the plug-in we get the element once again based on the ID passed in.

Now that we have used the selector for jquery, we can introduce this to address the redundancy of repeating fetch elements.

jquery Object-level plug-in - Introduce this

tab.html 


@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: " Microsoft jas black "; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
0

h_tabs.js 


@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: " Microsoft jas black "; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
1

It is important to note here that the element object that we call the plug-in is (' tab '), so using this.find () is equivalent to (' tab').find () instead of $(this).find (). Use the substitution method to distinguish the difference between the two.

As a plug-in, it should be controlled by the developer, so it should also provide the user with a configuration interface.

jquery object-level plug-in writing - Add configuration items

tab.html 


@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: " Microsoft jas black "; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
2

Here we change the name of the "current TAB TAB style class" from "cur" to "current" at the beginning of 1 and pass it in 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: " Microsoft jas black "; color: #a94442}
/* Pay attention to the following 1 How the line changes compared to the previous style code */
.tabs ul li a.current { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}

We made the changes in the stylesheet accordingly.

h_tabs.js 


@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: " Microsoft jas black "; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
4

Here we use the merge object function of jquery's $.extend () method to override the default configuration item with the configuration item passed in by the user and eventually merge it into a new configuration item for later use by the program.

The above is the JavaScript tab TAB plug-in example code introduced by this site, I hope to help you!

Related articles: