JQuery plugin development tab making detailed explanation

in jquery, a common plug-in development are:

One is the expansion of a function itself is $ method, this is a static extension (also called the class extension), this plug-in is a tool generally method,

there is also a $ .fn expansion in the prototype object above, the plug is developed on the above dom element

First, the class level extension [ .

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

Note jquery library to be introduced early on in the embodiment above, the function adds a $ showMsg method, then you can use $ .showMsg () call to the

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

this widget is relatively rare, tools are generally used method, such as the jquery $ .trim, $ .isArray (), etc.

Second, the extensions on $ .fn,

this plug-in is used on the element, for example, I extend a function, click the button, the button displays the current value of

  $. fn.showValue = function ( ) {return $ (this) .val ();} $ (function () {$ ( "input") click (function () {// alert ($ (this) .showMsg ()).Alert ($ (this) .Showmsg ());});});   
Add a showValue method on $ .fn, return the current element Value value. After getting the page input element, after the binding event, you can call this method, the value of the display button “Point me”, in the actual plugin development, this is this. Next, let’s use this Expansion mechanism to develop a simple tab plug-in:
page layout and pattern:


 Document    #TAB {Width: 400px; Height: 30px;} #tab li, #tab UL { List-style-type: none;} # h; height: 30px; border-bottom: 1px solid #ccc; line-height: 30px;} #} # ul Li {float: left; margin-left: 20px; padding: 0px 10px;} #tab ul li.active {background: Yellow;} # 666;} # {width: 400px; height: 350px; Background-color: #ccc;} .clearfix: after {content: ''; display: block; clear: both; height: 0; visibility: hidden;}     $ (function ()} $ ("# Tab"). Tabs ({evtype: 'mouseOver');});});     Option 1      Option 3    
Author: ghostwu (1)
    blog: http: // Www.cnblogs.com/ghostwu/
  • Blog: http://www.cnblogs.com/ghostwu/
  • Author : ghostwu (3) Blog: http://www.cnblogs.com/ghostwu/
Tab2.js file
; (Function) {$ .fn.tabs = function (opt) {var def = {evtingpe: "click"}; // Define 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 (" a "). Attr (" href "). Substring (1); Obj.children (" div "). hide (); $. # "+ id, obj) .Show ();});};} (jQuery);
1, a self-execution function, package the plug-in into a module Putting the jQuery object to the formation of $
2, line 3, define a default configuration, tab trigger type, default is clicked
3, line 4, if OPT In the configuration of the OPT, the user uses the default configuration of the third line, the role of this line is to configure the form of plug-ins without changing the plug-in source,
4, 7-9, let the tab first DIV display, the rest is hidden, let the first Tab plus class = 'Active' yellow highlights 5, 11-16, click The corresponding tab, let the corresponding DIV display and hide
The above is all the content of this article, I hope that everyone’s learning is helpful, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment