风一样的回忆

新浪微薄腾讯微薄

最新碎语:从未遇见一位没亏过钱的富人,却遇见许多从未亏掉一毛钱的穷人

您的位置:风一样的回忆 >jQuery> [原创]完整jQuery插件写法示例

[原创]完整jQuery插件写法示例

最近看了不少关于jQuery插件开发的文章,整理一个比较完整的示例。如下

一、HTML5部分


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="plugin.js"></script>
	<script type="text/javascript">
	//页面加载完后,加载jQuery对象
	$(function(){
		$('#ok').bold();
		$('#ok').all();
		$('#ok').hilight({background:"yellow",border:"3px #ddd dotted"});
	})
	
	</script>
</head>
<body>
	<div  id="ok">好好好</div>
</body>
</html>

二、JS部分


(function($){
	$.fn.extend({
		//设置字体宽度为粗
		"bold":function(){
			return this.css({fontWeight:"bold"});
		},
		//设置标签背景颜色,高度,宽度
		"all":function(){
			return this.css({background:"#ccc",height:"300px",width:"200px"})
		},
		//设置标签前景,背景,边框样式,边框弧度,接受options参数控制插件行为
		"hilight":function(options){
			//设置默认值
			var defaults = {
				foreground:'red',
				background:'yellow',
				border:'5px #ccc solid',
				radius:'5% 5%'
			};
			var opts=$.extend(defaults, options);
			console.log(opts);
			return this.css({foreground:opts.foreground,background:opts.background,border:opts.border,'border-radius':opts.radius});
		}
	})
})(jQuery);


---

转载请注明本文标题和链接:《[原创]完整jQuery插件写法示例

以下为全部代码:
Plugins by ewCEO.com

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交