Javascript | Don't Panic

[坑待填]利用jquery实现的各种效果

七月 23rd, 2009 | Posted by Daniel in 术业 - (0 Comments)

记录一下项目里利用jquery实现过的效果具体的例子和代码待有空慢慢填坑..

CakePHP 首页那样的horizontal slider效果, 可以做到利用<a> link tag或者<img> tag点击控制左右slide
多级菜单的选中/切换显示, 根据url来进行分类判断, 与菜单的class相结合
Flickr-like的title change修改标题动作, 点击title变成一个<input>输入, 修改文字后选择保存/取消, 用AJAX提交修改, 更新title
利用facebox插件实现的各种popup window, 重点在于对页面DOM的操作, 将页面内隐藏的div clone出来之后的DOM操作比较诡异..
利用tablesorter和tablesorter.pager插件实现的表格分页/排序
利用validate插件实现的表单输入验证

Jquery的确是一个非常强大又非常容易上手的javascript框架…

六月 22nd, 2009 | Posted by Daniel in 术业 - (0 Comments)

记录一下还是挺多的

jquery上手非常容易 learning curve很低我们用了好几个现成的插件开发效率非常快

弹出窗口:

facebox ( http://famspam.com/facebox ) 这是一个模拟facebox弹出窗口效果的modal window plugin

支持弹出图片, 隐藏的div 以及ajax调用, 创建也非常简单在<a>标签里加上rel=facebox 然后创建facebox()即可

Form相关:

jQuery Form plugin ( http://malsup.com/jquery/form/ ) 将form变为ajax提交在当前页面反馈处理结果

Form Validation ( http://malsup.com/jquery/form/ ) 用来验证form的输入提示必须输入的项

此外还可以调用ajax来验证输入是否有效比如用户名是否已被注册

表格相关:

Tablesorter ( http://tablesorter.com/docs/ ) 利用javascript来做表格排序属于client-side sorting 避免多次对服务器的请求(server-side sorting 往往需要向服务器发送多次请求)

Tablesorter pager ( http://tablesorter.com/docs/#Download ) 配合tablesorter进行分页的插件很实用

美人吟