jquery-easy-ui

JQUERYEASYUI什么是EASYUIjQueryEasyUI是一组基于jQuery的UI插件集合，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQueryEasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。目录说明开源授权协议商业授权协议自述文件升级日志文件用于模块加载一、快速入门1.1搭建EASYUI环境我们需要引入3个基本的文件scriptsrc=../easyui/jquery-1.8.0.min.js/scriptscriptsrc=../easyui/jquery.easyui.min.js/scriptlinkhref=../easyui/themes/default/easyui.cssrel=stylesheet/1.2如何写EASYUI-HTML方式通过配置元素的属性的方式来写easyui的ui插件,如下面的代码，我们配置一个panel(面板)，首先必须配置class为easyui-panel,如果需要加一个标题我们则需要些title属性即可，想给这个面板添加一个图标，我们只需要配置iconCls属性即可，easyui本身就提供了一套icon的css,我们在页面里面引入themes/icon.css即可使用easyui给我们定义的cssdivstyle=width:300px;height:500pxclass=easyui-paneltitle=第一个面板iconCls=icon-savecollapsible=true/div1.3、DATA-OPTIONS属性我们在写iconCls这种属性的时候编辑器会提示错误，easyui提供data-options属性给我来写组件的配置如下面代码divstyle=width:300px;height:500pxclass=easyui-paneltitle=第一个面板data-options=iconCls:'icon-save',collapsible:true/div1.4、HELLOWORLD$(function(){$.messager.alert(helloword,欢迎光临);});easyui版HelloWorld我们在写easyui的js代码的时候也需要dom树生成后,也就是说我们需要写$(function(){})这个方法二、内容组件2.1、PANEL(面板)panel面板是easyui里面非常基础的一个内容组件，在我们后期学的tabs(选项卡)、accordion(手风琴)这两种内容组件都依赖于panel组件。构建一个panel组件代码如下$(#myDiv).panel({title:js方式的panel,width:300,height:500,fit:true,border:true,content:设置面板内,)}1.5如何写EASYUI-JS方式$(#myDiv).panel({title:js方式的panel,width:300,height:500,collapsible:true});使用配置的方式创建以easyui的panel组件。代码如下2.1.1、PANEL其他常用属性loadingMessage：显示加载消息href：panel内容加载地址collapsible：添加收缩/显示按钮closable：显示关闭按钮minimizable：显示最大化按钮maximizable：显示最小化按钮closed:初始的时候是否关闭面板2.1.2、PANEL-添加TOOLS如果我们需要给panel的头上面加上如上图的功能按钮就可以使用panel的tools属性给面板添加一个工具按钮，代码如下tools:[{iconCls:'icon-add',handler:function(){$.messager.alert(系统提示,你点击了添加按钮);}},{iconCls:icon-save,handler:function(){$.messager.alert(系统提示,你点击了保存按钮);}}]2.2、TABS(选项卡)同过依赖关系,我们可以得知tabs依赖panel与linkbutton。说明tabs同样能使用panel属性及方法，tabs的add方法是给他tabs添加一个tab页vartabs=$(#tt).tabs({border:false,fit:true,});$('#tt').tabs('add',{title:'Tab页',content:'tab页内',closable:true,width:50,});2.2.1、TABS(选项卡)--常用属性plain:简洁模式toolPosition:工具栏位置,有left与right两个值tabPosition:标签位置,有top、bottom、left、rightheaderWidth:标签的宽度,只有toolPosition为left、right有效scrollDuration:每个滚动动画持续时间scrollIncrement:每次标签滚动的像素2.2.2、TABS(选项卡)--TOOLS同样tabs也有tools但是tools用在不同的地方就会有不同的效果1、tabs选项卡上面tools:[{iconCls:'icon-add',handler:function(){alert('add');}}]续2、给tabs的选项卡添加tools工具栏tools:[{iconCls:'icon-mini-refresh',handler:function(){alert('refresh');}}]easyui针对标签这种比较特殊的tools写了一个默认的icon-mini的图标样式3、ACCORDION(手风琴)accordion(手风琴)布局是将一组相关的功能或者内容放到一起，每个选项卡我们都可以使用href加载内容,也可以使用content属性设置值accordion.accordion(add,{title:第一组功能,href:/HtmlPage1.html,selected:true});广州传智播客gz.itcast.cn三、EASYUI事件与方法的使用3.1、EASYUI事件easyui事件可以在构建的时候就通过属性方式添加上去，比如在panel收缩的时候添加一个事件，在构建的时候代码如下onCollapse:function(){alert(0);}如果我们需要在构建后添加事件，代码如下$(#myDiv).panel({onMaximize:function(){alert(最大化了！！)}});3.2、EASYUI方法在easyui中执行一个方法的方式比较特殊，是以参数调用的方式执行，如下面代码调用setTitle方法设置title$(#myDiv).panel(setTitle,设置title);广州传智播客gz.itcast.cn四、布局LAYOU4.1、EASYUI布局-LAYOUT在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下:divstyle=width:500px;height:700px;class=easyui-layoutdivdata-options=region:'north'style=height:50px;width:500px;这是一个北部面板/divdivdata-options=region:'south'style=height:50px这是一个南部面板/divdivdata-options=region:'west'style=width:100px这是一个西部面板/divdivdata-options=region:'east'style=width:100px这是一个北东部面板/divdivdata-options=region:'center'这是一个中间面板/div/div续--列图4.2、ADD方法使用add方式给layout动态添加一个面板$('#myDiv').layout('add',{region:'west',width:180,title:'WestTitle',split:true,tools:[{iconCls:'icon-add',handler:function(){alert('add')}},{iconCls:'icon-remove',handler:function(){alert('remove')}}]});4.3、整个页面定义成LAYOUT我们在创建layout布局的时候东(east)、南(south),西(west)、北(north)都可以不写，但是中(center)必须写。假如我们想让整个页面都是layout布局，这样就不用考虑高度宽度等问题。如何做？我们只需要在body标签上面添加一个class即可。代码如下：bodyclass=easyui-layoutdivdata-options=region:'north'style=height:50pxnorth/divdivdata-options=region:'south'style=height:50pxsouth/divdivdata-options=region:'west'style=width:100pxwest/divdivdata-options=region:'east'style=width:100pxeast/divdivdata-options=region:'center'center/div/body广州传智播客gz.itcast.cn五、窗口,对话框,提示框5.1、WINDOW(窗口)通过上面的代码创建一个名称为“窗口”，高度400宽度300的窗口。当modal属性为true的时候，窗口弹出后在窗体下面的内柔都会被加上一个遮罩，我称这样的窗口为模态窗口$(function(){$(#mywin).window({title:窗口,width:300,height:400,modal:true});});窗口我们在程序中会大量的使用，比如我们的添加、编辑都可以使用窗口实现，与winfrom的程序非常的类似。下面的代码是创建一个基本的窗口5.1.2、WINDOW(窗口)--常用方法及属性1、打开使用open方法打开窗口$('#mywin).window('open');2、关闭使用close方法关闭窗口$('#mywin).window(close);1、draggable:是否拖动2、resizable：是否允许改变大小3、shadow：是否显示窗口阴影4、inline:如果为true则在父控件里面，false则在所有元素上面窗口在最大化的时候是填充满整个父元素，在最小化的时候则是隐藏窗口。5.2、对话框(DIALOG)Dialog是一个特殊的window，跟window相比它在顶部跟底部多了一个按钮栏。创建代码如下$('#mywin').dialog({title:'对话框',width:400,height:200,toolbar:[{text:添加,iconCls:icon-add}],buttons:[{text:保存},{text:取消}]});5.3、弹出框(MESSAGER)easyui中定义五种弹出框1、$.messager.show:在屏幕右下角显示一个消息窗口2、$.messager.alert:显示一个警告窗口3、$.messager.confirm