使用jquery-easyui的布局layout写后台管理页面的代码详解
程序员文章站
2022-04-28 20:59:16
先在官网下载easyui文档
引入头部文件
先在官网下载easyui文档
引入头部文件
<link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/themes/icon.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_cn.js"></script>
layout布局如下
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>java开源博客系统后台管理页面-powered by java1234</title> <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/themes/icon.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_cn.js"></script> <script type="text/javascript"> function opentab(text,url,iconcls){ if($("#tabs").tabs("exists",text)){ $("#tabs").tabs("select",text); }else{ var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='/admin/"+url+"'></iframe>"; $("#tabs").tabs("add",{ title:text, iconcls:iconcls, closable:true, content:content }); } } </script> </head> <body class="easyui-layout"> <div region="north" style="height: 78px;background-color: #e0ecff"> <table style="padding: 5px" width="100%"> <tr> <td width="50%"> <img alt="logo" src="/static/images/logo.png"> </td> <td valign="bottom" align="right" width="50%"> <font size="3"> <strong>欢迎:</strong>${currentuser.username }</font> </td> </tr> </table> </div> <div region="center"> <div class="easyui-tabs" fit="true" border="false" id="tabs"> <div title="首页" data-options="iconcls:'icon-home'"> <div align="center" style="padding-top: 100px"><font color="red" size="10">欢迎使用</font></div> </div> </div> </div> <div region="west" style="width: 200px" title="导航菜单" split="true"> <div class="easyui-accordion" data-options="fit:true,border:false"> <div title="常用操作" data-options="selected:true,iconcls:'icon-item'" style="padding: 10px"> <a href="javascript:opentab('写博客','writeblog.jsp','icon-writeblog')" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-writeblog'" style="width: 150px">写博客</a> <a href="javascript:opentab('评论审核','commentreview.jsp','icon-review')" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-review'" style="width: 150px">评论审核</a> </div> <div title="博客管理" data-options="iconcls:'icon-bkgl'" style="padding:10px;"> <a href="javascript:opentab('写博客','writeblog.jsp','icon-writeblog')" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-writeblog'" style="width: 150px;">写博客</a> <a href="javascript:opentab('博客信息管理','blogmanage.jsp','icon-bkgl')" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-bkgl'" style="width: 150px;">博客信息管理</a> </div> <div title="博客类别管理" data-options="iconcls:'icon-bklb'" style="padding:10px"> <a href="javascript:opentab('博客类别信息管理','blogtypemanage.jsp','icon-bklb')" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a> </div> <div title="评论管理" data-options="iconcls:'icon-plgl'" style="padding:10px"> <a href="javascript:opentab('评论审核','commentreview.jsp','icon-review')" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-review'" style="width: 150px">评论审核</a> <a href="javascript:opentab('评论信息管理','commentmanage.jsp','icon-plgl')" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-plgl'" style="width: 150px;">评论信息管理</a> </div> <div title="个人信息管理" data-options="iconcls:'icon-grxx'" style="padding:10px"> <a href="javascript:opentab('修改个人信息','modifyinfo.jsp','icon-grxxxg')" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a> </div> <div title="系统管理" data-options="iconcls:'icon-system'" style="padding:10px"> <a href="javascript:opentab('友情链接管理','linkmanage.jsp','icon-link')" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-link'" style="width: 150px">友情链接管理</a> <a href="javascript:openpasswordmodifydialog()" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-modifypassword'" style="width: 150px;">修改密码</a> <a href="javascript:refreshsystem()" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a> <a href="javascript:logout()" rel="external nofollow" class="easyui-linkbutton" data-options="plain:true,iconcls:'icon-exit'" style="width: 150px;">安全退出</a> </div> </div> </div> <div region="south" style="height: 25px;padding: 5px" align="center"> copyright © 2012-2016 java知识分享网 版权所有 </div> </body> </html>
总结
以上所述是小编给大家介绍的使用jquery-easyui的布局layout写后台管理页面的代码详解,希望对大家有所帮助