Due to work requirements, I have been pondering jQuery plug-in development issues over the past few days. After a day of battle, I finally completed my first jQuery plug-in, for those who have a headache when they see css, a day of 8 hours, conservatively estimated that they are getting css for 5 hours (I am not very well described as css illiterate, if I can't write or speak, I can't even speak .), Okay, let's talk about it.
First, you need to understand jQuery plug-in development in two ways: 1. Class-level plug-in development. 2. Object-level plug-in development.
What? What are the class level and object level?
You can understand the class level as extending the jquery class, the simplest $. post (...);
The object level can be understood as object-based extension, for example, $ ("# Me"). fuck (...); here, this fuck is object-based extension. If you want to know more about your children's shoes, please spend RMB to buy books Or query online materials. So... Next...
What do you want to write? It was the turn of the Class-level and Object-level styles mentioned above to appear, because there are great ways of writing, and there are many strange ways of writing. There are also different standards of writing, hava a Look!
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. msg = function (){
Alert ("123 ");
};
</Script>
<Script type = "text/javascript">
$ (Function (){
$. Msg ();
});
</Script>
Class-level writing: jQuery. Plug-in name = function (){.....};
Call method: $. Plug-In Name ();
Exposing parameters is not mentioned at the moment. Step by step ..
In this case, the dialog box plug-in is displayed. First, it is important to understand what plug-ins are and what are class-level plug-ins? Let's take a look at the page startup effect. You know the truth ..
To compare the object-level plug-ins: Go on!
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. pluginName = function (){
// Code area.
};
}) (JQuery );
Object-level syntax: $. fn. Plug-in name = function () {}; an fn is added. That's right, it's fn! Fn !!! Fn !!!
Call method: $ ("# Me"). Plug-In Name ();
A little bit, $. Plug-In Name (); is to use $ to access and call the global function in jquery, which can be called directly through jquery or USD $ to achieve some results.
$ ("# Me"). Plug-In Name (); is a function called through a jquery object. What? Why did you find that this writing method has an additional layer? Ah? What's going on?
The First, we must First understand The shape of The closure (framework), Look !, This is the legendary stuff used to develop jQuery plug-ins.
Copy codeThe Code is as follows:
(Function ($ ){
// This is the place where you write things, without tax collection, industrial and commercial tax, personal income tax, etc. .. feel free to use it.
}) (JQuery );
(Function ($) {// This is the place where you write things. Do not accept the local tax, industrial and commercial tax, personal income tax, etc. .. feel free to use it .}) (JQuery );
Here, the $ parameter and the form parameter behind the function are used inside the function body. $ is the object you are currently calling the function, in this way, we can do a lot of things .... you know.
Use a tabs panel switch plug-in to demonstrate in detail the specific development of jQuery object-level plug-ins.
First, go to HTML:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script>
<Script src = "jquery. tabs. js" type = "text/javascript"> </script>
<Link href = "tabs.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript">
$ (Function (){
$ ("# Mytabs"). tabs ();
});
</Script>
</Head>
<Body>
<! -- Tabs example -->
<Div id = "mytabs">
<! -- Tab area -->
<Ul>
<Li> <a href = "# tabs1"> Option 1 </a> </li>
<Li> <a href = "# tabs2"> Option 2 </a> </li>
<Li> <a href = "# tabs3"> Option 3 </a> </li>
</Ul>
<! -- Panel area -->
<Div id = "tabs1"> 11111 </div>
<Div id = "tabs2"> 22222 </div>
<Div id = "tabs3" type = "option" text = "option"> 33333 </div type = "option" text = "/option">
</Div>
</Body>
</Html>
Add the plug-in source code:
/*
Tabs panel plug-in, version 1.0)
Usage: $ ("# myDiv"). tabs ({switchingMode: "click "});
Parameter description: switchingMode is the Panel switching mode. For example, if switchingMode is set to "mouseover", move the cursor to The Tab switching panel. The default value is click.
The overall tabs skeleton remains unchanged, and the common structure is as follows:
Copy codeThe Code is as follows:
<Div id = "tabs">
Tab area ul
<Ul>
<Li> <a href = "# div1"> Option 1 </a> </li>
<Li> <a href = "# div2"> Option 2 </a> </li>
</Ul>
Panel area div
<Div id = "div1"> Panel 1 </div>
<Div id = "div2"> panel 2 </div>
</Div>
Style: by default, this style does not have any effect. You can modify the plug-in style as needed.
Copy codeThe Code is as follows:
*/
; (Function ($ ){
$. Fn. tabs = function (options ){
Var defualts = {switchingMode: "click "};
Var opts = $. extend ({}, defualts, options );
Var obj = $ (this );
Var clickIndex = 0;
Obj. addClass ("tabsDiv ");
$ ("Ul li: first", obj). addClass ("tabsSeletedLi ");
$ ("Ul li", obj). not (": first"). addClass ("tabsUnSeletedLi ");
$ ("Div", obj). not (": first"). hide ();
$ ("Ul li", obj). bind (opts. switchingMode, function (){
If (clickIndex! = $ ("Ul li", obj). index ($ (this ))){
ClickIndex = $ ("ul li", obj). index ($ (this ));
$ (". TabsSeletedLi", obj). removeClass ("tabsSeletedLi"). addClass ("tabsUnSeletedLi ");
$ (This). removeClass ("tabsUnSeletedLi"). addClass ("tabsSeletedLi ");
Var divid = $ ("a", $ (this). attr ("href"). substr (1 );
$ ("Div", obj). hide ();
$ ("#" + Divid, obj). show ();
};
});
};
}) (JQuery );
The following describes the plug-in style:
Copy codeThe Code is as follows:
Body {background-color: black ;}
. TabsDiv {width: 500px; height: 350px; margin-top: 0px; margin-left: 0px ;}
. TabsDiv ul {width: 500px; height: 20px; list-style: none; background-color: black; margin-bottom: 0px; margin: 0px; padding: 0px ;}
. TabsDiv div {width: 500px; height: 330px; background-color: white ;}
. TabsSeletedLi {width: 100px; height: 20px; background-color: white; float: left; text-align: center ;}
. TabsSeletedLi a {width: 100px; height: 20px; color: black ;}
. TabsUnSeletedLi {width: 100px; height: 20px; background-color: black; float: left; text-align: center ;}
. TabsUnSeletedLi a {width: 100px; height: 20px; color: white ;}
Finally, you know:
Original article: http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html
