RIA应用开发：9-jQuery表单插件

1、jQuery表单插件回顾插件的种类插件的创建插件的使用学习目标了解jQuery表单的常用插件掌握jQuery UI datepicker（日历插件）的使用掌握jQuery validation（表单验证插件）的使用jQuery UI jQuery UI是构建与jQuery之上的一套用户界面开发库。下载地址：/jQuery UI DatepickerjQuery UI 日期选择器部件是一个可高度配置的插件，用于在网页上添加日期选择功能，方便用户输入日期类型的数据。默认情况下，获得焦点时日期选择部件在一个小的覆盖层中打开日历，失去焦点或选择一个日期时将自动关闭该日历。jQuery UI Datep

2、icker例1：使用datepicker插件，生成日期选择器选取日期。请输入日期: $(function() $( #datepicker ).datepicker(););jQuery UI Datepicker日期的格式jQuery UI Datepicker日期的格式：DateFormat 例2： /根据属性值设置创建datepicker $( #datepicker ).datepicker(dateFormat:yy-mm-dd ); /创建datepicker $( #datepicker ).datepicker(); /设置属性值，不创建datepicker $( #datep

3、icker ).datepicker( option, dateFormat, yy-mm-dd);jQuery UI Datepicker日历的汉化(jquery.ui.datepicker-zh-CN.js)jQuery UI Datepicker可以选择的年份和月份changeMonth： 默认值为false 设置为true，允许通过下拉列表框来更改月份changeYear： 默认值为false 设置为true，允许通过下拉列表框来更改年份jQuery UI Datepicker例3：使用datepicker插件，生成日期选择器。可以通过下拉列表框选取年份和月份。$( #datepick

4、er ).datepicker(changeMonth: true,changeYear: true);jQuery UI DatepickerbuttonImage：指定弹出按钮的图像的URL。buttonImageOnly:若设置为true，则将一个图像做为触发器 放置在字段后面，该图像并不在按钮上显示。showOn：设置触发日期选择器自动出现的事件名称。 focus、button、both$( #datepicker ).datepicker(showOn: button,buttonImage: calendar.gif,buttonImageOnly: true);jQuery UI

5、 对话框组件（dialog）拖动组件（draggable）投放组件（droppable）缩放组件（Resizable）排序组件（Sortable）按钮部件（button）折叠面板部件（accordion）选项卡部件（tabs）自动完成部件（autocomplete）进度条部件（progress bar）滑块部件（slider）特效方法（effects）jQuery ValidationjQuery Validation是jQuery提供的一个优秀的表单验证插件。做为一个标准的验证方法库，validation拥有如下特点：jQuery Validation /project/validatejQ

6、uery Validation默认校验规则jQuery Validation默认的提示jQuery Validation例1:$(#commentForm).validate();jQuery Validation可以将所有的与验证相关的信息写到css属性中(例2)。引入一个新的jQuery插件jquery.metadata.js。改变调用方式将验证规则写到class属性中jQuery Validation通过name属性来关联字段和验证规则的验证写法，实现行为与结构的分离(例3)。jQuery ValidationValidation插件的验证信息默认语言为英文，如果要改成中文，需要引入validation提供的中文信息库。jQuery Validation自定义验证信息(例4)Validation插件可以很方便地自定义验证规则，用来代替千篇一律的默认验证信息。jQuery Validation自定义验证信息并美化(例5)errorElement：String Default: “label” 用什么标签标记错误，默认的是label，可以改成em jQuery Validationsuccess：String, Callback