在ASPNET中使用jQuery
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第8章 在中使 用jquery
第8章 在中使用jQuery
8.1 jQuery UI及其基本操作 8.2 联合使用 AJAX和jQuery UI 8.3 jQuery代码和C#代码之间的数据交互 8.4 利用jQuery Validate实现客户端数据验证
步回送的结果。
6.在异步处理过程中可以使用的方法
prm.get_isInAsyncPostBack()：判断是否为异步回送。 prm.abortPostBack()：取消正在执行的异步回送。
8.2.2 拉帘式折叠面板（accordion）
jQuery UI的拉帘式折叠面板的效果就像拉帘式窗帘一样，可以全部折叠所有项，也 可以展开其中的某一项。
disable：禁用元素的拖拽功能。用法：.datepicker( 'disable' ); enable：启用元素的拖拽功能。用法：.datepicker( 'enable' ); option：获取或设置元素的参数。用法：.datepicker( 'option' ,
optionName , [value] );
8.2.3 自动完成（autocomplete）
当在文本框中输入一些文字内容时，利用jQuery UI的 autocomplete实现自动完成选项提示，能让用户快速选择键入 的内容。
【例8-7】演示在 AJAX中实现自动完成功能的基本 用法。
8.2.4 按钮（button）
jQuery UI的button的作用是将指定的元素显示为按钮样式。 常用有两种方法：
8.1.6 排序（sortable）
jQuery UI提供的sortable方法用于对元素排序。 将selectable和sortable结合起来，能通过鼠标拖放动态设置
元素的顺序。 【例8-5】演示sortable的基本用法。
8.2 联合使用 AJAX和jQuery UI
AJAX为基于服务器的ajax开发提供了方便的开发架 构，jQuery UI则为客户端界面提供了方便的设计手段。联合使 用这两种技术，能使Web开发的效率如虎添翼。
常用选项
maxDate : Date、Number、String，默认为null。
功能：设置一个最大的可选日期。可以是Date对象，或者是数字（ 从今天算起，例如+7），或者有效的字符串（'y'代表年, 'm'代表月, 'w'代表周, 'd'代表日，例如：'+1m +7d'）。
minDate : Date、Number、String，默认为null
function(event, ui) {...});
2. change事件
事件类型：accordionchange，当更改accordion时触发。如果 有动画，则动画完成后触发，否则立即触发。
8.2.2 拉帘式折叠面板（accordion）
【例8-6】演示在UpdatePanel内利用accordion实现折叠面板 的基本用法，单击左侧accordion内的按钮时，在右侧用动画 表示异步提交和更新的过程。
多语言支持
多语言支持实际上就是本地化（Localization）设置。 如果不做本地化处理，jQuery默认使用英文。 本书用的日期中文语言包插件见jquery.ui.datepicker-cn.js。
在 AJAX的Web窗体页面的生命周期中，客户端第1 次加载页面时，将首先触发PageRequestManager对象的 pageLoaded事件，以后每次异步请求和回发都会依次触发下 面的事件：initializeRequest事件、beginRequest事件、 pageLoading事件、pageLoaded事件、endRequest事件。
1. initializeRequest事件
该事件在异步请求的回送被初始化之前触发。
2. beginRequest事件
该事件在异步请求初始化完成后、向服务器提交请求之前触发。
8.2.1 PageRequestManager类
3. pageLoading事件
该事件在异步请求已经被服务器接收并响应，但还没有对页面进 行任何更新之前触发。
8.2.1 PageRequestManager类
PageRequestManager类在客户端架构的 Sys.WebForms命名空间下，该类提供了异步发送和回传的客 户端事件，利用这些事件，就可以在 AJAX中同时使 用服务器控件、HTML元素以及jQuery UI，而且也能快速实现 页面局部更新的效果。
要使用这些客户端事件、属性和方法，首先需要利用客户端脚 本获取 AJAX自动生成的PageRequestManager对 象：
var prm = Sys.WebForms.PageRequestManager.getInstance();
8.2.1 PageRequestManager类
4. pageLoaded事件
该事件在异步回送完成而且页面区域被更新之后触发。 在这个事件中，我们可以利用jQuery UI处理HTML元素和服务器
控件对象。
8.2.1 PageRequestManager类
5. endRequest事件
该事件在异步请求和回送处理完毕后触发。 一般在该事件中结束动画告知用户异步请求处理完毕。 在客户端脚本中，还可以利用endRequest事件的arg参数处理异
jQuery UI提供的resizable方法用于改变元素的宽和高，既可 以分别改变宽和高的值，也可以按比例改变宽和高的值。
利用resizable缩放某个子窗口非常方便。 【例8-3】演示resizable的基本用法。
8.1.5 选择（selectable）
jQuery UI提供的selectable方法一般用于选择一个或多个选项 【例8-4】演示selectable的基本用法。
用jQuery UI构造accordion构件时，每一项的标题块用h标记来实现，标题块内的 标题用a标记实现；对应项的内容用div来实现。定义HTML后，调用accordion()方 法即可。 <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> <script> $("#accordion").accordion(); </script>
选项的值。
例如： //获取disabled选项的值 var disabled = $( ".selector" ).accordion( "option", "disabled"
); //设置disabled选项的值 $( ".selector" ).accordion( "option", "disabled", true );
1．方法（method）
每个jQuery UI都提供了一些方法，这些方法一般用于对选项（ option）进行操作。
基本格式为：$(selector).方法名(参数);
2．初始化选项（option）
每个jQuery UI方法中都提供了很多选项（option），通过jQuery 提供的方法初始化UI对象时，可以在方法的参数中同时初始化选 项的值。
$(selector).button(); //将选择器选择的元素作为按钮样式 $(selector).buttonset(); //将选择器选择的元素作为按钮选项
【例8-8】演示按钮的基本用法。
8.2.5 日期选择（datepicker）
jQuery UI的日期选择用于显示一个日历，然后让用户从中选 择年、月、日，选择的内容将自动添加到文本框中。
9.1.2 拖动（draggable）
jQuery UI提供的draggable方法用于控制块级元素的鼠标拖动 ，被拖动的元素一般用div来实现。
下面的代码说明了draggable的基本用法： <div id="div1" style="width: 100px; height: 50px;
background: silver;">可拖放</div> …… $("#div1").draggable();
功能：设置一个最小的可选日期。用法与maxDate相似。
numberOfMonths : Number、Array，默认为1。
功能：设置一次要显示多少个月份。
8.2.5 日期选择（datepicker）
常用方法
destory：从元素中移除拖拽功能。用法：.datepicker( 'destroy' );
基本格式为：.方法名({选项名1:值1, 选项名2:值2, ……, 选项名n: 值n})
参数中每个选项（option）由optionName和value组成
8.1.1 jQuery UI的选项和方法
3．获取或设置选项的值
利用初始化方法创建jQuery对象以后，即可获取或设置这些选项 的值。
基本格式为： $(selector).方法("option",optionName,[value]) 不带value参数时，表示获取选项的值，带value参数时表示设置
为设置optionName选项的值为value。
$(“#accordion”).accordion(“option”,“disable”); //禁用折叠
3. accordion(optionName)
该方法用于执行选项名指定的功能，参数optionName表示选项 名。
8.2.2 拉帘式折叠面板（accordion）
常用事件 1. create事件
事件类型：accordioncreate，当创建可折叠面板时触发。例如 初始化：$( ".selector" ).accordion({create: function(event,
ui) { ... }}); 绑定创建事件：$( ".selector" ).bind( "accordioncreate",
下载时，jQuery UI提供了不同的主题（Themes）供开发人员 选择和定制。
也可以从微软的CDN免费下载或引用jQuery UI，该网站同时提 供了针对VS2010的jQuery智能提示，并给出了在中使 用jQuery UI的基本用法。
2020年9月9日星期三
3
8.1.1 jQuery UI的选项和方法
【例8-1】演示利用jQuery UI实现鼠标拖动的基本用法。
8.1.3 拖放（Droppable）
jQuery UI提供的droppable方法用于控制将拖放元素放置到拖 放目标区域内的行为，它和draggable的用法相似。
【例8-2】演示用鼠标拖放某个元素到另一个目标元素的基本 用法。
8.1.4 改变元素大小（resizable）
jQuery UI提供的界面互动构件（widget）实现了对块级元素 的界面互动功能，这里的构件是指由多个HTML元素构成的UI 组件，也包括 Web服务器控件。
最理想的办法就是将 AJAX和jQuery结合起来，这样 可以同时集成两种架构的优点，既能快速解决服务器和客户端 开发中遇到的难题，又能大大简化设计的难度，既缩短了项目 开发周期，也保证了程序的健壮性。
2020年9月9日星期三
2
8.1 jQuery UI及其基本操作
jQuery UI是一套专门用于界面交互的JavaScript库，开发人 员利用它可以非常方便地控制页面的互动效果，快速在客户端 开发出风格一致的Web界面。
下载jQuery UI的方式很简单，从jQuery的官方网站直接免费下 载即可。
8.2.2 拉帘式折叠面板（accordion）
常用方法 1. accordion({options})
该方法用于初始化一个或多个选项，每个选项的选项名和选项值 之间用冒号分隔，多个选项之间用逗号分隔。
2. accordion( "option" , optionName , [value] )
该方法用于获取或设置指定的选项。 不指定value值时为获取optionName选项的值，指定value值时
第8章 在中使用jQuery
8.1 jQuery UI及其基本操作 8.2 联合使用 AJAX和jQuery UI 8.3 jQuery代码和C#代码之间的数据交互 8.4 利用jQuery Validate实现客户端数据验证
步回送的结果。
6.在异步处理过程中可以使用的方法
prm.get_isInAsyncPostBack()：判断是否为异步回送。 prm.abortPostBack()：取消正在执行的异步回送。
8.2.2 拉帘式折叠面板（accordion）
jQuery UI的拉帘式折叠面板的效果就像拉帘式窗帘一样，可以全部折叠所有项，也 可以展开其中的某一项。
disable：禁用元素的拖拽功能。用法：.datepicker( 'disable' ); enable：启用元素的拖拽功能。用法：.datepicker( 'enable' ); option：获取或设置元素的参数。用法：.datepicker( 'option' ,
optionName , [value] );
8.2.3 自动完成（autocomplete）
当在文本框中输入一些文字内容时，利用jQuery UI的 autocomplete实现自动完成选项提示，能让用户快速选择键入 的内容。
【例8-7】演示在 AJAX中实现自动完成功能的基本 用法。
8.2.4 按钮（button）
jQuery UI的button的作用是将指定的元素显示为按钮样式。 常用有两种方法：
8.1.6 排序（sortable）
jQuery UI提供的sortable方法用于对元素排序。 将selectable和sortable结合起来，能通过鼠标拖放动态设置
元素的顺序。 【例8-5】演示sortable的基本用法。
8.2 联合使用 AJAX和jQuery UI
AJAX为基于服务器的ajax开发提供了方便的开发架 构，jQuery UI则为客户端界面提供了方便的设计手段。联合使 用这两种技术，能使Web开发的效率如虎添翼。
常用选项
maxDate : Date、Number、String，默认为null。
功能：设置一个最大的可选日期。可以是Date对象，或者是数字（ 从今天算起，例如+7），或者有效的字符串（'y'代表年, 'm'代表月, 'w'代表周, 'd'代表日，例如：'+1m +7d'）。
minDate : Date、Number、String，默认为null
function(event, ui) {...});
2. change事件
事件类型：accordionchange，当更改accordion时触发。如果 有动画，则动画完成后触发，否则立即触发。
8.2.2 拉帘式折叠面板（accordion）
【例8-6】演示在UpdatePanel内利用accordion实现折叠面板 的基本用法，单击左侧accordion内的按钮时，在右侧用动画 表示异步提交和更新的过程。
多语言支持
多语言支持实际上就是本地化（Localization）设置。 如果不做本地化处理，jQuery默认使用英文。 本书用的日期中文语言包插件见jquery.ui.datepicker-cn.js。
在 AJAX的Web窗体页面的生命周期中，客户端第1 次加载页面时，将首先触发PageRequestManager对象的 pageLoaded事件，以后每次异步请求和回发都会依次触发下 面的事件：initializeRequest事件、beginRequest事件、 pageLoading事件、pageLoaded事件、endRequest事件。
1. initializeRequest事件
该事件在异步请求的回送被初始化之前触发。
2. beginRequest事件
该事件在异步请求初始化完成后、向服务器提交请求之前触发。
8.2.1 PageRequestManager类
3. pageLoading事件
该事件在异步请求已经被服务器接收并响应，但还没有对页面进 行任何更新之前触发。
8.2.1 PageRequestManager类
PageRequestManager类在客户端架构的 Sys.WebForms命名空间下，该类提供了异步发送和回传的客 户端事件，利用这些事件，就可以在 AJAX中同时使 用服务器控件、HTML元素以及jQuery UI，而且也能快速实现 页面局部更新的效果。
要使用这些客户端事件、属性和方法，首先需要利用客户端脚 本获取 AJAX自动生成的PageRequestManager对 象：
var prm = Sys.WebForms.PageRequestManager.getInstance();
8.2.1 PageRequestManager类
4. pageLoaded事件
该事件在异步回送完成而且页面区域被更新之后触发。 在这个事件中，我们可以利用jQuery UI处理HTML元素和服务器
控件对象。
8.2.1 PageRequestManager类
5. endRequest事件
该事件在异步请求和回送处理完毕后触发。 一般在该事件中结束动画告知用户异步请求处理完毕。 在客户端脚本中，还可以利用endRequest事件的arg参数处理异
jQuery UI提供的resizable方法用于改变元素的宽和高，既可 以分别改变宽和高的值，也可以按比例改变宽和高的值。
利用resizable缩放某个子窗口非常方便。 【例8-3】演示resizable的基本用法。
8.1.5 选择（selectable）
jQuery UI提供的selectable方法一般用于选择一个或多个选项 【例8-4】演示selectable的基本用法。
用jQuery UI构造accordion构件时，每一项的标题块用h标记来实现，标题块内的 标题用a标记实现；对应项的内容用div来实现。定义HTML后，调用accordion()方 法即可。 <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> <script> $("#accordion").accordion(); </script>
选项的值。
例如： //获取disabled选项的值 var disabled = $( ".selector" ).accordion( "option", "disabled"
); //设置disabled选项的值 $( ".selector" ).accordion( "option", "disabled", true );
1．方法（method）
每个jQuery UI都提供了一些方法，这些方法一般用于对选项（ option）进行操作。
基本格式为：$(selector).方法名(参数);
2．初始化选项（option）
每个jQuery UI方法中都提供了很多选项（option），通过jQuery 提供的方法初始化UI对象时，可以在方法的参数中同时初始化选 项的值。
$(selector).button(); //将选择器选择的元素作为按钮样式 $(selector).buttonset(); //将选择器选择的元素作为按钮选项
【例8-8】演示按钮的基本用法。
8.2.5 日期选择（datepicker）
jQuery UI的日期选择用于显示一个日历，然后让用户从中选 择年、月、日，选择的内容将自动添加到文本框中。
9.1.2 拖动（draggable）
jQuery UI提供的draggable方法用于控制块级元素的鼠标拖动 ，被拖动的元素一般用div来实现。
下面的代码说明了draggable的基本用法： <div id="div1" style="width: 100px; height: 50px;
background: silver;">可拖放</div> …… $("#div1").draggable();
功能：设置一个最小的可选日期。用法与maxDate相似。
numberOfMonths : Number、Array，默认为1。
功能：设置一次要显示多少个月份。
8.2.5 日期选择（datepicker）
常用方法
destory：从元素中移除拖拽功能。用法：.datepicker( 'destroy' );
基本格式为：.方法名({选项名1:值1, 选项名2:值2, ……, 选项名n: 值n})
参数中每个选项（option）由optionName和value组成
8.1.1 jQuery UI的选项和方法
3．获取或设置选项的值
利用初始化方法创建jQuery对象以后，即可获取或设置这些选项 的值。
基本格式为： $(selector).方法("option",optionName,[value]) 不带value参数时，表示获取选项的值，带value参数时表示设置
为设置optionName选项的值为value。
$(“#accordion”).accordion(“option”,“disable”); //禁用折叠
3. accordion(optionName)
该方法用于执行选项名指定的功能，参数optionName表示选项 名。
8.2.2 拉帘式折叠面板（accordion）
常用事件 1. create事件
事件类型：accordioncreate，当创建可折叠面板时触发。例如 初始化：$( ".selector" ).accordion({create: function(event,
ui) { ... }}); 绑定创建事件：$( ".selector" ).bind( "accordioncreate",
下载时，jQuery UI提供了不同的主题（Themes）供开发人员 选择和定制。
也可以从微软的CDN免费下载或引用jQuery UI，该网站同时提 供了针对VS2010的jQuery智能提示，并给出了在中使 用jQuery UI的基本用法。
2020年9月9日星期三
3
8.1.1 jQuery UI的选项和方法
【例8-1】演示利用jQuery UI实现鼠标拖动的基本用法。
8.1.3 拖放（Droppable）
jQuery UI提供的droppable方法用于控制将拖放元素放置到拖 放目标区域内的行为，它和draggable的用法相似。
【例8-2】演示用鼠标拖放某个元素到另一个目标元素的基本 用法。
8.1.4 改变元素大小（resizable）
jQuery UI提供的界面互动构件（widget）实现了对块级元素 的界面互动功能，这里的构件是指由多个HTML元素构成的UI 组件，也包括 Web服务器控件。
最理想的办法就是将 AJAX和jQuery结合起来，这样 可以同时集成两种架构的优点，既能快速解决服务器和客户端 开发中遇到的难题，又能大大简化设计的难度，既缩短了项目 开发周期，也保证了程序的健壮性。
2020年9月9日星期三
2
8.1 jQuery UI及其基本操作
jQuery UI是一套专门用于界面交互的JavaScript库，开发人 员利用它可以非常方便地控制页面的互动效果，快速在客户端 开发出风格一致的Web界面。
下载jQuery UI的方式很简单，从jQuery的官方网站直接免费下 载即可。
8.2.2 拉帘式折叠面板（accordion）
常用方法 1. accordion({options})
该方法用于初始化一个或多个选项，每个选项的选项名和选项值 之间用冒号分隔，多个选项之间用逗号分隔。
2. accordion( "option" , optionName , [value] )
该方法用于获取或设置指定的选项。 不指定value值时为获取optionName选项的值，指定value值时