首页
所有分类
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中的deferred使用方法
Mar 27 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery中元素选择器（element）简单用法示例
May 14 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jquery实现拖拽添加元素功能
Dec 01 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) pycryto(1) Anaconda(2) 数据加密(1) 遍历文件夹(1) python-pcl(1) 有序排列(1) key(1) 公共键(1) shell脚本(1)
You might like
php读取msn上的用户信息类
2008/12/05 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JS解析XML的实现代码
2009/11/12 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
详解Vue项目引入CreateJS的方法（亲测可用）
2019/05/30 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
老人祝寿主持词
2014/03/28 职场文书
超市创业计划书
2014/04/24 职场文书
党性分析材料格式
2014/12/19 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
暂住证证明
2015/06/19 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL