Tutorial on developing jQuery plug-ins yourself_jquery

Because of my work needs, I have been thinking about the development of jQuery plug-ins these days. After a day of hard work, I finally completed the first jQuery plug-in I made. For someone like me who has a headache when seeing CSS, it only takes one day. 8 hours, a conservative estimate of 5 hours spent working on CSS (I am css illiterate, which is not an adequate description. If an illiterate person cannot write but can only speak, then I am at a level where I cannot even speak.), good Okay, stop talking nonsense and get to the point.

First of all, you must understand that there are two types of jQuery plug-in development, 1. Class-level plug-in development. 2. Object level plug-in development.

What? You actually ask what is the class level and what is the 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 expansion, such as $("#Me").fuck(...); The fuck here is an object-based expansion. That's all. If you want to go deeper, please spend RMB to buy a book or check the information online. The book explains it more clearly than I can. so...Next...

As for what you want to write? It is the turn of the class-level and object-level styling mentioned above to come on stage, because there are all kinds of strange and strange writing methods in the world. Each has its own merits, and the writing standards are not uniform. I wrote it according to the method that I think is the easiest, Hava a Look!

Copy code The code is as follows:

Class level writing: jQuery.plugin name=function(){....};
Calling method: $.plugin name();
I won’t mention things like exposed parameters for now. Step by step...
The thing above is a pop-up dialog plug-in. So, it is important to understand first, what is a plug-in, what is a class-level plug-in? Let’s take a look at the effect of page startup. The truth in the picture above , you know..
Let’s compare object-level plug-in writing: Go on!

Copy the code The code is as follows:

(function($) {
$.fn.pluginName = function() {
// Code area.
};
})(jQuery);

Object level writing: $.fn.Plug-in name = function(){}; There is one more fn, yes, it is fn! fn!!! fn!!!

Calling method: $("#Me").Plug-in name();

To put it briefly, $.Plug-in name(); is accessed through $ to call the global function in jquery, which can be directly passed jquery or $$ call to achieve some effects.

$("#Me").Plug-in name(); is a function called through a jquery object. What? You actually found that there is an extra layer outside this writing method? Ah? You asked What's going on?

The First, we must first understand the shape (framework) of the closure thing. Look!, this is the legendary stuff used to develop jQuery plug-ins

Copy code The code is as follows:

(function($){
//Here is what you write Dongdong places do not collect local tax, industrial and commercial tax, personal income tax, etc. Feel free to use it
}) (jQuery);

(function($){ // This is a place for you to write stuff. There is no local tax, industrial and commercial tax, personal income tax, etc. Feel free to use it })(jQuery);

The $ parameter after function, the formal parameter, is in the function body. For internal use, $ is the object you are currently calling the function on, so you can do a lot of things... you know.

Use a tabs panel switching plug-in to demonstrate the specific development of jQuery object-level plug-in in detail, and directly enter the code.

First enter the HTML:

Copy the code The code is as follows:

• 选项1


• 选项2


• 选项3

11111

22222

33333

再上插件源码：

/*
tabs面板插件，版本1.0(2011.08.24)
用法：$("#myDiv").tabs({switchingMode:"click"});
参数解释：switchingMode是面板切换的模式，如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。
整体tabs骨架不变，依然是常用的结构如下：

复制代码 代码如下:

选项卡区域ul

• 选项1


• 选项2

面板区域div

面板1

面板2

样式：此样式为默认无任何效果样式，可根据需要修改插件样式。

复制代码 代码如下:

*/
; (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);

接下来上插件样式：

复制代码 代码如下:

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;}

Final renderings, you know:

Original text: http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html