本JQ插件例子是在你网站的文章结尾处添加你的版权。
JQ插件标准的封装代码如下,首先需要闭包:
1 <script type="text/javascript"> 2 (function ($) { 3 //这里放入插件代码 4 })(jQuery); 5 </script>
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$'和’jQuery’
接着给插件加入主体:
1 <script type="text/javascript"> 2 (function ($) { 3 $.fn.userCp = function(options) { //定义插件的名称,这里为userCp 4 var dft = { 5 //以下为该插件的属性及其默认值 6 cpBy: "dafi", //版权所有者 7 url: "http://www.qiandabao.com", //所有者链接 8 size: "12px", //版权文字大小 9 align: "left" //版权文字位置,left || center || right 10 }; 11 var ops = $.extend(dft,options); 12 var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式 13 var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_blank" href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>'; //生成版权文字的代码 14 $(this).append(cpTxt); //把版权文字加入到想显示的div 15 } 16 })(jQuery); 17 </script>
OK了,这个插件已经完成了,接下来我们来看看调用的方式。
比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:
1 <script type="text/javascript"> 2 $("#article-content").userCp(); 3 <script">
其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:
1 <script type="text/javascript"> 2 $(function(){ //官方解释:在dom文档载入完成后执行的函数 3 $("#article-content").userCp(); 4 }); 5 <script">
如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:
1 <script type="text/javascript"> 2 $("#article-content").userCp({ 3 cpBy: " T ", 4 url: 'http://www.qiandabao.com', 5 size: "16px",
align: "right"
}); 6 <script">