首页
所有分类
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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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) 缓存(3) 内存(1) 逻辑架构(1) 事务(5) 性能优化(3) ipv6(1) 弱口令(1) 策略(1)
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python实现udp聊天窗口
2020/03/31 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
美国克罗格超市在线购物：Kroger
2019/06/21 全球购物
Wallis官网：英国女装零售商
2020/01/21 全球购物
金智子午JAVA面试题
2015/09/04 面试题
高级电工工作职责
2013/11/21 职场文书
员工教育培训协议书
2014/09/27 职场文书
导游词之镇江焦山
2019/11/21 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
Win11电源已接通但未充电怎么办？Win11电源已接通未充电的解决方法
2022/04/05 数码科技