插件的框架代码：
;(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：
;(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：
时间： 2024-10-12 20:57:16