Because the work needs, so these days to think about the problem of jquery plug-in development, after a day of battle, finally completed their first jquery plug-ins, for me this see the CSS on the headache of people, a day 8 hours, conservatively estimated 5 hours in the Get CSS ( I am a CSS illiterate level, the description is not appropriate, if the illiterate can not write, only speak, then I am not even speak of the level. Well, cut the crap and come to the point.
first of all to understand the jquery plug-in development is divided into two, 1 class-level plug-in development. 2. Object-level plug-in development.
What the? You ask what is class level and what is Object level?
Class level you can understand to expand the jquery class, the simplest $.post (...);
The object level can be understood as an object based extension, such as $ ("#Me"). Fuck (...); Here This fuck, is based on the expansion of the object. Point to stop, want to in-depth children's shoes please spend RMB buy books or online search information, the book than I introduced more clearly. So ... Next ...
What do you want to write about? The class level and the object level of the first mention of the shape of the debut, because this writing universe, strange, unique, writing norms are not unified, I think the easiest way I wrote, Hava a look!
Copy Code code as follows:
<script type= "Text/javascript" >
Jquery.msg = function () {
Alert ("123");
};
</script>
<script type= "Text/javascript" >
$ (function () {
$.msg ();
});
</script>
Class-level notation: jQuery. Plugin name =function () {...};
Call method: $. Plugin name ();
Exposure parameters These things are not mentioned for the moment. Step by step.
The top of this thing, pop-up dialog box Plug-ins, so to speak, is the first understanding, what is plug-ins, what is class-level plug-ins? Look at the effect of the page start, the truth on the picture, you know.
To compare the object level plug-in writing: Go on!
Copy Code code as follows:
(function ($) {
$.fn.pluginname = function () {
Code area.
};
}) (JQuery);
Object-level notation: $.fn. Plug-in name = function () {}; one more FN, yes, it's fn!. Fn!!! Fn!!!
Call Method: $ ("#Me"). Plugin name ();
To say a little bit, $. Plug-in name (), is through the $ access to call jquery in the global function, directly through jquery or dollar $ call, so as to achieve some effect.
$ ("#Me"). Plug-in name (); is a function called through a jquery object, what? How could you find out this writing is a whole other thing? A? What did you ask?
The first, we have to get a look at the styling of closures, look!, which is legendary for developing jquery Plug-ins.
Copy Code code as follows:
(function ($) {
Here is where you write Dongdong, do not collect local taxes, Shang, personal income tax and so on. Be assured of bold use.
}) (JQuery);
(function ($) {///here is where you write Dongdong, no rent, Shang, personal income tax, etc... Be assured of bold use. }) (JQuery);
Here, the $ parameter, the formal parameter, is used inside the function body, $ is the object that you are currently calling the function, so you can do a lot of things .... You know.
With a tabs panel switch plug-in to detail the JQuery object level plug-in specific development, directly on the code.
First on HTML:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<!--Tabs Sample-->
<div id= "Mytabs" >
<!--tab Area-->
<ul>
<li><a href= "#tabs1" > Options 1</a></li>
<li><a href= "#tabs2" > Options 2</a></li>
<li><a href= "#tabs3" > Options 3</a></li>
</ul>
<!--panel area-->
<div id= "TABS1" >11111</div>
<div id= "TABS2" >22222</div>
<div id= "TABS3" >33333</div>
</div>
</body>
Again on the plugin source code:
/*
Tabs Panel plugin, version 1.0 (2011.08.24)
Usage: $ ("#myDiv"). Tabs ({switchingmode: "click"});
Parameter explanation: Switchingmode is the mode that the panel toggles, such as Switchingmode: "MouseOver" the mouse moves to the tab switchboard, the default is click.
The overall tabs skeleton remains the same as the usual structure as follows:
Copy Code code as follows:
<div id= "Tabs" >
TAB Area UL
<ul>
<li><a href= "#div1" > Options 1</a></li>
<li><a href= "#div2" > Options 2</a></li>
</ul>
Panel Area Div
<div id= "DIV1" > Panel 1</div>
<div id= "div2" > Panel 2</div>
</div>
Style: This style has no effect style by default, and you can modify the plug-in style as needed.
Copy Code code 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 (": a"). AddClass ("Tabsunseletedli");
$ ("div", obj). Not (": a"). 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);
Next to the plug-in style:
Copy Code code 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;}
The final effect chart, you know:
Original: http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html
