使用jquery-easyui的布局layout寫后臺管理頁面的代碼詳解
更新時間：2019年06月19日 15:47:42 作者：誰偷了我的小松鼠
這篇文章主要介紹了使用jquery-easyui的布局layout寫后臺管理頁面的代碼詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
先在官網(wǎng)下載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開源博客系統(tǒng)后臺管理頁面-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="系統(tǒng)管理" 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;">刷新系統(tǒng)緩存</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知識分享網(wǎng) 版權所有
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的使用jquery-easyui的布局layout寫后臺管理頁面的代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要介紹了jQuery獲取動態(tài)添加元素的方法詳解,jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Jquery 實現(xiàn)彈出層插件,包括遮罩層、插件參數(shù)、關閉動作、拖拽效果等，需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery實現(xiàn)的導航固定效果,需要的朋友可以參考下2014-04-04
jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)
jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)，讓列表內(nèi)容不再枯燥2012-06-06
jquery取子節(jié)點及當前節(jié)點屬性值的方法
這篇文章主要介紹了jquery取子節(jié)點及當前節(jié)點屬性值的方法，比較實用，需要的朋友可以參考下2014-09-09
JQuery和PHP結(jié)合實現(xiàn)動態(tài)進度條上傳顯示
本文給大家介紹JQuery和PHP結(jié)合實現(xiàn)動態(tài)進度條上傳顯示功能，本文分步驟給大家介紹的非常詳細，感興趣的朋友一起看看吧2016-11-11
jquery append 動態(tài)添加的元素事件on 不起作用的解決方案
這篇文章主要介紹了jquery append 動態(tài)添加的元素事件on 不起作用的解決方案,需要的朋友可以參考下2015-07-07
本文給大家分享一段代碼給大家介紹jquery刪除當前節(jié)點元素的方法，代碼簡單易懂，非常不錯，需要的朋友參考下吧2016-12-12
jquery ajax 同步異步的執(zhí)行示例代碼，需要的朋友可以參考下。2010-06-06
原生js實現(xiàn)addclass,removeclass,toggleclasss實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)addclass,removeclass,toggleclasss實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起 小編過來看看吧2016-11-11