jQuery UI常用功能与插件应用.pptVIP

jQuery回顾 选择器 常用操作 jQuery AJAX回顾 AJAX原理 JSON $.get $.post $.getJSON 作业 1、库存查询 要求在搜索框使用 autocomplete 能够对单号或名称进行提示 2、所有alert/confirm提示用 Ddailog 代替 3、客户信息添加使用validate 验证 4、商品分类用Sortable时行拖拉排序（附加） 课程资料 Jquery ui Jquery API Jquery UI 手册 / * * * * * * * * 软件学院CDIO课程 jQuery UI常用功能与插件应用 前端入门(5) 福建师范大学 软件学院 CDIO课程组 杨华 目录 Dialog 2 Tabs 3 Sortable 4 Autocomplete 5 jQuery UI的介绍 1 插件：Validate 6 课程资料 7 jQuery UI的介绍 jQuery UI介绍 是什么？ jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。 官方首页: / 下载: /download 示例和文档: /demos/ jQuery UI配置 步骤 1）选择合适的皮肤下载代码； /themeroller/ 2）在网站根目录下创建JS/Lib文件夹，用来存放所有公共类库文件 3）将下载后的jquery-ui-1.8.7.custom目录拷贝到JS/Lib下 Dialog Modal Form 构建创建新用户窗体 构建窗体内的内容； 构建模态窗体； autoOpen modal buttons resizable draggable 绑定click事件； Alert/Confirm 使用频率高，如何封装通用的插件？ 插件的开发简要介绍 闭包： (function($) { // Code goes here })(jQuery); 等同于： var jq = function($) { // Code goes here }; jq(jQuery); 插件的开发简要介绍 扩展： $.extend和$.fn.extend - $.extend 用于扩展自身方法，如$.ajax, $.getJSON等 - $.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。 为了保持jQuery的完整性，倾向于使用$.fn.extend进行插件开发而尽量少使用$.extend。 Tabs Tabs简单应用 步骤： 1）创建所有标签页内的内容div（容器）； 2）构建标签的框架； 使用ul构建标签.，内容div一定要和标签关联， 没有关联的div将不被处理直接显示。 3）初始化脚本，设置tabs； 可折叠：collapsible 鼠标滑动即切换：event: “mouseover” Tabs的Ajax应用 步骤： href直接定向到Ajax页面 使用Ajax可以不指定内容容器，但是也可以将Ajax内容放入指定容器中。 Sortable Sortable 调用方法 $(对象).sortable(参数); 常用参数:{ delay? :毫秒，设置延迟多久才激活排序动作 distance? :像素，拖动多少像素后，才正式触发 update???:? 当排序动作结束时且元素坐标已经发生改变时触发此事件。 } Autocomplete Autocomplete介绍 说明 /demos/autocomplete/ ps. jQuery UI 1.8+开始新支持的插件 Autocomplete配置 选择城市的实现步骤： （通过发送Ajax请求获取JSON对象，并在回调函数中进行autocomplete操作） 1）准备数据源； 2）引用文件 3）定义输入、赋值的html元素； 4）$.getJSON 5）格式化数据$.map 6）回调事件 Autocomplete函数 数据格式化 ｛ label: value: ｝ var d = $.map(data, function (item) { return { label: item.CityName + ( + item.CityNameEn + ), value: item.pkid, cityName: item.CityName } }); Autocomplete函数 初始化： $(#city).aut