关闭

模拟jquery插件的格式

261人阅读 评论(0) 收藏 举报

现在打算给公司写一个公共组件,常用的工具很多都是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的文档,希望能帮助到你!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:285658次
    • 积分:8485
    • 等级:
    • 排名:第2299名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:4条
    最新评论