easyUI开发包：
基础入门（更丰富的界面构建请查看API）
layout页面布局：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layout.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 使用div描述各个区域 -->
<div title="BOS物流管理系统" data-options="region:'north'" style="height: 100px">北部</div>
<div title="功能列表" data-options="region:'west'" style="width: 250px">西部</div>
<div data-options="region:'center'">中部</div>
<div data-options="region:'east'" style="width: 200px">东部</div>
<div data-options="region:'south'" style="height: 50px">南部</div>
</body>
</html>
accordion折叠面板：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layout.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 使用div描述各个区域 -->
<div title="XXXXXXXXXX" data-options="region:'north'" style="height: 100px">北部</div>
<div title="功能列表" data-options="region:'west'" style="width: 220px">
<!-- ============================================================================== -->
<!--
定义折叠面板
fit：true 面板自适应,即填充父容器
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 定义子DIV 表示每个面板 -->
<div title="功能一">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
<div title="功能二">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
<div title="功能三">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
</div>
<!-- ============================================================================== -->
</div>
<div data-options="region:'center'">中部</div>
<div data-options="region:'east'" style="width: 200px">东部</div>
<div data-options="region:'south'" style="height: 50px">南部</div>
</body>
</html>
页面效果：
tabs选项卡：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layout.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/myjs/tabs.js"></script>
</head>
<body class="easyui-layout">
<!-- 使用div描述各个区域 -->
<div title="XXXXXXXXXX" data-options="region:'north'" style="height: 100px">北部</div>
<div title="功能列表" data-options="region:'west'" style="width: 220px">
<!--
定义折叠面板
fit：true 面板自适应,即填充父容器
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 定义子DIV 表示每个面板 -->
<div title="功能一">
<br/>
<a id="addTabs" class="easyui-linkbutton" data-options="iconCls:'icon-add'">add tabs</a>
</div>
<div title="功能二">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
<div title="功能三">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- ============================================================================== -->
<!-- 定义一个选项卡面板 -->
<div id="tabs" class="easyui-tabs" data-options="fit:true">
<!-- 定义子DIV 表示每个选项卡 -->
<div title="选项卡一" data-options="closable:true">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
<div title="选项卡二">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
<div title="选项卡三">
XXX--<br/>
YYY--<br/>
ZZZ--<br/>
</div>
</div>
<!-- ============================================================================== -->
</div>
<div data-options="region:'east'" style="width: 200px">东部</div>
<div data-options="region:'south'" style="height: 50px">南部</div>
</body>
</html>
03_tabs页面相关JS代码：
$(function(){
/**
* 给addTabs按钮添加 单击事件
*/
$("#addTabs").click(function(){
//alert(11);
//判断'新增tabs'该选项卡是否存在，存在返回true，不存在返回false
var flag = $("#tabs").tabs('exists','新增tabs');
//alert(flag);
if(flag){//如果'新增tabs'已经存在那么就选中该选项卡
$("#tabs").tabs('select','新增tabs');
}else{//否则就新增该选项卡
$("#tabs").tabs('add',{
title: '新增tabs',
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
});
});
页面效果：
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
