jQuery-EasyUI课件

西安软件服务外包学院-席伏龙jQuery-EasyUI西安软件服务外包学院-席伏龙第一章1.jQuery-EasyUI简介2.Easyui开发环境构建步骤3.编写第一个easyui程序西安软件服务外包学院-席伏龙1.jQuery-EasyUI简介jQueryEasyUI是一组基于jQuery的UI插件集合，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQueryEasyUI为我们提供了大多数UI控件的使用，如：combobox，dialog，tabs，validatebox，datagrid，layout,tree等等jQueryEasyUI有以下特点：1、基于jquery用户界面插件的集合2、为一些当前用于交互的js应用提供必要的功能3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class=easyui-panel）4、支持HTML5（通过data-options属性）5、开发产品时可节省时间和资源6、简单，但很强大7、支持扩展，可根据自己的需求扩展控件8、目前各项不足正已版本递增的方式不断完善西安软件服务外包学院-席伏龙jQuery-EasyUI官网首页西安软件服务外包学院-席伏龙Easyui开发环境构建步骤如下:(1)在官网下载easyui源码包将jquery-easyui-1.3.5文件复制到web工程的相应目录下。(2)引入响应的js文件和样式文件到jsp页面或者html页面中，如下图：2.Easyui开发环境构建步骤西安软件服务外包学院-席伏龙3.编写第一个easyui程序西安软件服务外包学院-席伏龙第二章1.EasyUI开发中常用控件介绍2.EasyUI对话框讲解3.综合案例：使用对话框编写用户登录界面4.Layout（布局）Panel面板控件西安软件服务外包学院-席伏龙1.Window（窗口）控件messager消息框dialog对话框2.Layout（布局）Panel面板控件layout布局3.DataGrid（数据网格）控件datagrid数据网格tree控件4.Form（表单）控件validatebox验证框combo组合combobox组合框combotree组合树combogrid组合网格numberbox数字框datebox日期框datetimebox日期时间框calendar日历1.EasyUI开发中常用控件介绍西安软件服务外包学院-席伏龙Messager消息框：messager提供不同类型的消息框,包含confirm,prompt,alert,show等等.所有的消息框都是异步的,用户可以使用messager回调函数做交互。常用方法如下：$.messager.showoptions参数是一个配置对象:showType:定义消息窗体如何显示可用值有:null,slide,fade,show.默认值是slide.showSpeed:定义消息窗体最终显示的毫秒数.默认值是600.width:定义消息窗体宽度.默认值是250.height:定义消息窗体高度.默认值是100.msg:显示的消息文本.title:标题文本显示到panel的头部的.timeout:如果定义为0,消息窗体将不会关闭除非用户关闭.定义为不是0,消息窗体将在时间超时后自动关闭.示例代码:$.messager.show({title:'消息提示',msg:'添加数据成功',showType:'slide',timeout:2000,showType:'slide'});1.对话框讲解西安软件服务外包学院-席伏龙$.messager.alert显示一个alter窗体.参数:title:标题文本,显示在panel的头部的.msg:显示的消息文本.icon:显示icon图片,可用值有:error,question,info,warning.fn:窗体关闭的时候触发的回调函数.示例代码:$.messager.alert('MyTitle','Hereisainfomessage!','info');$.messager.confirm显示一个确认消息窗体有一个OK和一个Cancel按钮,参数:title:标题文本显示在panel的头部的.msg:显示的消息文本.fn(b):回调函数,当用户点击OK按钮传入true值到函数,其他则传入false.示例代码:$.messager.confirm('Confirm','Areyousuretoexitthissystem?',function(r){if(r){}});西安软件服务外包学院-席伏龙$.messager.prompt显示一个消息窗体,一个OK和一个Cancel按钮,提示用户输入一些文本,参数:title:显示到panel头部的标题文本.msg:显示的消息文本.fn(val):回调函数,value参数是用户输入的值.示例代码:$.messager.prompt('Prompt','Pleaseenteryourname:',function(r){if(r){alert('Yournameis:'+r);}});对话窗口-Dialog该对话框是一种特殊类型的窗口，它可以有一个工具栏上的顶部和底部的按钮栏。该对话框只有一个头默认情况下，显示在右上角的关闭工具。用户可以配置对话框显示，如可折叠，可最小化的maximizable工具等其他工具的行为。定义对话框有两种方式如下：通过从现有的DOM节点的标签创建对话窗口。下面的例子显示了一个模态对话框，调整大小的功能。divid=ddclass=easyui-dialogtitle=MyDialogstyle=width:400px;height:200px;data-options=iconCls:'icon-save',resizable:true,modal:trueDialogContent./div西安软件服务外包学院-席伏龙使用JavaScript创建对话框如下：divid=ddDialogContent./div$('#dd').dialog({title:'MyDialog',width:400,height:200,closed:false,cache:false,modal:true});对话框常用属性title对话标题。NewDialogcollapsibleboolean定义是否显示折叠按钮。falseminimizableboolean定义是否显示最小化按钮。falsemaximizableboolean定义是否显示最大化按钮。falseresizableboolean定义对话窗口是否可以被缩放。falseclosableboolean定义是否显示关闭按钮。trueclosedboolean定义是否在初始化组件时关闭（隐藏）窗口falsemodalboolean定义窗口是否带有遮罩效果。truebuttons:该对话框按钮通过数组定义:buttons:[{text:'Save',handler:function(){}},{text:'Close',handler:function(){}}]西安软件服务外包学院-席伏龙综合案例：使用对话框编写用户登录界面西安软件服务外包学院-席伏龙布局面版-Layout布局的容器，有多达五个区域：北部，南部，东部，西部和中心。是必需的，但中心区域面板边缘区域面板是可选的。通过拖动它的边框，面板，可以调整每一个边缘地区，他们也可以点击折叠的崩溃而触发。可以嵌套的布局，以便用户可以建立复杂的布局。案例代码：bodyclass=easyui-layoutdivdata-options=region:'north',title:'NorthTitle',split:truestyle=height:100px;/divdivdata-options=region:'south',title:'SouthTitle',split:truestyle=height:100px;/divdivdata-options=region:'east',iconCls:'icon-reload',title:'East',split:truestyle=width:100px;/divdivdata-options=region:'west',title:'West',split:truestyle=width:100px;/divdivdata-options=region:'center',title:'centertitle'style=padding:5px;background:#eee;/div/body常用属性：titlestring布局面板的标题。nullregionstring定义布局面板的位置（方向），可以取下列值的其中之一：north,south,east,west,center。borderboolean设置为true将显示布局面板的边框。truesplitboolean如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。falseiconClsstring一个用来显示布局面板头部图标的css类。null如下图所示：4.Layout（布局）Panel面板控件西安软件服务外包学院-席伏龙西安软件服务外包学院-席伏龙布局综合案例讲解bodyclass=easyui-layoutdivdata-options=region:'north',title:'log',split:truehref=log.htmlstyle=height:110px;divalign=left/div/divdivdata-options=region:'west',title:'导航菜单',split:truestyle=width:150px;ulid=tree/ul/divdivdata-options=region:'center',title:'首页'style=padding:5px;background:#eee;width:50divclass=easyui-tabsfit=trueborder=falseid=tabsstyle=width:150divalign=centerdata-options=title:'首页'h1欢迎使用该系统/h1/div/div/div/body西安软件服务外包学院-席伏龙scripttype=text/javascript$(function(){//数据vartreeData=[{text:系统管理,iconCls:icon-menu,children:[{text:角色管理,iconCls:icon-user,attributes:{url:rolerList.jsp}}}];西安软件服务外包学院-席伏龙//实例化树菜单$(#tree).tree({data:treeData,lines:true,onClick:function(node){if(node.attributes){openTab(node.text,node.attributes.url,node.iconCls);}}});//新增TabfunctionopenTab(te