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