`
friendsys
  • 浏览: 347767 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

常用的jQuery插件

阅读更多
本文摘自锋利的jQuery

一:jquery.validate 表单验证插件

1:可以从官网下载该插件,目前为1.55版,使用是需要加载对应的js文件
  <script type="text/javascript" src="jquery.validate.js"></script>

2:在ready后,需要使用$("form").validate() 选择需要进行验证的form表单

3:在对于的表单元素上,使用class指定不同的验证类型.
  如class="email required",分别代表:email格式,不能为空,还可以使用其他的url,或者使用minlength="2"指定长度

只要用户在输入时,就会自动提示,而不需要等待点击按钮(似乎第一次需要)

常用的验证写在 class属性,与minlength属性中,也可以使用jquery.metadata.js 进行整合使用,将所有的约束,写在
class属性中

1: 使用<script>加载对于的jquery.metadata.js文件,
2: 变更验证方法为$("#form").validate({meta:"validate"});
3: 将所有的验证信息写入到class中 如:class="{validate:{required:true,minlength:2}}"

第三种提供验证的方法,使用name属性,而不使用html的class属性

1:在$("#form").validate()方法中,通过参数传入验证规则(json形式)
2:通过name属性,匹配不同的规则
3:定义具体的规则,根据name建立Json格式

如:<input name="email" />
   $("#form").validate({rules:{
    email:{  //复杂的结构
required:true,
email:true,
minlength:2
}
    url:"url"  //可以使用简单的方式
}})

验证信息的本地化
需要导入对于的语言信息验证库,如中文的message_cn.js

也可以在上述的方法中,添加messages属性的key,使用json的形式,设置不同验证条件下的错误提示
class="{validate:{required:true,minlength:2,messages:{required:'不能为空啊啊啊',minlength:'太短咯'}}}"

自定义错误信息验证类型,并美化
例子并不明确,只能看到也是JSON的形式,声明错误类型,并且使用样式和function关联,进行错误信息的管理..
包括errorElement,success等key

自定义验证规则

1:添加自定义的验证方法到$.validator对象中
如: $.validator.addMethod(
"formula", //验证方法名
function(value,element,param){ //验证规则
return value==eval(param)
})
2:按照上述的验证方法,添加对应的验证条件
valcode:{formula:"7+9"}  //valcode为form元素名,formula为上述定义的验证方法名,"7+9"为传入的param

二: 表单插件--Form,用于为表单提供直接的Ajax能力,在validatior插件的下载包中也提供.

使用的简单方式为
$("#form").ajaxForm(function(){....}) 其中的function为成功提交后的回调函数

核心方法包括ajaxForm()与ajaxSubmit(),使用的方法类似

两个方法都接受一个参数,(function)作为提交后的回调函数或者(options)对象,提供更多的功能

定义options对象的例子(JSON对象)
var options = {target:"#output1",  //将服务端返回的内容放入该ID的元素中
beforeSubmit:showRequest, //提交前的回调函数
success:   showResponse, //提交后的回调函数
url:url, //默认为form的action,如果声明,则会覆盖
type:type, //默认是form的method,可覆盖
dataType:null, //'xml','script',or 'json' 服务端返回的数据类型
clearForm:true, //表示提交成功后清空form
resetForm:true, //提交成功后重置form
timeout:3000 //超时的毫秒数
}

提交前的回调函数,包含三个参数,表单数据(数组),jQuery类型的form对象,options参数(包含默认值)

提交后的回调函数,包括两个参数,返回的内容,返回的状态
其中,根据不同的数据类型,返回的结果需要进行不同的解析方式,包括HTML JSON 以及XML
HTML--直接使用,为XMLHttpRequest对象的responseText属性
XML--为XMLHttpRequest对象的responseXML属性,需要以XML进行解析
var name = $('name',responseXML).text(); 
JSON --直接使用对象.属性就可以进行访问

对于表单的提交前验证, 可以在options中的beforeSubmit中指定回调函数,如果return false来阻止提交


动态绑定事件插件---Livequery

在一般情况下,jQuery只会根据选择器,对已存在的符合条件HTML元素进行一次事件注册,而不会对后期动态变更的元素添加

事件绑定,而且重复添加事件,并不会覆盖,而是多次执行

livequery提供了动态绑定的能力,对符合选择器的元素,都会持久化进行绑定

进行添加事件的方式,和原来的有所区别

原格式: $('a').click(function(){...})
新格式: $('a').livequery('click',function(){...})


jQuery UI的使用,目前版本为1.7.2 需要jQuery1.3.X

包含了三个部分: 交互,组件(Widget),效果库
1: 交互: 拖动(drag),置放(drop),缩放(resizeable),选择(Selectable),排序(Sortable)
2: 组件...不少,当不如ExtJs丰富

简单的拖放使用: draggable(...) ...参数不同的设置,起到不同的效果
不带参数为:添加拖放能力
disable:暂时停止拖动能力
enable:重新开启拖动能力
destory:彻底移除拖动能力

这里只介绍了Sortable插件,提供了拖动排序能力的组件

添加sortable能力的方式
$("#myList").sortable({delay:1}), 在可以sortable里面添加JSON形式的参数

delay参数是为了防止拖拽与单击发生冲突,所以延时一毫秒
stop:fun.. 用于在排序后执行的回调函数

使用$(".myList").sortable("serialize")方法可以得到列表结果的参数化形式 myList[]=ss$my....


管理Cookie的插件--Cookie

写入Cookie的方式: $.cookie('key','value')
读取cookies的方法: $.cookie('key')
删除cookies的方法:$.cookie('key',null)  //就是重新覆盖为null

也可以在添加值的时候,用第三个JSON参数,来设置保存的状态
$.cookie('key','value',{
expires:7,  //有效的天数,不设置在session过期后自动删除,或浏览器关闭
path:'/', //cookies的路径属性,默认为页面路径
domain:'jquey.com', //域名属性,默认是创建该cookies的页面域名
secure:true //true表示此cookies需要https来传输
})

剩下对jQuery插件的扩展不做介绍,目前无兴趣..











分享到:
评论

相关推荐

    常用jquery插件大全

    常用的jquery插件大全 jquery-json.js jquery-validate.js jquery.js, jquery.form.js, jquery.jscrollpane.css jquery.mousewheel.js 等等

    十套常用的精美jquery插件

    本资源包含十套常用的精美jQuery插件,涵盖了多个实用场景,下面将逐一介绍。 1. **jQuery鼠标悬停图片放大突出内容显示代码** 这个插件主要用于图片展示,当用户鼠标悬停在图片上时,图片会放大并突出显示内容,...

    常用Jquery插件,有弹出框、进度条和右键菜单等

    在本文中,我们将深入探讨一些常用的Jquery插件,这些插件涵盖了弹出框、进度条、右键菜单等多个功能,极大地丰富了网页交互体验。首先,我们来逐一解析每个插件的功能和应用场景。 1. **基于cookie的右下角弹出...

    常用jquery插件

    今天我们将重点关注两个常用的jQuery插件:`jquery.validate.js`和`jquery.form.js`。 `jquery.validate.js`是用于表单验证的插件,由Jörn Zaefferer开发。这个插件提供了强大的验证规则和错误消息定制功能,帮助...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    jQuery常用插件大全pdf

    **知识点**: 易于集成到现有表单中的jQuery插件,提供自动补全功能,提高用户输入效率。 #### 4. FacebooklikeAutocomplete **知识点**: 类似于Facebook的AutoCompleter插件,基于jQuery开发,模仿社交网络的自动...

    jquery常用插件包

    这个“jquery常用插件包”包含了几个重要的jQuery插件的源代码,包括dialog对话框插件、menu菜单插件以及tabs选项卡插件,这些都是网页交互设计中常用的组件。 首先,让我们详细探讨一下jQuery库的基础知识。jQuery...

    jQuery插件开发及常用插件大全.zip

    jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf

    常能用到的jquery插件

    《常用jQuery插件详解》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将详细介绍一些常用的jQuery插件,帮助开发者更好地理解和应用这些工具...

    常用操作的jquery插件,很好用!(返回顶部、拖动......)

    很好用的常用jquery插件,有很详细的介绍

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    jQuery常用插件介绍/收集

    本文将详细介绍一些常用的jQuery插件,并探讨它们在实际项目中的应用。 1. **jQuery UI** jQuery UI 是一个官方的jQuery扩展库,提供了一整套用户界面组件,如日期选择器(DatePicker)、对话框(Dialog)、拖放...

    Jquery常用插件

    在这个"Jquery常用插件"的压缩包中,我们找到了几个关键的资源,它们分别对应于不同的jQuery插件和相关的API文档。 首先,我们看到"jQuery BlockUI Plugin (v2).htm",这是一个名为BlockUI的插件。BlockUI允许...

    很好用的Jquery插件

    本文将深入探讨“很好用的Jquery插件”,并介绍几个常用插件及其简单使用方法,这对于在项目中提升用户体验具有显著帮助。 首先,jQuery库的核心优势在于它的API设计,它提供了丰富的选择器、DOM操作、事件处理和...

    sublime2 jquery插件

    为了更好地利用jQuery插件,你还可以自定义快捷键,将常用的操作绑定到特定的键位组合上。Sublime Text 2支持自定义Key Bindings,通过编辑`Preferences -&gt; Key Bindings - User`文件,你可以根据个人习惯设置快捷键...

    常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览

    常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览 说明:压缩包分为jQuery code 1,2,3三卷。 本压缩包为卷jQuery code 2

    JQuery文档插件资料

    4. **常用jQuery插件** - **Bootstrap**: 基于jQuery的前端框架,提供响应式布局和丰富的组件,如模态框、下拉菜单、导航条等。 - **jQuery UI**: 提供各种用户界面组件,如拖放、排序、日期选择器等。 - **...

    Jquery和jquery的常用插件

    **jQuery和jQuery插件详解** jQuery是一个高效、简洁且易用的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画设计和Ajax交互变得更加简单。jQuery的核心特性包括选择器(用于快速...

    我开发中常用的jquery插件

    本压缩包包含了我在erp开发中常用的一些插件uploadify,zoom,z-tree,popup,shade,tabletree,时间控件。里面包含有简单的demo,对于较复杂的有开发文档,比如z-tree

    78个个常用的jquery 插件 jquer插件

    这个压缩包包含了78个常用的jQuery插件,其中28个是个人收集的,这些插件能帮助开发者在网站开发中实现各种功能,提高效率并提升用户体验。 1. **导航和菜单插件**:jQuery提供了丰富的导航和菜单插件,如jQuery UI...

Global site tag (gtag.js) - Google Analytics