初始easyUI
Posted woshuaile
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初始easyUI相关的知识，希望对你有一定的参考价值。
1 easyUI布局
<%@ 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">
<!-- 引入JQuery -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/default/easyui.css"
type="text/css" />
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/icon.css"
type="text/css" />
<title>easy使用</title>
</head>
<body>
<!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
<div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div 北 -->
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div 南-->
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div 东-->
<div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板尽量不要删除div 中 -->
<div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;"></div>
</div>
</body>
</html>
2嵌套布局
<%@ 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">
<!-- 引入JQuery -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/default/easyui.css"
type="text/css" />
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/icon.css"
type="text/css" />
<title>easy使用</title>
</head>
<body>
<!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
<div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div 北 -->
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div 南-->
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div 东-->
<div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;">
<!-- 嵌套布局 -->
<div class="easyui-layout" data-options="fit:true">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
<div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;"></div>
</div>
</div>
</div>
</body>
</html>
以上是关于初始easyUI的主要内容，如果未能解决你的问题，请参考以下文章
常见的前端框架都有哪些（EasyUI/MiniUI/jQueryUI/Vue.js/）
常见的前端框架都有哪些（EasyUI/MiniUI/jQueryUI/Vue.js/）