按 ‘ jQuery ’ 标签归档

jQuery插件

你有没有过这样的经历?比如在使用jQuery的Grid插件FlexiGrid时候,你想在表格的行里添加链接和按钮,修改FlexiGrid来实现,那破坏了插件最原始的状态,将来要升级插件的话,可能会带来麻烦,当然这种情况少见,这可能是我嫌修改FlexiGrid代码麻烦而找的借口吧。那我们只能通过在服务器端生成代码的方式,比如返回的是JSON数据,我们只需添加一列,列的内容就是你的按钮和链接,假设你添加的这个按钮是个“删除”按钮,那你可能会采用Ajax方式进行删除,问题出现了,你写在$(document).ready();里的函数访问不到了,如果将你的函数放在$(document).ready();的外部,可以访问,那不能保证函数的正确,除非你将函数放在页面最末端,那$(document).ready();对你而言也就失去了意义,后来找到一种方法,手册上有,就是下面的:

  1. jQuery.fn.extend({
  2.   functionName : function() {
  3.     do_sth....;
  4.   }
  5. });

外部调用

  1. $.functionName(data);

小记一下,以后可能还会用到。如果考虑到以后升级FlexiGrid插件的话,那还是直接修改FlexiGrid代码增加扩展的方式来实现所需的功能,实现的也比较优雅。

jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

JQuery Form Plugin API中文

英文原文:http://www.malsup.com/jquery/form/#api

表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm

增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

实例:

  1. $('#myFormId').ajaxForm(); 
  2.  
  3. $('#myFormId').ajaxForm();

ajaxSubmit

马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

实例:

  1. // 绑定表单提交事件处理器   
  2. $('#myFormId').submit(function() {   
  3.     // 提交表单   
  4.     $(this).ajaxSubmit();   
  5.     // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false   
  6.     return false;   
  7. }); 
  8.  
  9. // 绑定表单提交事件处理器
  10. $('#myFormId').submit(function() {
  11.     // 提交表单
  12.     $(this).ajaxSubmit();
  13.     // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false
  14.     return false;
  15. });

formSerialize

将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。
可链接(Chainable):不能, 这个方法返回一个字符串。

实例:

  1. var queryString = $('#myFormId').formSerialize();   
  2.  
  3. // 现在可以使用$.get、$.post、$.ajax等来提交数据   
  4. $.post('myscript.php', queryString); 
  5.  
  6. var queryString = $('#myFormId').formSerialize();
  7.  
  8. // 现在可以使用$.get、$.post、$.ajax等来提交数据
  9. $.post('myscript.php', queryString);

fieldSerialize

将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。
可链接(Chainable):不能,这个方法返回一个字符串。

实例:

  1. var queryString = $('#myFormId .specialFields').fieldSerialize(); 
  2.  
  3. var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。
可链接(Chainable):不能,该方法返回数组。

实例:

  1. // 取得密码输入值   
  2. var value = $('#myFormId :password').fieldValue();   
  3. alert('The password is: ' + value[0]);   
  4.  
  5. // 取得密码输入值
  6. var value = $('#myFormId :password').fieldValue();
  7. alert('The password is: ' + value[0]);

resetForm

通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
可链接(Chainable):可以。

实例:

  1. $('#myFormId').resetForm(); 
  2.  
  3. $('#myFormId').resetForm();

clearForm

清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。
可链接(Chainable):可以。

  1. $('#myFormId').clearForm(); 
  2.  
  3. $('#myFormId').clearForm();

clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。
可链接(Chainable):可以。

  1. $('#myFormId .specialFields').clearFields(); 
  2.  
  3. $('#myFormId .specialFields').clearFields();

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。

url

指定提交表单数据的URL。
默认值:表单的action属性值

type

指定提交表单数据的方法(method):“GET”或“POST”。
默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据:

  1. [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 
  2.  
  3. [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

默认值:null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:

‘xml’:如果dataType == ‘xml’,将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。

‘json’:如果dataType == ‘json’, 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

‘script’:如果dataType == ‘script’, 服务器响应将求值成纯文本。

默认值:null(服务器返回responseText值)

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type=”image”. You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type=”image”.
布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type=”image”的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type=”image”的input元素,就应该将semantic设置为true。(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。)
默认值:false

resetForm

布尔标志,表示如果表单提交成功是否进行重置。
Default value: null

clearForm

布尔标志,表示如果表单提交成功是否清除表单数据。
默认值:null

实例:

  1. // 准备好Options对象   
  2. var options = {   
  3.     target:     '#divToUpdate',   
  4.     url:        'comment.php',   
  5.     success: function() {   
  6.       alert('Thanks for your comment!');   
  7.     } };   
  8.  
  9.    // 将options传给ajaxForm   
  10. $('#myForm').ajaxForm(options); 
  11.  
  12. // 准备好Options对象
  13. var options = {
  14.     target:     '#divToUpdate',
  15.     url:        'comment.php',
  16.     success: function() {
  17.       alert('Thanks for your comment!');
  18.     } };
  19.  
  20.    // 将options传给ajaxForm
  21. $('#myForm').ajaxForm(options);

注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。

转自:http://lichuhui.javaeye.com/blog/295905

40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸臃肿。在某些场合,如果你只想完成特定的工作,可以使用一些功能更专一的轻量库,本文介绍了40个非常出色的轻量级 JavaScript 库。

1. 表单相关
wForms
一个低调的开源项目,简化了绝大多数常用 JavaScript 表单功能,包含可以直接使用的表单验证功能,另外,还包含强大的表单同步以及表单条件判断功能。
wForms

Validanguage
又一个低调的 JavaScript 表单验证框架。它拥有集成逻辑,一些设置可以针对全局,单个表单或单个对象。提供两个API,集成 AJAX 支持,缓存,以及回调函数。它提供类似 HTML 的 API 语句,以及面向对象的 JavaScript API 。
Validanguage

LiveValidation
一个轻量的表单验证库。除了传统的验证功能,还提供实时验证,可以一边输入一遍验证。Ruby on Rails 用户可能会发现这个库非常好用,因为他们的命名规则和参数十分近似。该库既有独立版本,又有一个 Prototype 版本。
LiveValidation

yav
一个强大,灵活,可扩展的表单验证库。支持各种场合,从简单的如日期,电子邮件地址以及整数的验证,到复杂的,如正则表达式。内置 AJAX 支持,输出的错误消息可以定位到对象级。

qForms
处理表单的整套方案。功能包括各种验证规则,防止多次发布的机制,以及锁定或解锁制定输入框。

formreform
不基于 table 的多栏设计向来是一个挑战。这个微型库将传统的表单变成漂亮的多栏形式。formreform
2. 动画相关
$fx()
一个用来让 HTML 对象运动的轻量库。你可以在一个时间轴上改变任何 CSS 属性,对于复杂动画,你可以将各种效果结合起来,将对象分组,让它们并行运动。
$fx() JavaScript Animation Library

JSTweener
一个生成中间帧的 JavaScript 库,它的 API 类似著名的中间帧引擎 Tweener。你可以指定动画时间,定义切换效果以及时延。在几乎任何点都可以触动事件。

Facebook Animation
一个强大的,用来创建可定制的,基于 CSS 的动画。在 Facebook 动画中,几行代码就可以改善 UI。语法和 FBJS (用于 Facebook 的库)一样。

FX
一个语法类似 YUI 的轻量 JavaScript 库,可以为几乎任何 CSS 属性创建中间帧。支持颜色和滚动动画,为对象设置 to 和 from 值就可以了。
3. 视觉与图形效果
JS charts
支持柱状图,圆饼图以及简单的曲线图。直接将这个库插入网页,然后从 XML 文件或 JavaScript 数组变量调用数据。PNG 格式,兼容所有主要浏览器。
JS Charts

Canvas 3D JS Library (C3DL)
C3DL 使 3D 程序的编写变得简单。提供一套数学,场景与 3D 对象类,可以直接在浏览器中开发 3D 内容,不需要很深的 3D 知识。
C3DL

Processing.js
这是 Processing 语言在 JavaScript 的移植。2D输出功能丰富。提供了绘图,色彩处理,字体,对象等处理函数。
Processing.js

Rapha?l
一个让人惊叹的 JavaScript 库,可以在 Web 上实现矢量图。使用 SVG, VML 创建的图形可以被更改或绑定事件。功能极其丰富,包括旋转,动画,缩放等。

Raphael: Vectors With JavaScript

ImageFX
该 JavaScript 库为图片添加效果,如虚化,锐化,浮雕,加亮等。ImageFX 使用画布对象实现这些效果,兼容所有主流浏览器。这个库非常容易使用,只要将 .js 库文件插入网页,调用那些函数即可。
Imagefx

Pixastic
Pixastic 使用 HTML5 画布对象,允许对原始像素进行操作。效果包括去饱和度,灰度级,反转,亮度,对比度调整,色调,饱和度调整,以及浮雕,虚化等效果。因为用到了 HTML 5 的画布对象,因此还无法兼容所有浏览器。

Reflection.js
一个很低调的 JavaScript 自动实现倒影效果。倒影的高度,透明度可以调整。支持所有主流浏览器,文件尺寸小于5K。
Reflection.js
4. 数据库
Taffy DB
一个 JavaScript 库,可以看作浏览器中的 SQL Server,或高级数组管理器。在使用了 AJAX 的程序中,可以用作数据库层,可以创建,读取,编辑,删除数据,使用循环,排序以及高级查询。

ActiveRecord.js
这个库支持 Google Gears 以及 Chrome,Aptana Jaxer, Adobe AIR 以及任何支持 HTML 5 SQL 细则的平台(目前有 Webkit 以及 iPhone)。可以自动创建表,验证和同步数据。
ActiveRecord.js

5. 字符串与数学函数
Date.js
和日期打交道不是件容易事,有很多格式要处理。Datejs 可以很好地处理简单或复杂的日期函数。可以将日期解析出诸如“Next thursday”,“+2 years”一类的格式,也支持所有日期形式,如 2009.01.08, 12/6/2001。
Datejs

Sylvester
一个处理矢量和点阵的数学 JavaScript 库,包含多维矢量和点阵建模类,以及在3D空间的一些模型。
Sylvester

Pretty Date
一个很出色的 JavaScript 库,用一种很漂亮,很友好的方式显示日期,如下图所示。
Pretty Date

XRegExp
JavaScript 中的 RegExp 对象已经支持正则表达式,XRegExp 增加了更多未来浏览器可能包含的功能(ECMAScript 4 – ES4)。该库对 RegExp 对象进行缓存,重用并增加了众多新功能。

JavaScript URL Library
一个用来处理 URL 的 JavaScript 库,可以对 URL 中的任意部分进行处理。
6. Fonts
typeface.js
这个库可以让你在网页中使用任意字体,但和 sIFR 以及 FLIR 这些基于 Flash 的方案不一样,typeface.js 100% 基于 JavaScript,只需将你的字体文件上传到一个基于 Web 的生成器那里,再将生成的 JavaScript 文件下载回来包含到网页中即可。
Typeface.js

Cufón
和 typeface.js 很相像,Cufón 也可以让你在网页中使用任意字体,同样,它也是使用一个生成器,将字体转换成 VML,将生成的 .js 文件包含到网页即可。
7. 调试与记录
Blackbird
人们经常使用 Alert() 调试 JavaScript 程序,Blackbird 提供了一个漂亮的控制台记录,查看,过滤程序的运行。
Blackbird

NitobiBug
基于浏览器的跨浏览器 javaScript 对象记录与检查工具。
NitobiBug

Firebug Lite
目前最好的 JavaScript 调试工具非 Firebug 莫属,然而该工具只支持 FireFox,将 Firebug Lite .js 文件插入你的网页,就可以在所有浏览器都实现 FireBug 功能。
Firebug Lite
8. 其它
swfobject
这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代码,并探测用户播放器版本。如果用户版本不支持,会显示备用内容。
swfobject

sorttabledragtable
不管你喜欢与否,table 仍然是最好的表现数据的方式,但可以更好地利用。sorttable 可以让表格数据排序,只需在 table 上加一个 class=”sortable” 标志,还可以排除指定的栏。dragtable 让表格的栏可以拖动,在表格上加上 class=”dragable” 标志即可,这两个类可以结合起来使用,只需加上 class=”sortable dragtable” 即可。

DD_roundiesDD_belatedPNG
DD_roundies 可以不依赖图片实现圆角功能,只面向 IE, 通过 VML 实现,其它浏览器会被略过,因为那些浏览器本身支持 CSS 圆角。
JavaScript Rounded Corners
DD_belatedPNG 是为了解决 IE6 对 PNG 支持不好问题而开发的,不管 PNG 图片用于 src 还是 background-image,DD_belatedPNG 都能提供修补。

Custom JavaScript Dialog Boxes
一个只有 4.5K 的轻量 JavaScript 库,可以创建用户定制对话框,可显示4种类型的消息框,alerts, warnings, prompts, success。可以设定消息框标题,内容,以及过多长时间显示。
Custom Dialog Boxes

GameJS
GameJS 是微软的 XNA 游戏框架在 JavaScript 上的移植,使用 canvas 对象作为输出设备。JavaScript 不是最佳游戏平台,但对那些帧率较低的游戏也没有问题。

GameJS

Shortcuts.js
从 Google Reader 和 Gmail 开始,Web 程序中的快捷键开始流行起来。Shorcuts.js 让快捷键的处理变得简单。

Mapstraction
有不少地图提供商都提供不同 API,如果你要更换提供商,比如从 Google Maps 到 MapQuest,需要更新代码,Mapstraction 提供了常用地图提供商的 API,只需该一行代码就能完成转换。
Mapstraction

Amberjack
一个只有 4K 的微型 JavaScript 库,可以为你的网站添加漂亮的教程功能,一个模式窗口会以教程的形式显示任意内容,教程中的步骤可以通过手工编码实现或在线自动生成。可以使用主题或 CSS 控制内容的格式。
Amberjack

JsLoad
JsLoad 可以从 Google server 远程加载各种 JavaScript 库,可以自动加载各种版本的支撑库。

本文国际来源:http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源:COMSHARP CMS 官方网站

Page 1 of 11