JavaScript Tab Tab Plug-in instance code _javascript tips

Today, start with the simplest, rewrite the existing tab tab switch functionality into a JavaScript plug-in form.

The writing of the native function

The easiest way to overwrite a JavaScript method with a JS plug-in is to mount this method under the Window global object

Let's take a look at the most primitive code that uses the function notation:

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: "Microsoft Ya Hei"; 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 code is basic code, then we step by step on the basis of this code to improve.

Native Plug-in Writing

OK, now we're going to rewrite this method as a plugin that's mounted under the Window object:

Tab.html

..... Here is the first change
<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 find that this kind of writing, though very simple, but there are also problems: window as a global object, if we put their own methods are mounted below it as a plug-in use, plug-ins, a lot of easy to create a namespace conflict, on the other hand, the use of native JS although can reduce the dependence on the outside, But the amount of code is relatively large, writing more cumbersome.

jquery notation

We tried to introduce the jquery library and rewrite the plugin as a jquery plugin.

The jquery plug-in has three forms: class-Level form, object-Level form, jquery UI component form

jquery class-Level plug-in writing – single method

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

The first kind of class-level plug-in form, directly mount the method 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>
 
 

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 using the $.extend () tool method to mount your own functions directly under the jquery root namespace, simple, time-saving, unfortunately, this approach does not take advantage of jquery's powerful sizzle engine, that is, the DOM elements you choose cannot use this method.

So we want to use the object-level plug-in development approach.

jquery Object-level plug-in notation

The object-level plug-in development approach is to use the $.fn.extend () method to bind its methods to the jquery prototype, so that all jquery object teams can apply the method to perform the appropriate 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 method, note the distinction between the above class-level plug-ins and their notation
$ (' #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 package to encapsulate the plugin, avoiding the namespace pollution

Here, there are some problems, that is, our method must pass parameters to run, which led to the call we use $ (' #tab ') to select the ID tab of the Div, and then in the plug-in we also based on the incoming ID obtained the element.

Now that we've used the jquery selector, we can introduce this to solve the redundancy problem of the duplicate acquisition element.

jquery Object-level plug-in notation-introducing 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 () {
//here introduces this
var olinks = this.find (' a ');
var ocons = this.find (' 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);

The point to note here is that the element object that we call the plug-in is (′tab′), then the direct use of this.find () is equivalent to (' tab '). Find () instead of $ (this). Find (), pay attention to using the surrogate method to distinguish between the two ways of writing.

As a plug-in, it should be able to be controlled by the developer, so it should also provide users with some configuration interfaces.

jquery Object-level plug-in notation-adding configuration items

Tab.html

..... <ul>
<!--code to start with the article, notice the changes here-->
<li><a href= "#" class= "current" >tab1</a>< /li>
<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 ({
///To make the current tab label's style name customizable
curname: ' Now '
});
</script>
</body>
 
 

Here we have the first "current tab label style class name" changed from "cur" to "present" and passed as a configuration entry into the plugin

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 Ya Hei"; Color: #a94442}
/* Note the following line is in contrast 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 style sheet.

H_tabs.js

(function ($) {
$.fn.extend ({//) passes
an object to the method as a parameter
h_tab:function (opts) {
//defines the default configuration
var defaults ={
curname: ' cur '
};
Overrides the passed parameter to the default item in the default parameter, which is eventually merged into a new Parameter object.
var Opt = $.extend ({},defaults,opts);
var olinks = This.find (' a ');
var ocons = this.find (' 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";
}
Use the value of the configuration item here
this.classname = opt[' Curname '];
Ocons[this.index].style.display = "Block";}}})
(JQuery);

Here we use the functionality of the merge object of the jquery $.extend () method, overwrite the default configuration items with the user's incoming configuration items, and eventually merge them into a new configuration item for later use by the program.

The above is a small series to introduce the JavaScript tab tab Plug-in instance code, I hope to help!