《使用struts 2框架开发租房网站》tp09课件

翻转课堂： jQuery常用插件,第九章,回顾与作业点评,请说出jQuery提供的Ajax方法有哪些？它们各自的特点是什么？ 请说出下列代码的作用 请在Java类中定义一个JSON字符串,var student = “name“:“王洋“, “age“:19, “sex“:“男“;/1 var students = name:王洋,age:19,sex:男, name:研颜, age:17,sex:女 ; /2 var studentInfo = name:王洋,age:17,sex:男, score:Java:89,C#:87; /3,2/52,提问,注意key值的写法,本章任务,使用jQuery UI插件创建对话框 使用jQuery UI插件创建选项卡 使用jQuery UI插件创建菜单 使用jQuery UI插件实现自动完成 使用jQuery UI插件实现图片延迟加载 使用easy UI插件创建树形导航菜单 使用easy UI插件创建表单展示数据,3/52,本章目标,会使用dialog插件 会使用tabs插件 会使用menu插件 会使用autocomplete插件 会使用lazyload插件 掌握tree插件用法 掌握datagrid插件用法,4/52,翻转课堂,5/52,课程知识体系结构图,6/52,自学检查2-1,请说说什么是插件？ 请写出使用插件的步骤 请说出你所知道的至少3种jQuery插件及作用 请说出以下关键代码的作用,/省略部分代码 $(document).ready(function() $(“#dialog“).dialog(); );,代码阅读,/省略部分代码 $(document).ready(function() $(“#menu“).menu(); );,提问,7/52,编码实现选项卡切换效果,现场编程,自学检查2-2,8/52,FAQ,在学习中遇到了哪些问题？ 如何解决的？,答疑解惑,9/52,串讲内容,jQuery插件简介 jQuery UI 常用插件 dialog插件 tabs插件 menu插件,10/52,插件（Plug-in） 是遵循一定接口规范编写的程序 是原有系统平台功能的扩展和补充 只能运行在规定的系统平台下，而不能单独运行 查找插件和帮助（常用网址） jQueryUI官方网站 jQueryUI官方网站提供的API文档 jQuery官方网站的插件库,串讲：jQuery插件简介2-1,jQuery插件是指基于jQuery脚本库开发出来的扩充函数库 jQuery的官方插件叫做jQuery UI,11/52,串讲：jQuery插件简介2-2,使用jQuery插件 获取jQuery插件 将需要的jQuery插件及样式文件加入工程 在页面引入jQuery插件及样式文件,/在页面引入jQuery插件脚本库及样式文件 /themes/base/jquery.ui.all.css“ /js/jquery-1.8.3.js“ /js/jquery-ui.js“,注意引入的先后顺序,12/52,串讲：dialog插件2-1,常用参数,13/52,dialog插件相关脚本库,串讲：dialog插件2-2,示例,使用dialog插件, /themes/base/jquery.ui.all.css“ /js/jquery-1.8.3.js“ /js/jquery.ui.core.js“ /js/jquery.ui.widget.js“ /js/jquery.ui.dialog.js“,14/52, $(function() $(“#dialog“).dialog( height: 250, width: 350, modal: true, buttons: “关闭“: function() $( this ).dialog( “close“ ); ); ); ,串讲：tabs插件3-1,常用属性,15/52,串讲：tabs插件3-2,常用方法 常用事件,16/52,串讲： tabs插件3-3,示例,使用tabs插件,/themes/base/jquery.ui.all.css“ /js/jquery-1.8.3.js“ /js/jquery.ui.core.js“ /js/jquery.ui.widget.js“ /js/jquery.ui.tabs.js“ /js/jquery.ui.tabs.js“,17/52,tabs插件脚本库, $(function() $( “#tabs“ ).tabs( active:1, collapsible:true, activate:function(event,ui) alert(“触发activate事件！“); ); ); , tabs1 tabs2 tab1 content :this is tab1 ! tab2 content :this is tab2 ! ,串讲：menu插件2-1,常用属性,18/52,串讲： menu插件2-2,示例,使用menu插件,/themes/base/jquery.ui.all.css“ /js/jquery-1.8.3.js“ /js/jquery.ui.core.js“ /js/jquery.ui.position.js“ /js/jquery.ui.widget.js“ /js/jquery.ui.menu.js“ $(function() /加载本地菜单 $( “#menu“ ).menu(); ); ,19/52,dialog插件相关脚本库, $(function() /加载远程菜单 $.get(server.jsp,function(data) $( “#menu“).append(data); $( “#menu“).menu(); ); ); ,学员操作创建登录对话框,需求说明 点击按钮弹出form对话框实现登录功能 使用autoOpen参数可以设置当前对话框为不打开状态 使用open方法将对话框打开,练习,提示,20/52,共性问题集中讲解,常见问题及解决办法 代码规范问题 调试技巧,共性问题集中讲解,21/52,翻转课堂总结,jQuery插件是指基于jQuery脚本库开发出来的扩充函数库 jQuery的官方插件叫做jQuery UI 常用jQuery UI插件 dialog对话框插件 tabs选项卡插件 menu菜单插件,22/52,动态选项卡2-1,作用 提高用户体验度 降低服务器压力 指定远程URL地址 编写客户端JavaScript代码 编写服务器端代码,实现步骤,23/52,1、使用href属性指定远程URL地址 动态加载 加载错误 ,动态选项卡2-2,2、客户端JavaScript代码 $(function() $( “#tabs“ ).tabs( beforeLoad: function( event, ui ) /加载失败时执行的函数 ui.jqXHR.error(function() ui.panel.html(“ajax load error.“ ); ); ); ); ,3、服务器端demo5_server.jsp代码 ,示例,24/52,实现动态选项卡,学员操作实现动态选项卡,需求说明 使用tabs插件实现当切换选项卡时动态从服务器端获取显示内容,练习,25/52,autocomplete插件4-1,自动完成功能给用户提供更好的体验效果,26/52,autocomplete插件4-2,语法,常用属性,$(selector).autocomplete(settings);,27/52,autocomplete插件4-3,常用事件 引入autocomplete相关插件库文件 定义数据来源 编写JavaScript代码实现自动完成,28/52,实现步骤,远程数据源实现自动完成,示例,/js/jquery-1.8.3.js“ /js/jquery.ui.core.js“ /js/jquery.ui.widget.js“ /js/jquery.ui.autocomplete.js“ /js/jquery.ui.menu.js“ /js/jquery.ui.position.js“,autocomplete插件4-4,29/52,autocomplete插件相关脚本库, $(function() $( “#tags“ ).autocomplete( source:function(request,response) $.get(“demo7_server.jsp“,“term=“+request.term, function(data) var result = $.parseJSON(data); response(result);/ 输出返回结果 ); ); ); ,lazyload插件3-1,电子商务网站通过海量商品图片展示，吸引大量消费者浏览。但是加载大量图片造成的资源消耗及用户等待时间过长的问题如何解决？ 将图片分批按需加载 缩短用户等待时间 缓解服务器压力,30/52,问题,分析,根据以上思路，lazyload插件实现图片延迟加载功能,lazyload插件3-2,语法,常用参数,$(selector).lazyload(settings);,31/52,远程数据源实现自动完成,示例,/js/jquery-1.8.3.js“ /js/jquery.lazyload.js“ $(function() $(“img“).lazyload( effect:“fadeIn“/使用淡入效果 ); ); ,/定义要加载的图片 请往下看，有图片的吆！ ,lazyload插件3-3,指向占位图片,存放真实图片路径,32/52,lazyload插件脚本库,学员操作实现自动完成效果,需求说明 在查询框中输入关键字，系统自动从服务器端获取相关信息，补充在输入框的下拉列表中 要求至少输入两个字才能触发自动完成效果,练习,33/52,学员操作实现图片延迟加载,需求说明 模仿淘宝网商品单页，当用户打开网页时，实现商品图片的延迟加载,练习,34/52,easy UI简介2-1,在企业应用中，树形菜单和数据列表必不可少 使用easy UI 可以实现以上组件效果,35/52,easy UI也是基于jQuery脚本库开发的插件库,easy UI简介2-2,easy UI是类似于jQuery UI的插件库 它提供了丰富的各种常用插件 tree datagrid dialog window tabs ,36/52,多种脚本库同时使用时，需要注意脚本库冲突问题,tree插件5-1,语法,常用属性,$(selector).tree(settings);,37/52,tree插件5-2,常用方法、事件,38/52,tree插件5-3,Node对象参数说明,39/52,使用tree插件实现树形菜单,示例,/js/jquery-1.8.3.js“ /js/jquery.easyui.min.js“ $(function() $(#tree).tree( url:tree_data.json, /远程加载tree数据的url路径 animate:true, /是否开启动画效果 checkbox:true, /是否显示复选框 onDblClick:function(node) /鼠标双击事件 $(this).tree(“toggle“,node.target); /改变当前节点状态 ); ); ,tree插件5-4,40/52,jquery.easyui.min.js包含了easyUI中的所有插件,tree插件5-5,tree数据节点说明,41/52,学员操作实现简单的树形菜单,需求说明 使用tree插件，实现简单的树形菜单 要求至少两个子节点,练习,42/52,datagrid插件5-1,语法,常用属性,$(selector).datagrid(settings);,43/52,datagrid插件5-2,常用方法 常用事件,44/52,datagrid插件5-3,Column对象常用属性,45/52,使用tree插件实现树形菜单,示例,datagrid插件5-4,46/52,关键代码,/js/jquery-1.8.3.js“ /js/jquery.easyui.min.js“ $(function() $(#dg).datagrid( url:demo10_server.jsp, /远程请求数据的url路径 pagination:true, /显示底部分页栏 pageSize:5, /默认每页记录数 pageList:5,10,15, /显示列表记录数的下拉框选项 columns: field:ck,checkbox:true, field:participants,title:参与人数,styler:myStyler , ); ); ,datagrid插件5-5,47/52,pagination参数为true时才有效,/“参与人数”列的渲染器 function myStyler(value,row,index) if (value 15) return color:green; ,/服务器端代码 /默认参数rows表示每页显示记录条数 Integer pageSize = Integer.parseInt(request.getParameter(“rows“); /默认参数page表示当前页数 Integer pageNumber