注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

jq 插件  

2012-07-10 10:10:32|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、表单插件(form plugin)

     文件:jquery.form.js

    1)fieldValue()  获取元素的表单值,返回数组。

        例:$("#myform").fieldValue();

       可用过滤选择器获取 如:$("#myform :radio").fieldValue();


  2) 格式化表单数据

    formSerialize()  整个表单数据

   fieldSerialize()  特定元素数据的格式化


  3)清楚和重置表单数据

   clearForm()   清空表单中的数据

   resetForm()    重置表单中的数据

  4)按ajax方式提交表单

   ajaxSubmit(options)

  ajaxForm(options)  通常在页面加载完成时执行,使用传统Submit按钮 进行ajax提交

  两者区别是:后者除了上传一般表单数据,还上传<input type="image" /> 的坐标信息,及提交按钮的相关信息,并会把submit()事件绑定到form元素上。


2、UI插件

    http://ui.jquery.com/ 中可下载到所有的ui插件。主要包括鼠标交互插件、用户界面插件及特效插件等。

1)鼠标拖拽

    js: jquery.ui/jquery-1.2.4a.js     jquery.ui/ui/base.min.js     jquery.ui/ui.draggable.min.js

   方法:draggable()。

  可接受参数:

   helper: 被拖拽对象,默认为original,即运行方法的选择器。如设置为clone,则以复制形式拖拽。

  handle:触发拖拽的对象,通常为块中一个子元素。

  dragPrevention:子元素中不会触发拖拽的元素。

  start:当拖拽启动时的回调函数,2参数,1个事event事件,其target属性指代被拖拽的元素,第2个参数为拖拽相关对象。

 stop:当拖拽结束时的回调函数,参数同start

 drag:在拖拽过程中实时运行的函数,参数同start。

axis:控制拖拽的方向,可为“x”或“y”。

containment:限制拖拽的区域,可为"parent",“document”,指定的元素,指定的坐标。

grid:每次对象移动的步长,例如:grid:[100,80]水平方向每次移动100像素,竖直方向为80

opacity:拖拽过程中对象的透明度。

revert:如为true,则对象在拖拽结束后会自动返回原处,默认为false。

 

实例:

$("div:eq(1)").draggable({axis:"x"});

注:可通过draggable("disable") 和draggable("enable")分别来阻止和允许对象被拖拽。

 

2)拖入购物车

  js:除了上面的3个还有 jquery.ui/ui.droppable.min.js

方法:droppable()

可接受参数:

accept: 如是字符串表示允许接收的jq选择器,如是函数则对页面中所有draggable()对象执行,返回true者可以接收。

activeClass:当可接收对象被拖拽时,容器的css样式风格。

hoverClass:当可接收对象进入容器时,容器的样式风格

tolerance:定义拖拽到什么状态算是进入该容器,可选的有"fit"、"intersect"、"pointer"和"touch"

active:当可接收对象开始被拖拽时,调用的函数。

deactive:当可接收对象不再被拖拽时,调用的函数。

over:当可接收对象被拖拽到容器上方时,调用的函数。

out:当可接收对象被拖拽出容器时,调用的函数。

drop:当可接收对象被拖拽真正进入容器时,调用函数。


实例:

$("#dropbtn").droppable({

  accept:function(draggable){

return $(draggable).hasClass("green");

},

drop:function(){

$(this).append($("<div></div>").html("drop!"));

}

})

  评论这张
 
阅读(267)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017