jquery-easy-ui探究.pptVIP

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。;开源授权协议;我们需要引入3个基本的文件;通过配置元素的属性的方式来写easyui的ui插件,如下面的代码，我们配置 一个panel(面板) ，首先必须配置class为easyui-panel,如果需要加一个 标题我们则需要些title属性即可，想给这个面板添加一个图标，我们只需 要配置 iconCls属性即可，easyui本身就提供了一套icon的css,我们在页 面里面引入themes/icon.css即可使用easyui给我们定义的css;我们在写 iconCls这种属性的时候编辑器会提示错误，easyui提供data-options属性给我来写组件的配置如下面代码; $(function () { $.messager.alert(hello word, 欢迎光临); });;panel面板是easyui里面非常基础的一个内容组件，在我们后期学的tabs (选项卡)、accordion(手风琴)这两种内容组件都依赖于panel组件。构建一个panel组件代码如下; $(#myDiv).panel({ title: js方式的panel, width: 300, height: 500, collapsible: true });;loadingMessage：显示加载消息 href：panel内容加载地址 collapsible：添加收缩/显示按钮 closable：显示关闭按钮 minimizable：显示最大化按钮 maximizable：显示最小化按钮 closed:初始的时候是否关闭面板;如果我们需要给panel的头上面加上如上图的功能按钮就可以使用panel的tools属性给面板添加一个工具按钮，代码如下;同过依赖关系,我们可以得知tabs依赖panel与linkbutton。说明tabs同样能使用panel属性及方法，tabs的add方法是给他tabs添加一个tab页 ;plain:简洁模式 toolPosition:工具栏位置,有left与right两个值 tabPosition:标签位置,有top、bottom、left、right headerWidth:标签的宽度,只有toolPosition为left、right有效 scrollDuration: 每个滚动动画持续时间 scrollIncrement:每次标签滚动的像素 ;;2、给tabs的选项卡添加tools工具栏;accordion(手风琴)布局是将一组相关的功能或者内容放到一起，每个选项卡我们都可以使用href加载内容,也可以使用content属性设置值;广州传智播客 ;easyui事件可以在构建的时候就通过属性方式添加上去，比如在panel收缩的时候添加一个事件，在构建的时候代码如下;在easyui中执行一个方法的方式比较特殊，是以参数调用的方式执行，如下面代码调用setTitle方法设置title;广州传智播客 ;在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下:;使用add方式给layout动态添加一个面板;我们在创建layout布局的时候东(east)、南(south),西(west)、北(north)都可以不写，但是中(center)必须写。;广州传智播客 ;通过上面的代码创建一个名称为“窗口”，高度400宽度300的窗口。当modal属性为true的时候，窗口弹出后在窗体下面的内柔都会被加上一个遮罩，我称这样的窗口为模态窗口;1、打开 使用open方法打开窗口;Dialog是一个特殊的window，跟window相比它在顶部跟底部多了一个按钮栏。创建代码如下;easyui中定义五种弹出框 1、$.messager.show:在屏幕右下角显示一个消息窗口 2、$.messager.alert:显示一个警告窗口 3、$.messager.confirm：显示一个确认窗口，包含确认、’取消‘两个按钮 4、$.mp