`
uule
  • 浏览: 6346929 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

JQuery插件开发 + 插件

阅读更多

jQuery插件库

jQuery插件

精品代码

WEB技术

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可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
*/ 

 

 

 

附件插件效果:


 

改变Upload按钮样式:


 

 

 

 

  • 大小: 34.4 KB
  • chart.rar (215.1 KB)
  • 描述: 上图图表插件
  • 下载次数: 4
  • aeroWindow.rar (948.6 KB)
  • 描述: 透明窗口插件
  • 下载次数: 4
  • 大小: 950 Bytes
  • rotate.rar (361.6 KB)
  • 描述: 抽奖转*盘插件
  • 下载次数: 2
  • 大小: 8.2 KB
  • 大小: 28.4 KB
  • 大小: 12.4 KB
  • 大小: 23.1 KB
  • 大小: 16.2 KB
  • 大小: 3.2 KB
  • 大小: 5.2 KB
分享到:
评论
1 楼 OCEANVITAS 2011-09-22  
COOL!

相关推荐

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    jQuery插件开发全解析

    ### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...

    JQuery插件开发

    **jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...

    jQuery插件开发及常用插件大全.zip

    jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf

    jquery 插件开发 pdf

    jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...

    jQuery插件开发的五种形态小结

    总结来说,jQuery插件开发中的五种形态小结通过一系列的示例和说明,为开发者展示了如何创建一个高效、可维护的插件。这五个形态涉及到了代码的独立性、链式操作、插件的可配置性、生命周期的管理、无冲突处理以及...

    jQuery插件开发详解

    《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理和动画制作。对于开发者而言,掌握jQuery插件的开发技巧是提升工作效率的重要一环。本篇将深入探讨...

    php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页

    在实际应用中,前端页面可能会有一个容器元素,用于显示新闻列表,而jQuery Pager插件会在该容器下方创建分页导航。当用户点击分页按钮时,jQuery会触发AJAX请求,服务器返回的新数据会被插入到新闻列表容器中,替换...

    jquery插件开发文档

    jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...

    PHP多文件上传插件,PHP+jQuery+Ajax多图片上传

    2. **jQuery插件**:例如`jQuery.form.js`或`jQuery.fileupload.js`,它们提供了方便的API来处理多文件上传。这些插件可以监听文件选择事件,创建FormData对象,将文件数据附加到对象中,并通过Ajax发送到服务器。 ...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    jquery 插件开发

    jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...

    SSH+JQuery插件+Mysql

    SSH(Struts2 + Spring + Hibernate)是一种常见的Java Web开发框架组合,用于构建高效、可扩展的Web应用程序。Struts2提供了MVC(Model-View-...JQuery插件的加入进一步提升了用户体验,使得开发过程更加便捷高效。

Global site tag (gtag.js) - Google Analytics