首页
所有分类
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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现手风琴案例
May 04 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现推拉门效果
Oct 19 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
Windows Server 2022(3) Hive(5) HttpClient(1) ip2region(1) RestTemplate(1) dataBinding(1) Quartz(1) 反射(1) NTP(1) 注解(1)
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
彪马日本官网：PUMA日本
2019/01/31 全球购物
JoJo Maman Bébé爱尔兰官网：英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
String是最基本的数据类型吗？
2013/06/13 面试题
军训教官感言
2014/03/02 职场文书
开工典礼策划方案
2014/05/23 职场文书
生物科学专业自荐书
2014/06/20 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书