jq插件的编写方法(自定义jq插件)---转

本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">
时间: 2024-10-06 02:57:02

jq插件的编写方法(自定义jq插件)---转的相关文章

eclipse安装插件的各种方法

做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件.一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了.下面介绍Eclipse插件的安装方法. eclipse插件的压缩包一般有以下两种形式 *.zip的压缩包形式例如phpeclipse插件,解压目录结构一般是 phpeclipse |-features/ |-plugins/ |-*(这个不重要啦) *.jar的java包形式 为了演示如何安装,推荐2款eclipse插件 php

简单的轻量级的jq插件的编写

插件开发,我们一般运用面向对象的思维方式 例如定义一个对象 var Haorooms= function(el, opt) { this.$element = el, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }, this.options = $.extend({}, this.defaults, opt) } //定义haorooms的方法 haorooms.prototype

关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题

关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法 在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主机,但是他自身并不包括这部分功能,所有的监控.检测功能都是通过各种插件来完成的. 启动Nagios后,它会周期性的自动调用插件去检测服务器状态,同时Nagios会维持一个队列,所有插件返回来的状态信息都进入队列, Nagios每次都从队首开始读取信息,并进行处理后,把状态结果通过web显示出来. N

浅谈C#中插件系统编写的一种简单方法

1.背景 几年前还在上学时,用C#+反射机制写过插件系统,后来又用MEF写过插件系统.插件系统本身具有易于扩展的优势,所以在实际项目中使用很频繁.即使在B/S项目中,插件的思想也是大行其道,比如前端单页面+AMD编程便可以理解为一种插件机制,以及后台扩展项目统一打包为一个jar放入主系统jar文件中一起发布,也可以理解为插件思想的运用. 这里我们回到C/S插件系统编写的问题上.由于之前诸多项目编写是将插件编译成dll,然后进行解析.这样做有其好处,即宿主中可以对各个模块解析,完成插件间.插件和主

自定义jQuery插件

jQuery编写插件的两种方法 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: (function($){ $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); })(jQuery); 或者 (function($){ $.fn.函数名=function(自定义参数){ //这里写插件代码 } })(jQuery); 调用方法:$("#id").函数名(参数); 2.jQuery类级别的插件,

jQuery2.0+中自定义选择器插件

jQuery中自定义插件,主要可以分为三大类:封装对象方法的插件.封装全局函数的插件.选择器插件. 以下分享低版本jQuery和jQuery2.0+版本中选择器插件的使用: 原理:        jQuery的选择符解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每个选择符执行一个函数,称为选择器函数.最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素.这样就可以找到匹配的元素节点 先上代码,在解析: 低版本jQuery <html xmlns="ht

给萌新的 TS custom transformer plugin 教程——TypeScript 自定义转换器插件

xuld/原创 Custom transformer (自定义转换器)是干什么的 简单说,TypeScript 可以将 TS 源码编译成 JS 代码,自定义转换器插件则可以让你定制生成的代码.比如删掉代码里的注释.改变变量的名字.将类转换为函数等等. TypeScript 将 TS 代码编译到 JS 的功能,其实也是通过内置的转换器实现的,从 TS 2.3 开始,TS 将此功能开放,允许开发者编写自定义的转换器. 预备知识 语法树 语法树是用于表示语法的数据结构.具体请参考我的另一个篇文章:ht

Sublime Text 3 常用插件以及安装方法(转)

Sublime Text 3 常用插件以及安装方法(转) http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧,谢谢! 直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Control组件安装 也可以安装package co

ansible(七)Conditionals 和 loops,自定义loops插件

ansible的Conditionals 和 loops 和salt-stack比起来真的太强大了.   salt-stack使用判断循环,好像,只能使用模板里面的判断和循环. 而ansible本身自带了适用于各种场景的判断循环插件.. 不但如此,像loops,我们还可以自己编写插件,满足我们的实际需求. 先说说Conditionals吧 Conditionals相对loops来说,简单,就一个关键字when 和咱们其他的程序语言的条件判断一个样,when 后面也是加一个bool值,或者bool