当前位置：移动技术网 > IT编程>开发语言>JavaScript > 使用jquery-easyui的布局layout写后台管理页面的代码详解

使用jquery-easyui的布局layout写后台管理页面的代码详解

2019年07月18日 | 移动技术网IT编程 | 我要评论

先在官网下载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写后台管理页面的代码详解，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]
甜品消消乐 03甜品的生成与基础脚本的编写

（1）甜品数组// 甜品数组，使用二维存放生成的甜品，用于后续操作private GameSweet[,] sw... [阅读全文]
Unity Editor中打开场景获取GameObject

编辑器工具开发中，有时需要找到场景中的物体。下面介绍用代码在Editor中寻找指定场景中的GameObject如... [阅读全文]
使用Scratch制作打弹球游戏（三）过关增加难度

过关增加难度个博客我们对弹珠如何进行过关进行了讲解，我们今天呢，就来讲解以下如何增加关卡难度。大家可以想一下关卡... [阅读全文]

网友评论


验证码：

使用jquery-easyui的布局layout写后台管理页面的代码详解

2019年07月18日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论