相关文章: 推荐群组: EXT 更多相关推荐
【图一：登录页】
【图二：页面布局】
【图三：用户编辑层】
【图四：确认弹出框】
easyui插件简介在这就不赘述了，大家可以在iteye上找到很多该插件的相关消息。 如果页面需要使用easyui插件，需要引进一下js和css（使用的时候需要注意easyui版本依赖的jquery.js版本要对应）： <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-1.4.4.min.js"></script> <link type="text/css" href="<%=root%>/Web/common/js/easyui/themes/default/easyui.css"> <link type="text/css" href="<%=root%>/Web/common/js/easyui/themes/icon.css"> <script type="text/javascript" src="<%=root%>/Web/common/js/easyui/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=root%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>为了让一个主页实现上下左右中的布局方式显示，这里就需要用到easyui一个叫layout的东西，通常有多种方式可以实现布局。 ①使用js创建layout 首先定义一个div，设置region，title等属性（注html是没有region属性的，这是easyui专属属性） <div> <div region="north" title="North Title" split="true"></div> <div region="south" title="South Title" split="true"></div> <div region="east" iconCls="icon-reload" title="East" split="true"></div> <div region="west" split="true" title="West"></div> <div region="center" title="center title"></div> </div>然后在js中指定id为cc的div为layout： $('#cc').layout(options);简单介绍几个layout属性： 属性名 数据类型 功能 默认值 title string 指定布局的标题名称 无 region string 指定布局位置，分：东、西、南、北、中 border boolean 是否显示边界 true split boolean 是否显示分界线从而用户可以拖动改变其大小 false iconCls string 指定布局的图标样式 无 href string 指定该布局远程调用的html路径 无
②让整个body使用easyui的cssclass：class="easyui-layout"自动创建layout 这也是我使用的方式，看下面代码： <body> <!-- 正上方panel --> <div region="north" href="<%=root%>/Web/common/page/top.html"></div> <!-- 正左边panel --> <div region="west" title="菜单栏" split="true"> <div fit="true"> <!-- selected --> <div title="用户权限管理" selected="true"> <ul> <li><a href="javascript:addTab('tabId_loginInfo','用户管理','<%=root%>/ospm/loginInfo/goLoginInfoMain.jhtml');">用户管理</a></li> <li><a href="javascript:addTab('tabId_privilege','权限管理','<%=root%>/ospm/loginInfo/goPrivilegeMain.jhtml');">权限管理</a></li> </ul> </div> </div> </div> <!-- 正中间panel --> <div region="center" title="功能区" > <div fit="true"> <div title="欢迎页"> <div> <h3>你好，欢迎来到权限管理系统</h3> </div> </div> </div> </div> <!-- 正下方panel --> <div region="south"> <label> 作者：白糖<br/> 时间：2011-5-17 </label> </div> </body>运行效果如【图二：页面布局】 【图二：页面布局】上面标记了在菜单栏点击“用户管理”链接即可在功能区创建一个叫“用户管理”的选项卡并加载相应数据。注意：用户管理页面是另一个jsp，需要远程调用。 最初我使用tabs的href属性来远程调用用户管理jsp，发现页面会有js冲突，导致用户管理页面的添加、编辑等各种功能失效，我猜想可能是js冲突，因为布局页引用了easyui，而用户管理jsp也引用了同样的easyui。 后来看了下项目经理ext的布局代码，原来在点击链接的时候会创建一个tabs，只是tabs的内容是一个iframe分隔： /** * 创建新选项卡 * @param tabId 选项卡id * @param title 选项卡标题 * @param url 选项卡远程调用路径 */ function addTab(tabId,title,url){ //如果当前id的tab不存在则创建一个tab if($("#"+tabId).html()==null){ var name = 'iframe_'+tabId; $('#centerTab').tabs('add',{ title: title, closable:true, cache : false, //注：使用iframe即可防止同一个页面出现js和css冲突的问题 content : '<iframeid="'+tabId+'"src="'+url+'" frameborder="0" scrolling="auto" ></iframe>' }); } } (责任编辑：JavaVideo) |
