jQuery框架和AJAX技术第七章.ppt

选项卡部件 tabs([options]) 属性 类型 默认值 说明 ajaxOptions Options null 设置加载选项卡内容时的AJAX选项。参阅$.ajax cache Boolean false 设置是否对远程选项卡内容进行缓存 collapsible Boolean false 若设置为true，则允许将已选定的选项卡折叠起来 cookie Object null 将最后选定的选项卡保存到cookie中。需要使用cookie插件 disabled ArrayNumber [] 包含选项卡位置（从0开始的索引）的数组，用于设置初始化时禁用哪些选项卡 event String click 指定选择选项卡时使用的事件类型，例如可以设置为mouseover idPrefix String ui-tabs- 指定AJAX远程选项卡的id属性前缀（锚元素无title属性时） selected Number 0 指定初始化时选定的选项卡的索引。若设置为-1，则所有选项卡均未选定 选项卡组件相关命令一 add：添加一个新的选项卡 $(selector).tabs(add,url,label,[index]); remove：移除一个选项卡，其中参数index指定要移除的选项卡的索引 $(selector).tabs(remove,index); enable：启用一个被禁用的选项卡 $(selector).tabs(enable,index); disable：禁用一个选项卡。 $(selector).tabs(disable,index); 选项卡组件相关命令二 select：选定一个选项卡。 $(selector).tabs(select,index); load：通过编程方式重新加载一个AJAX选项卡，即使cache属性设置为true。 $(selector).tabs(load,index); url：更改AJAX远程选项卡要加载的资源的URL。 $(selector).tabs(url,index,url); length：获取第一个匹配的选项卡面板包含的选项卡数目。 $(selector).tabs(length); 选项卡事件 select事件： 当单击一个选项卡时触发此事件。 load事件： 加载远程选项卡的内容后触发此事件。 show事件： 当显示一个选项卡时触发此事件。 add事件： 当添加一个选项卡时触发此事件。 remove事件： 当删除一个选项卡时触发此事件。 enable事件： 当启用一个选项卡时触发此事件。 disable事件： 当禁用一个选项卡时触发此事件。 创建AJAX选项卡 根据选项卡面板内容的来源，选项卡可分为普通选项卡 AJAX选项卡 前者的内容来自本页，后者的内容来自远程服务器上的文件。 创建普通选项卡时，可将a元素的href属性值设置为内容面板id值加上一个“#”前缀； 创建AJAX远程选项卡时，则应将a元素的href属性设置为要加载的文件的URL，而且不需要创建相应的内容面板元素。 总结 jQuery UI基础 jQuery交互组件 jQuery页面部件 作业 简述如何下载和使用jQuery UI插件。 简述jQuery中拖动组件的用法。 简述jQuery中投放组件的用法。 简述jQuery中日历部件的使用。 简述jQuery中对话框部件的使用。 SSOFT V2.0 第七章 jQuery UI插件 回顾 AJAX基础 AJAX简单示例 jQuery中AJAX相关工具函数 通过jQuery完成AJAX操作 jQuery中的AJAX全局函数 目标 jQuery UI基础 jQuery交互组件 jQuery页面部件 jQuery UI基础 jQuery UI是构建于jQuery之上的一套用户界面开发库 其中包括许多交互操作功能和用户界面组件 下载jQuery UI库/download 搭建环境 将jQuery UI库中的js文件夹和css文件夹复制到网站根目录下 在文档首部通过link或script标记包含所需的支持文件 script type=text/javascript src=js/jquery-1.6.2.min.js/script script type=text/javascript src=js/jquery-ui-1.8.16.custom.min.js/script link rel=stylesheet href=css/ui-lightness/jquery-ui-1.8.16.custom.css/ 拖动组件一 属性 类型 默认值 说明 axis String false 限制可拖动元素沿