编程 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代替iframe的方法(详解)

Apr 12 jQuery

Jquery中attr与prop的区别详解

May 27 jQuery

详谈表单格式化插件jquery.serializeJSON

Jun 23 jQuery

jQuery实现键盘回车搜索功能

Jul 25 jQuery

jQuery 实时保存页面动态添加的数据的示例

Aug 14 jQuery

jQuery 1.9版本以上的浏览器判断方法代码分享

Aug 28 jQuery

jQuery.Sumoselect插件实现下拉复选框效果

Nov 09 jQuery

jQuery与vue实现拖动验证码功能

Jan 30 jQuery

jQuery实现的点击显示隐藏下拉菜单功能完整示例

May 17 jQuery

jQuery实现弹出层效果

Dec 10 jQuery

jquery实现手风琴案例

May 04 jQuery

jQuery实现手风琴特效

Jan 11 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

You might like

《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开！

2020/03/06 日漫

php使用timthumb生成缩略图的方法

2016/01/22 PHP

PHP实现的通过参数生成MYSQL语句类完整实例

2016/04/11 PHP

PHP Ajax实现无刷新附件上传

2016/08/17 PHP

RR vs IO BO3 第二场2.13

2021/03/10 DOTA

音乐播放用的的几个函数

2006/09/07 Javascript

IE浏览器打印的页眉页脚设置解决方法

2009/12/08 Javascript

深入理解JavaScript系列（15）函数（Functions）

2012/04/12 Javascript

jQuery 过滤not()与filter()实例代码

2012/05/10 Javascript

基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

2013/05/07 Javascript

可简单避免的三个JS发布错误的详细介绍

2013/08/02 Javascript

刷新页面的几种方法小结(JS,ASP.NET)

2014/01/07 Javascript

IE中JS跳转丢失referrer问题的2个解决方法

2014/07/18 Javascript

jQuery支持动态参数将函数绑定到事件上的方法

2015/03/17 Javascript

动态生成的DOM不会触发onclick事件的原因及解决方法

2016/08/06 Javascript

javascript构造函数以及原型对象的理解

2017/01/13 Javascript

如何通过非数字与字符的方式实现PHP WebShell详解

2017/07/02 Javascript

[04:13]2014DOTA2国际邀请赛专访DC目前形势不容乐观

2014/07/12 DOTA

python 域名分析工具实现代码

2009/07/15 Python

python绘图库Matplotlib的安装

2014/07/03 Python

Python动态加载模块的3种方法

2014/11/22 Python

Python随机生成一个6位的验证码代码分享

2015/03/24 Python

Python使用字典的嵌套功能详解

2019/02/27 Python

如何利用Python模拟GitHub登录详解

2019/07/15 Python

pytorch 输出中间层特征的实例

2019/08/17 Python

深入浅析Python 中的sklearn模型选择

2019/10/12 Python

Python图像处理库PIL中图像格式转换的实现

2020/02/26 Python

Python中bisect的用法及示例详解

2020/07/20 Python

python查询MySQL将数据写入Excel

2020/10/29 Python

关于django python manage.py startapp 应用名出错异常原因解析

2020/12/15 Python

CSS3等相关属性制作分页导航实现代码

2012/12/24 HTML / CSS

HTML5 Video/Audio播放本地文件示例介绍

2013/11/18 HTML / CSS

报社实习生自荐信

2014/01/24 职场文书

课文《燕子》教学反思

2016/02/17 职场文书

建国70周年的心得体会（2篇）

2019/09/20 职场文书

微软Win11 全新照片应用面向 Dev预览版推出新版本上手体验图集

2022/09/23 数码科技