JQuery插件开发 + 插件
来源:互联网 发布:徐州工程学院报修软件 编辑:程序博客网 时间:2024/06/10 02:45
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实现弹出层效果实例代码
========================================================================
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按钮样式: