最近看了不少关于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插件写法示例》
发表评论