首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJune 19, 2019

先在官网下载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写后台管理页面的代码详解

总结

以上所述是小编给大家介绍的使用jquery-easyui的布局layout写后台管理页面的代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

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

- Author -

谁偷了我的小松鼠

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery，JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 #jQuery
动静分离(1) 生成缩略图(1) Telnet(1) IIS(7) 负载均衡(6) https(7) Windows server 2016(6) 防盗链(1) Windows server 2019(5) http(6)
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
Javascript Select操作大集合
2009/05/26 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
python itchat实现微信自动回复的示例代码
2017/08/14 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
TF-IDF与余弦相似性的应用（二） 找出相似文章
2017/12/21 Python
Python 函数基础知识汇总
2018/03/09 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
英国领先的珍珠首饰品牌：Orchira
2016/09/11 全球购物
美国椅子和沙发制造商：La-Z-Boy
2020/10/25 全球购物
巴西24小时在线药房：Drogasil
2020/06/20 全球购物
EJB包括（SessionBean,EntityBean）说出他们的生命周期，及如何管理事务的？
2013/02/17 面试题
白酒市场开发计划书
2014/01/09 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
争论的故事教学反思
2014/02/06 职场文书
体现团队精神的口号
2014/06/06 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
承诺书模板大全
2015/05/04 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL