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

jQuery表单插件 回顾 插件的种类 插件的创建 插件的使用 学习目标 了解jQuery表单的常用插件 掌握jQuery UI datepicker（日历插件）的使用 掌握jQuery validation（表单验证插件）的使用 jQuery UI jQuery UI是构建与jQuery之上的一套用户界面开发库。下载地址：/ jQuery UI Datepicker jQuery UI 日期选择器部件是一个可高度配置的插件，用于在网页上添加日期选择功能，方便用户输入日期类型的数据。 默认情况下，获得焦点时日期选择部件在一个小的覆盖层中打开日历，失去焦点或选择一个日期时将自动关闭该日历。 jQuery UI Datepicker 例1：使用datepicker插件，生成日期选择器选取日期。 jQuery UI Datepicker 日期的格式 jQuery UI Datepicker 日期的格式：DateFormat 例2： //根据属性值设置创建datepicker $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd"} ); //创建datepicker $( "#datepicker" ).datepicker(); //设置属性值，不创建datepicker $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd"); jQuery UI Datepicker 日历的汉化(jquery.ui.datepicker-zh-CN.js) <script src="jquery.ui.datepicker-zh-CN.js"></script> jQuery UI Datepicker 可以选择的年份和月份 changeMonth： 默认值为false 设置为true，允许通过下拉列表框来更改月份 changeYear： 默认值为false 设置为true，允许通过下拉列表框来更改年份 jQuery UI Datepicker 例3：使用datepicker插件，生成日期选择器。可以通过下拉列表框选取年份和月份。 jQuery UI Datepicker buttonImage：指定弹出按钮的图像的URL。 buttonImageOnly:若设置为true，则将一个图像做为触发器 放置在字段后面，该图像并不在按钮上显示。 showOn：设置触发日期选择器自动出现的事件名称。 focus、button、both jQuery UI 对话框组件（dialog） 拖动组件（draggable） 投放组件（droppable） 缩放组件（Resizable） 排序组件（Sortable） 按钮部件（button） 折叠面板部件（accordion） 选项卡部件（tabs） 自动完成部件（autocomplete） 进度条部件（progress bar） 滑块部件（slider） 特效方法（effects） jQuery Validation jQuery Validation是jQuery提供的一个优秀的表单验证插件。做为一个标准的验证方法库，validation拥有如下特点： jQuery Validation /project/validate jQuery Validation 默认校验规则 jQuery Validation 默认的提示 jQuery Validation 例1: jQuery Validation 可以将所有的与验证相关的信息写到css属性中(例2)。 引入一个新的jQuery插件——jquery.metadata.js。 改变调用方式 将验证规则写到class属性中 jQuery Validation 通过name属性来关联字段和验证规则的验证写法，实现行为与结构的分离(例3)。 jQuery Validation Validation插件的验证信息默认语言为英文，如果要改成中文，需要引入validation提供的中文信息库。 jQuery Validation 自定义验证信息(例4) Validation插件可以很方便地自定义验证规则，用来代替千篇一律的默认验证信息。 jQuery Validation 自定义验证信息并美化(例5) errorElement：String Default: “label” 用什么标签标记错误，默认的是label，可