jQuery的插件的写法

JQ插件标准的封装代码如下,首先需要闭包:

< script type = "text/javascript" >
(function ($) {
  //这里放入插件代码
})(jQuery);
</ script >

这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体:

< script type = "text/javascript" >
(function ($) {
  $.fn.userCp = function(options) { //定义插件的名称,这里为userCp
  var dft = {
  //以下为该插件的属性及其默认值
  cpBy: "dafi", //版权所有者
  url: "http://www.dafi.cn", //所有者链接
  size: "12px", //版权文字大小
  align: "left" //版权文字位置,left || center || right
  };
  var ops = $.extend(dft,options);
  var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式
  var cpTxt = '< p ' + ' ' + style + '>此文章版权归< a target = "_blank" href = "' + ops.url + '" >' + ops.cpBy + '</ a >所有</ p >'; //生成版权文字的代码
  $(this).append(cpTxt); //把版权文字加入到想显示的div
  }
})(jQuery);
</ script >

OK了,这个插件已经完成了,接下来我们来看看调用的方式。

比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:

< script type = "text/javascript" >
  $("#article-content").userCp();
< script ">

其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:

< script type = "text/javascript" >
$(function(){ //官方解释:在dom文档载入完成后执行的函数
  $("#article-content").userCp();
});
< script ">

如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:

< script type = "text/javascript" >
  $("#article-content").userCp({
  cpBy: " T ",
  url: "http://dafi.cn",
  size: "16px",
  align: "right"
  });
< script ">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值