- 浏览: 5779217 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
在使用jQuery[write less,do more]开发过程中我们会总结出很多非常实用的方法或函数,这些是我们工作中不可或缺的一部分,如果你有分享精神,愿意把你的实用方法或函数与全世界 jQuery使用者共享,那把这些方法或函数制作成一个插件吧!本文将以实例的方式谈谈如何制作jQuery插件,或许你会有很多的收获。
以dataForAjax插件为例[dataForAjax实例下载或查看dataForAjax在线实例]
第一招,制作一个什么样的插件
你打算制作一个什么样的插件,你知道它能拿来做什么?这是你制作jQuery插件的前提,回答好三个问题:制作什么插件,有什么用,怎么样?
实例说明:在使用jQuery.ajax提交表单时,需要获取表单数据data,如果一个一个获取表单数据非常麻烦,如jQuery('username').val()获取用户名等,制作一个可获取表单数据的插件,在使用jQuery.ajax提交时获取表单数据。
第二招,jQuery插件文件命名
给你的jQuery插件命一个名称,然后去jQuery官网http://plugins.jquery.com/查查是否有相同的插件,这很重要,如果已经存在类似的插件,或改进或换名(建议如果有的话就好好参考一个别人的,也许你的比它更好),文件命名jquery.[你的插件名].js,如:jquery.dataForAjax.js。
第三招,书写插件代码
一,jQuery插件架构
现在正式开始你的插件代码书写,使用如下格式(参考)
1. jQuery.fn.[第二招里的插件名称] = function(options){
2. 这里是你插件代码部分 this
3. }
实例说明:
1. jQuery.fn.dataForAjax = function(options){
2. 这里是你插件代码部分 this
3. }
二,如何传入参数和参数的使用
如果需要传入参数如上options,可以是数组,字符等
使用jQuery内置jQuery.extend扩展jQuery对象本身这个方法,如dataForAjax插件需要传入两个参数,一个显示错误提示的ID(字符)和错误提示信息(数组),实现方法如下:
1. setting = jQuery.extend({
2. showMessage:'showmessage',
3. message:message,
4. },options);
可设置默认值,如上的showMessage的默认ID为showmessage,message表示数组,默认为空。
当然,如果参数非常少,你可以直接传入参数
传入的参数如何使用?
使用参数非常简单,直接引用setting.showMessage
接下来就开始你的jQuery插件代码书写过程!
注意事项:
1,this对象
其中this对象,表示当前的引用对象,实例说明如下:
1. <div id="biuuu"></div>
1. jQuery("#biuuu").dataForAjax(options)
那么this就表示代表<div id="biuuu"></div>这个对象
2,学会this.each使用
循环获取每一个对象
3,尽量把$替换成jQuery,考虑通用性和冲突
第四招,测试jQuery插件
当你的插件书写完成后,就需要测试一下你的插件,在不同的浏览器下进行测试,如:IE7、IE8、Firefox、Safari、Google Chrome和Opera等等。
第五招,发布jQuery插件
1,打开jQuery.com
2,新注册一个用户http://plugins.jquery.com/user
3,增加一个插件,注意选好分类(ajax、Animation and Effects、Browser Tweaks等等),插件名称,插件介绍等等
4,上传JS文件,如果条件允许可以制作一个在线演示页面(可增加你的网站访问哦),同时你也可以发布在http://code.google.com中
5,是否还需要继续完善,并改进BUG和优化
6,版本完善(有改进或修复可以增加版本方式进行)
总结
通过上面几个步骤,学会如何制作一个jQuery插件,是不是觉得非常简单,那还等什么,开始你的jQuery插件之旅吧!
一个简单完整的jQuery插件实例,当你点击链接时使用ajax请求,将返回的内容显示在#content的容器中
再来一个插件源码,该插件用来操作cookie
以dataForAjax插件为例[dataForAjax实例下载或查看dataForAjax在线实例]
第一招,制作一个什么样的插件
你打算制作一个什么样的插件,你知道它能拿来做什么?这是你制作jQuery插件的前提,回答好三个问题:制作什么插件,有什么用,怎么样?
实例说明:在使用jQuery.ajax提交表单时,需要获取表单数据data,如果一个一个获取表单数据非常麻烦,如jQuery('username').val()获取用户名等,制作一个可获取表单数据的插件,在使用jQuery.ajax提交时获取表单数据。
第二招,jQuery插件文件命名
给你的jQuery插件命一个名称,然后去jQuery官网http://plugins.jquery.com/查查是否有相同的插件,这很重要,如果已经存在类似的插件,或改进或换名(建议如果有的话就好好参考一个别人的,也许你的比它更好),文件命名jquery.[你的插件名].js,如:jquery.dataForAjax.js。
第三招,书写插件代码
一,jQuery插件架构
现在正式开始你的插件代码书写,使用如下格式(参考)
1. jQuery.fn.[第二招里的插件名称] = function(options){
2. 这里是你插件代码部分 this
3. }
实例说明:
1. jQuery.fn.dataForAjax = function(options){
2. 这里是你插件代码部分 this
3. }
二,如何传入参数和参数的使用
如果需要传入参数如上options,可以是数组,字符等
使用jQuery内置jQuery.extend扩展jQuery对象本身这个方法,如dataForAjax插件需要传入两个参数,一个显示错误提示的ID(字符)和错误提示信息(数组),实现方法如下:
1. setting = jQuery.extend({
2. showMessage:'showmessage',
3. message:message,
4. },options);
可设置默认值,如上的showMessage的默认ID为showmessage,message表示数组,默认为空。
当然,如果参数非常少,你可以直接传入参数
传入的参数如何使用?
使用参数非常简单,直接引用setting.showMessage
接下来就开始你的jQuery插件代码书写过程!
注意事项:
1,this对象
其中this对象,表示当前的引用对象,实例说明如下:
1. <div id="biuuu"></div>
1. jQuery("#biuuu").dataForAjax(options)
那么this就表示代表<div id="biuuu"></div>这个对象
2,学会this.each使用
循环获取每一个对象
3,尽量把$替换成jQuery,考虑通用性和冲突
第四招,测试jQuery插件
当你的插件书写完成后,就需要测试一下你的插件,在不同的浏览器下进行测试,如:IE7、IE8、Firefox、Safari、Google Chrome和Opera等等。
第五招,发布jQuery插件
1,打开jQuery.com
2,新注册一个用户http://plugins.jquery.com/user
3,增加一个插件,注意选好分类(ajax、Animation and Effects、Browser Tweaks等等),插件名称,插件介绍等等
4,上传JS文件,如果条件允许可以制作一个在线演示页面(可增加你的网站访问哦),同时你也可以发布在http://code.google.com中
5,是否还需要继续完善,并改进BUG和优化
6,版本完善(有改进或修复可以增加版本方式进行)
总结
通过上面几个步骤,学会如何制作一个jQuery插件,是不是觉得非常简单,那还等什么,开始你的jQuery插件之旅吧!
一个简单完整的jQuery插件实例,当你点击链接时使用ajax请求,将返回的内容显示在#content的容器中
;(function($){ $.fn.ajaxLink = function(options){ var defaults = { target : "#content", dataType : "html", method : "post", cache : false, async : true, beforeSend : false, complete : false, error : false }; var options = $.extend(defaults, options); return this.each(function(){ $(this).click(function(){ $.ajax({ type : options.method, url : $(this).attr('href'), dataType : options.dataType, cache : options.cache, async : options.async, data : $(this).attr('data'), beforeSend : function(){ if(options.beforeSend) options.beforeSend(); }, complete : function(XMLHttpReq, textStatus){ if(options.complete) options.complete(XMLHttpReq, textStatus); }, success : function(data){ $(options.target).html(data); }, error : function (event, request, settings){ if (options.error) options.error(event, request, settings); } }); return false; }); }); }; })(jQuery);
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="javascript/jquery-ajaxLink.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ajaxLink").ajaxLink(); }); </script> </head> <body> <a href="1.html" class="ajaxLink">链接1</a><br /> <a href="2.html" class="ajaxLink">链接2</a><br /> <div id="content" style="text-align: center" > </div> </body> </html>
再来一个插件源码,该插件用来操作cookie
jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
发表评论
-
jquery动态实现填充下拉框
2010-01-15 20:37 4683项目需要实现一个功能 当点下拉框时动态加载后台数据。 这是后台 ... -
使用jQuery动态绑定事件插件livequery弥补live的不足
2009-12-25 15:05 8831jquery1.3.2的动态绑定事件方法live不支持blur ... -
JQuery插件: moreSelectors为jQuery提供更多的选择器
2009-12-15 15:46 2015为jQuery提供更多的选择器 http://www.soft ... -
JQuery解析Json
2009-12-11 10:15 2430var arr1 = [ "one", ... -
jquery最大化窗口
2009-12-11 10:13 5801<script type="text/ja ... -
JQuery解析xml
2009-12-11 10:04 3211java类中 response.setContent ... -
Jquery ajax跨域访问的问题
2009-12-11 10:02 2508$(document).ready(function(){ ... -
jQuery插件flexiGrid的完全使用,附代码下载
2009-12-10 15:52 35943在这个例子中其实不光使用了flexiGrid,还有 <s ... -
jQuery图片放大镜插件jqzoom
2009-12-09 16:33 3989<html> <head> & ... -
jquery操作select的联动插件FillOptions&CascadingSelect
2009-12-08 12:17 13476详细介绍看这里 http://blog.csdn.net/le ... -
jquery操作select
2009-12-07 16:23 8788//得到select项的个数 jQuery.fn.s ... -
javascript调试工具:Blackbird
2009-12-07 11:38 4188You might never use alert() aga ... -
基于jQuery的FlexiGrid的插件使用和改造
2009-11-30 15:13 16099已不推荐下载,如要下载去这个连接下载最新的 http://gu ... -
最简单的FlexiGrid使用(静态的)
2009-11-27 14:41 3105<link rel="styleshe ... -
jquery插件FlexiGrid的使用(已更新)
2009-11-27 13:51 47413已不推荐下载,如要下载去这个连接下载最新的 http://gu ... -
jQuery之下拉菜单
2009-09-30 13:49 1976<!DOCTYPE html PUBLIC &quo ... -
jquery Tooltips插件cluetip
2009-09-27 13:46 4718demo: http://plugins.learningjq ... -
jQuery插件linkButton
2009-09-23 10:34 11590linkButton是一个可以把<a href=&quo ... -
jQuery插件Font effect实现Javascript文字特效
2009-09-17 20:54 5766http://www.biuuu.com/p837.html ... -
jQuery插件animateToClass实现javascript自定义动画效果
2009-09-17 20:52 8222或许使用这个JavaScript库也可以达到自定义动画的功能: ...
相关推荐
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery 插件jquery 插件jquery 插件jquery 插件
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
Ddreamweaver jquery 插件 Ddreamweaver jquery 插件Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件
flash-jquery插件 flash-jquery插件 flash-jquery插件 flash-jquery插件
jQuery日历插件最简单的实现方式 仅显示日期
jquery插件.rar
简单的jQuery加载等待转圈页面小插件
几个常用的Jquery插件 简单使用 有兴趣的可以在项目中用到
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
JQuery简单插件示意,介绍插件的基本写法格式
jquery插件jquery插件jquery插件jquery插件
jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载
jQuery常用插件大全 jQuery 插件大全