easyui自学模板代码
index.jsp源码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<!--导入easyui资源文件-->
<link rel="stylesheet" type="text/css" href="${ctx }/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/static/easyui/themes/icon.css">
<script type="text/javascript" src="${ctx }/static/easyui/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="${ctx }/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx }/static/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!--north导航部分start-->
<div data-options="region:'north',border:false" class="easyui-layout" style="height:50px;background:#B3DFDA;padding:4px;">
<div class="easyui-layout">
<div style="float: left;"><h2 style="margin-top: 6px;padding-left: 10px;">EasyUI 后台管理</h2></div>
<div style="float: right;" id="nav">
<ul style="list-style: none;">
<li style="float: left;">欢迎你，<strong>超级管理员</strong></li>
<li style="float: left;margin-left: 10px;">
<strong><a href="#" style="text-decoration: none;color:#436EEE;">退出</a></strong>
</li>
</ul>
</div>
</div>
</div><!--north导航部分end-->
<!--west（西）侧边导航部分start-->
<div data-options="region:'west',split:true,title:'主菜单'" style="width:150px;padding:2px;">
<div class="easyui-accordion" data-options="fit:true,border:true">
<div title="客户管理" data-options="iconCls:'icon-search',selected:false" style="padding:10px;">
<ul class="easyui-tree">
<li><a href="javascript:;" onclick="addTabByTitle(this)">客户列表</a></li>
<li><a href="javascript:;" onclick="addTabByTitle(this)">客户添加</a></li>
</ul>
</div>
<div title="系统设置" data-options="iconCls:'icon-ok'" style="padding:10px;">
<ul class="easyui-tree">
<li><a href="#">客户列表</a></li>
<li><a href="">客户列表</a></li>
</ul>
</div>
<div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px">
<ul class="easyui-tree">
<li><a href="">客户列表</a></li>
</ul>
</div>
</div>
</div><!--west（西）侧边导航部分end-->
<!--south底部部分start-->
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">
<div class="easyui-layout" style="text-align: center;line-height: 27px;">
Copyright ©2019-2099 easyui.admin v3.1 All Rights Reserved.
本后台系统由easyui提供前端技术支持
</div>
</div><!--south底部部分end-->
<!--center主要部分start-->
<div data-options="region:'center',title:'控制台'">
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true" style="">
<div title="起始页" data-options="fit:true,plain:true,selected:true,border:true" style="padding:5px;"></div>
<div title="客户列表" data-options="href:'${ctx }/customer/toCustList.action',closable:true" style="padding:10px;"></div>
</div>
</div><!--center主要部分end-->
</body>
<script type="text/javascript">
function addTabByTitle(obj){
var title = $(obj).html();
alert(title);
$('#tt').tabs('add',{
title: title,
content: '<div style="padding:10px"></div>',
closable: true
});
}
</script>
</html>
如下
温馨提示：若看不到图片，请换Google浏览器试试
