Details on creating tabs for jquery plug-in development, and details on jquery

Details on creating tabs for jquery plug-in development, and details on jquery

In jquery, plug-ins are commonly used for development:

One is to expand a method for the $ function itself, which is static extension (also called class Extension). This plug-in is generally a tool method,

Another type is extended on the prototype object $. fn. The developed plug-ins are used on dom elements.

1. Class-level extension

$.showMsg = function(){   alert('hello,welcome to study jquery plugin dev');  }  // $.showMsg();

Note that the jquery library should be introduced in advance. In the previous example, a method showMsg is added to the $ function, so you can use $. showMsg () to call it.

$.showName = function(){   console.log( 'ghostwu' );  }  $.showName();

This plug-in is rare and is generally used for development tools and methods, such as $. trim and $. isArray () in jquery.

2. Extend the function to $. fn,

This plug-in is used on elements. For example, if I expand a function, click the button to display the value of the current button.

$. Fn. showValue = function () {return $ (this ). val () ;}$ (function () {$ ("input "). click (function () {// alert ($ (this ). showMsg (); alert ($ (this ). showMsg () ;};}); <input type = "button" value = "Click me">

At $. add a showValue Method on fn to return the value of the current element. after obtaining the page input element and binding the event, you can call this method to display the button value "Click me". This is often used in actual plug-in development. next, we will use this extension mechanism to develop a simple tab plug-in:

Page Layout and style:

<! DOCTYPE html> 
Tab2.js File
; (Function ($) {$. fn. tabs = function (opt) {var def = {evType: "click"}; // defines a default configuration var opts = $. extend ({}, def, opt); var obj = $ (this); $ ("ul li: first", obj ). addClass ("active"); obj. children ("div "). hide (); obj. children ("div "). eq (0 ). show (); $ ("ul li", obj ). bind (opts. evType, function () {$ (this ). attr ("class", "active "). siblings ("li "). attr ("class", ""); var id = $ (this ). find (""). attr ("href "). substring (1); obj. children ("div "). hide (); $ ("#" + id, obj ). show () ;};}) (jQuery );
1. A self-executed function encapsulates the plug-in into a module and passes the jQuery object to the form parameter $
2, row 3rd, defines a default configuration, the trigger type of the tab, the default is Click Event
3, 4th rows. If the opt parameter is passed, the opt configuration will be used. Otherwise, the default configuration of 3rd rows will be used. This line is used without changing the plug-in source code, you can configure the expression of the plug-in.
4. Line 7-9: show the first div of the tab and hide the rest. Add class = 'active' to the first tab and highlight it in yellow.
5. Line 11-16: Click the corresponding tab to display and hide the corresponding div
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.