模拟jquery插件的格式

原创 2013年12月04日 09:52:53

现在打算给公司写一个公共组件,常用的工具很多都是jquery,很多时候一些插件特效也是基于jquery写的,因此工作中难免会遇到要拓展别人写的插件。
下面我简单的描述一下插件的格式:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//模拟一个小的插件,方便大家学习
(function($){
	$.fn.huangbiao=function(userSetting){
	//利用jquery的extend方法来拓展插件的配置参数,这个应该暴露给使用用户
		settings = jQuery.extend($.fn.huangbiao.defaultSetting,userSetting);
		
		function init(){
			alert("在我这里进行初始化");
			myFunction(this);
		}
		
		function myFunction(obj){
			alert("我是开发者自己封装的函数");
			showSetting();
			privateFunc();
		}
		
		function showSetting(){
			alert(this.settings.name);
		}
		
		this.unbind('click').click(init);
		
		return this;
	}
	//下面这个是闭包的私有函数
	function privateFunc(){
		alert("i am private function!");
	}
	//暴露给用户使用的函数
	$.fn.huangbiao.openFunc=function(obj){
		alert("test");
	}
	/*
		定义暴露给用户的默认值
		这个一定要放在$.fn.huangbiao对象后面,否则脚本会报错的
	*/
	$.fn.huangbiao.defaultSetting={
		name:"huangbiao",
		sex:"boy",
		age:24
	};
})($);

function useUndefault(){
	//使用自己配置的参数
	$("#undefault").huangbiao({name:"liumei",sex:"girl",age:24});
}

function useUndefault2(){
alert($.fn.huangbiao.defaultSetting.name);
	$.fn.huangbiao.defaultSetting.name="hanmeimei";
	alert($.fn.huangbiao.defaultSetting.name);
	//使用自己配置的参数
	$("#undefault2").huangbiao();
}

function useDefault(){
	//使用默认的配置参数
	$("#default").huangbiao();
}

function openFunction(){
	$("#default").huangbiao.openFunc();
}
</script>
<title>无标题文档</title>
</head>
<body>
<input type="button" value="useUndefault" id="undefault" onclick="useUndefault();"><br>
<input type="button" value="useUndefault2" id="undefault2" onclick="useUndefault2();"><br>
<input type="button" value="useDefault" id="default" onclick="useDefault();"><br>
<input type="button" value="使用提供给用户的函数" id="openFuncId" onclick="openFunction();"><br>
</body>
</html>

 

另外下面提供一个关于jquery的文档,希望能帮助到你!

Clock.jsHTML5模拟时钟jQuery插件

  • 2016年07月28日 23:35
  • 38KB
  • 下载

模拟电子签章盖章效果的jQuery插件源码

转自http://www.jquerycn.cn/a_5675 客户提了个需求,需要在已审核的文档上加盖公章,网上找了找没有现成的,自己动手丰衣足食 老规矩,上图看效果: ...

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

一个模拟手机手指滑动事件的jquery插件

个小的模拟手机手指滑动事件的jquery插件。具备左滑动、右滑动、上滑动、下滑动事件的功能。 随手写的,会有很多不足,希望前端朋友们能够相互补充,完善。 一下是代码,用法:需要对div加左滑动事件,$...

jQuery插件实现模拟dialogs效果实例(图片)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 模拟dia...

模拟电子签章盖章效果的jQuery插件jquery.zsign

2013-01-28更新:打包最新版本源码到csdn下载频道了,包括demo。下载地址: 上传中,稍候发布。。 CSDN审核还没通过,郁闷,直接贴代码吧: /* desc:jQuery...

jQuery插件:超酷的多列网格式拖放插件gridster.js

日期:2012-8-15  来源:GBin1.com 在线演示  本地下载 以往的文章中,我们分享了很多jQuery相关拖放插件,今天我们这里再推荐的一个超酷的jQuery拖放插件...
  • jjfat
  • jjfat
  • 2012年08月15日 11:22
  • 1431

jQuery插件:超酷的多列网格式拖放插件gridster.js

转自:http://blog.csdn.net/jjfat/article/details/7868322 日期:2012-8-15  来源:GBin1.com 在线演示  本...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟jquery插件的格式
举报原因:
原因补充:

(最多只允许输入30个字)