JQuery插件开发 + 插件

uule

浏览: 6358289 次
性别:
来自: 一片神奇的土地

最近访客更多访客>>

wangenbao1

hyjqdy

逆光下的轮廓

taominghua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery
【工具】

jQuery 框架 Ajax 活动 CSS

jQuery插件库-各种很酷的插件 - www.jq22.com

常用插件：

1、抽奖转*盘插件（附件）

jQueryRotate

jQuery旋转插件jqueryrotate

利用jqueryRotare实现抽奖转盘

2、微信抽奖（9格）

JS 9 格抽奖（现用）

另一种实现方式（第二中方式）

方式三

3.Validform:

Jquery表单验证插件–Validform：一行代码搞定整站的表单验证！

Validform 官网

jquery.form.js:

jquery.form.js中的ajaxSubmit

4.jquery生成二维码插件（附件）

jquery.qrcode.min.js

5、百度编辑器ueditor的简单使用

见附件（修改后可用于手机版）

ueditor.config.js

6、jQuery 信息提示弹出插件jquery.noty.packaged.min.js

7、jQuery图片延迟加载插件jQuery.lazyload

可设置图片加载前的Loading图

详细用法

8、日历插件DateTimePicker

9、jQueryphotoClip图片剪裁插件

jQuery图片裁剪插件jQuery-photoClip使用攻略

DEMO见附件：clip-图片剪裁

通过HTML5的FileReader接口读取图片地址：

HTML5之FileReader的使用

HTML5 FileReader.

HTML5学习之FileReader接口

10、jQuery数字滚动展示效果

注意jQuery版本问题，数字为图片问题(数字图片变为红色，见附件number.png)。

10、后台管理模板WrapBootstrap

11、jQuery弹窗

弹窗2：

jQuery+CSS3+Html5实现弹出层效果实例代码

12、jQuery延迟加载（DEMO见附件）：

https://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

13、前端模版引擎

前端模板引擎doT.js的使用（MI商品购买抢购页面使用了）

我们在做前端开发时，经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html，如以下：

var html = '';
    $.each(data.list, function(index, item) {
        html += '<tr></tr>';
        html += '<td>' + item.id + '</td>';
        html += '<td>' + item.name + '</td>';
        html += '<td>' + item.email + '</td>';
        html += '</tr>'
    });

但是，这种通过拼接html的方式使用在比较简单的结构还好；如果结构比较复杂，拼接的时候还得注意引号之间的嵌套，而且代码维护起来也比较困难，代码可读性也差。因此使用模板引擎可以帮我们很好的避免这个问题。

常用的模板引擎有artTemplate、Jade、 Mustache、doT.js、juicer等，此编文章仅介绍doT.js的使用。

14、Chrome插件(扩展)开发全攻略

开发chrome插件

========================================================================

jQuery主体如下：

(function(){...})();

这个表达式声明了一个匿名函数（第一个括号），然后再执行它（第二个括号）

jQuery为开发插件提拱了两个方法，分别是：
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。

$.extend({
　　add:function(a,b){return a+b;}
});

便为jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，
$.add(3,4); //return 7

jQuery.fn.extend(object); 就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。真实的开发过程中，当然不会做这么小白的插件，事实上jQuery提拱了丰富的操作文档，事件，CSS ,Ajax、效果的方法，结合这些方法，便可以开发出更加 NB 的插件。

插件开发(转)：

先想好做个什么功能
这是第一步，也是很重要的一步，鉴于咱们都是刚学习写jQuery插件，所以，这个功能一定要简单一些。不要想一口就吃个胖子，咱也吃不了。咱还是捡个瘦的下手吧。但是，这个功能也不能太无聊，如果无聊到几乎没用处，就算做好了也是扔到马桶里，不会持续更新，也便不会持续进步了。我最终选择的是：美化表格，让表格的奇偶行颜色不同，然后鼠标移到某行上，某行可以高亮显示。功能简单又实用，不错，不错。呵呵～～

还不急，先想想实现原理。必要的时候，先写出简单的实现的原型。
我的这个美化表格的例子，实现原理倒是简单，无非就是找到表格的奇偶行，然后添加不同的class，活动行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再去掉这个class即可。
一个通用的框架
在动手写自己的jQuery插件之前，自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行，那咱也把这框架照搬过来吧。

(function($){
   $.fn.yourName = function(options){
           //各种属性、参数
    
    var options = $.extend(defaults, options);
     this.each(function(){
                 //插件实现代码
          });
  };
})(jQuery);

有了这个，咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了，一定要有一个响亮的名号才行，这样走在江湖上，才能够屌，够威风。不信，你听听人家“中国牙防组”！所以，咱这里一定要起个响亮的名号，一定要简单、明了、够权威。所以，决定了，就叫做“tableUI”了！
参数和属性也很简单，无非就是三个class的名称。就叫做：evenRowClass、oddRowClass和activeRowClass吧。
所以，上面的框架，咱就把上半身给填上了。

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//实现代码
});
};
})(jQuery);

这里重点说一下这一句：

var options = $.extend(defaults, options);

看上去很屌的一句，其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。想进一步了解的朋友，可以参考jquery的官方文档：

http://api.jquery.com/jQuery.extend/

开始下半身吧
ok，上半身填补完了，咱就可以填补下半身吧。无非就是找到基数行和偶数行（感谢jQuery提供了类似tr:even这种写法，使其及其简单），然后添加上相应的class。然后再给所有的tr，绑定mouseover和mouseout事件即可。下半身代码如下：

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);

最重要的一步！
也许有些朋友觉得这样就算是完成了。但是切切相反，我们还有最重要的一步没有完成，那就是一定要在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。

/*
* tableUI 0.1
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/
* Date: 2010-03-30
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*/

附件插件效果：