插件的框架代码：
;(function($){
$.fn.extend({ // **$.fn.extend表示要创建一个对象级别的插件**
"border":function(value){
//这里写插件代码
}
});
})(jquery)
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-2.2.2.min.js"></script>
<script src="jquery.border.js"></script>
<script type="text/javascript">
$(function() {
$("#test").border({
width: "5px",
"line": "dotted",
color: "blue"
}).css("background", "green");
});
</script>
<style type="text/css">
body {
margin: 20px;
}
#test {
font-size: 9pt;
width: 300px;
height: 50px;
line-height: 50px;
font-weight: bold;
color: snow;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="test">这个示例演示了自定义对象级别的插件的使用方法</div>
</body>
</html>
jquery.border.js：
模板要点：
1.函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦
;(function ($) {
$.fn.extend({
//为jquery添加一个实例级别的border插件
"border": function (options) {
//设置属性
options = $.extend({
width: "1px",
line: "solid",
color: "#090"
}, options);
this.css("border", options.width + ' ' + options.line + ' ' + options.color);
//设置样式
return this;
}
})
})(jQuery)
result：
image.png
网友评论