首页
所有分类
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自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现简单全选框
Sep 13 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
AE3805(1) 天梯图(1) 德生1994(1) 纸巾盒(1) 爱尔兰购物网站(30) 香港购物网站(84) CPU(2) 德生G88(1) ICF-F10(1) SLi Minor 2020(63)
You might like
又一个php 分页类实现代码
2009/12/03 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
那些年我们错过的魔术方法（Magic Methods）
2014/01/14 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
js实现自定义路由
2017/02/04 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
2017/08/30 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
python解析xml文件实例分享
2013/12/04 Python
简单介绍Python中的RSS处理
2015/04/13 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python是什么 Python的用处
2020/05/26 Python
Python实现自动整理文件的脚本
2020/12/17 Python
荣耀商城：HIHONOR
2020/11/03 全球购物
Web Service面试题：如何搭建Axis2的开发环境
2012/06/20 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
法制宣传月活动总结
2014/04/29 职场文书
党支部活动策划方案
2014/08/18 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书