easyUI的基本搭建与layout布局

最新推荐文章于 2024-06-26 15:25:06 发布

回锅菜鸟

最新推荐文章于 2024-06-26 15:25:06 发布

阅读量8.3k

点赞数 1

分类专栏： easyUI 文章标签： easyUI 布局 layout 控件 easyUI的搭建

本文链接：https://blog.csdn.net/u012814041/article/details/17060829

版权

easyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

easyUI的开发包 EasyUI-API+1.3.2.chm中文帮助文档

一、easyUI开发包详解

easyUI开发包目录结构介绍

二、easyUI使用前的准备

导入开发包中的：

jquery核心js， jquery-1.8.0.min.js

导入easyUI的js， jquery.easyui.min.js == easyloader.js +plugins/*

导入主题css (内置五种主题 ) jquery-easyui-1.3.2\themes\default/easyui.css

导入图标css jquery-easyui-1.3.2\themes\icon.css

也就是在jsp中以如下格式配置（该格式可以在EasyUI-API+1.3.2.chm的首页中进行查找）

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> 

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//最好加上这个，国际化，否则默认为英文
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

3.使用easyUI提供的layout完成页面布局

使用layout简单布局：分为东南西北中五个部分，其中‘中’不可少

<body class="easyui-layout">
	<div region="north" title="北国风光" style="height:100px;" >北部</div><!--这种方式会有黄色警告，不如下面的方式好-->
	<div data-options="region:'south',title:'南海观音'" style="height: 80px;">南部</div>
	<div data-options="region:'center'">中部</div>
	<div data-options="region:'west',title:'西方世界'" style="width:200px;" >西部</div>
	<div data-options="region:'east',title:'东土大唐'" style="width:200px;" >东部</div>
</body>

分析：

data-options=""一般用于存放easyUI属性

class一般用于存放easyUI控件
效果如下：

4.使用accordion完成折叠面板效果，一般用于西部区域菜单显示

	<div data-options="region:'west',title:'西方世界'" style="width:200px;" >
		<!-- 折叠面板 -->
		<div class="easyui-accordion" data-options="fit:true" >
			<!-- 每个div都是一个面板 -->
			<div data-options="title:'诸神',iconCls:'icon-help'" >宙斯</div>
			<div data-options="title:'诸国'" >冰岛</div>
			<div data-options="title:'遗迹'" >金字塔</div>
		</div>
	</div>

分析：fit=true表示自动填充效果(不写会导致折叠效果十分难看)；iconCls:'icon-help'显示标题图标，来自icon.css

效果如下：

5.使用tabs完成选项卡布局，一般用于中部选项卡

<!-- 这是一个选项卡布局 -->	

<div data-options="region:'center'">

    <div class="easyui-tabs" data-options="fit:true"><!-- 每一个div 就是一个选项卡 -->
       <div data-options="title:'选项卡一',iconCls:'icon-ok'">内容一</div>
       <div data-options="title:'选项卡二',closable:true">内容二</div>
       <div data-options="title:'选项卡三'">内容三</div>
   </div>
<div>

分析：closable:true 该属性表示这个选项卡可以关闭（提供关闭按钮）
效果：