jquery插件的开发

最新推荐文章于 2024-01-05 19:47:22 发布

澎蠡

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量260

点赞数

分类专栏： jquery/js 文章标签： jquery 插件

本文链接：https://blog.csdn.net/u013971970/article/details/21533865

版权

jquery/js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我会逐步的一点一点的学习jquery插件的开发。

先贴框架。

(function($){
	jQuery.fn.testPlugin = function(options){
		var defaults = {
			//这里是默认的参数
		}
		var options = $.extend(defaults,options);//吊炸天的参数绑定。
		this.each(function(){
			//这里是程序段代码
		})
	}
})(jQuery);

再贴一个简单到不能再简单的例子。

(function($){
	jQuery.fn.testPlugin = function(options){
		var defaults = {
			text : "pengli"
		}
		var options = $.extend(defaults,options);
		this.each(function(){
			var o = options;
			var obj = $(this);
			var str = "<button id=\"test\">"+ o.text +"</button>";
			obj.html(str);
			jQuery("#test").click(function(){
				alert(o.text);		
			});
		})
	}
})(jQuery);

html的代码是这样滴。

<html>
	<head>
		<title>jQuery</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
		<script src="jquery.testPlugin.js" type="text/javascript"></script>
	</head>
	<body>

		<div class="tang"></div>
<script>
$(".tang").testPlugin({
	text : "澎蠡的插件"
});
</script>
	</body>
</html>

效果图。如下。

ok不解释了，一切解释都是虚无的。

后面会继续研究这个插件的开发。我会慢慢的丰富这篇文章的。。。

根据jquery插件的股则，我们最好是加上return

return this.each(function(){//根据jquery的插件开发规矩，请加上return。

最后编辑（2014年3月19日16:23:23）

ok，我想着是不是要开发一个比上面这个稍微复杂一点的插件。

就想到经常用到的table的checkbox的全选按钮。

我决定另外开一贴，来进行设计。。

（2014年3月19日21:38:43）

澎蠡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件的开发

我会逐步的一点一点的学习jquery插件的开发。先贴框架。(function($){ jQuery.fn.testPlugin = function(options){ var defaults = { //这里是默认的参数 } var options = $.extend(defaults,options);//吊炸天的参数绑定。 this.each(functi
复制链接

扫一扫