easyUI的基本搭建与layout布局

原创 2013年12月02日 12:29:06


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 该属性表示这个选项卡可以关闭(提供关闭按钮)
效果:



注:该选项卡为固定的,动态选项卡请参照下一个blog,ztree的菜单显示与动态选项卡


EasyUI学习总结(二)——EasyUI布局

一、EasyUI布局介绍   easyUI布局容器包括东、西、南、北、中五个区域,其中中心面板是必须的,而东、西、南、北这四个面板是可选的,如果布局里面不需要东、西、南、北这四个面板,那么可以把相应...

easyui之布局管理easyui-layout的使用

初学easyui,之前项目中也没使用过这个框架,但是和大多数框架

EasyUI -- Layout(布局)

第一章  介绍                    EasyUI -- Layout(布局)将布局容器分成了5个区域,分别是:east(东)、west(西)、south(南)、north(北)和c...

(札记)EasyUI Layout 布局管理

界面使用html的标签及css样式配合easyui编写 组件的动作使用jquery来控制 折叠面板: $('#cc').layout('collapse','west'); 代码的实现: ...
  • wzs298
  • wzs298
  • 2014年12月29日 11:57
  • 2852

easyUI中的layout

Layout 通过$.fn.layout.defaults可以重写Layout. layout是一个具有五个区域的容器。只有中间区域面板是必须的,其余的都是边界面板。每一个边界面板都可以通过拖动它的...

EasyUI之Layout布局

Layout布局,是按照上北,下南,左西右东,center居中的布局方式。主要属性:region设置布局的方向,style设置样式,title设置标题 依赖 panel resizable 用法示...

关于EasyUI的Layout总结

1、layout以html标签方式建立的
  • foart
  • foart
  • 2013年06月19日 17:46
  • 17483

easyui主界面布局easyui-layout用法一例

easyui主界面布局easyui-layout用法一例 例一:              style="padding:0 0 0 0; overflow:hidden; height:...
  • hsg77
  • hsg77
  • 2016年06月03日 14:57
  • 4973

easyui-layout与easyui-datagrid完整页面代码

var columns = [ [ { field : 'operation', title : 'operation', width : 68, align :...

jsp+easyui+DataGrid 例子

导入js和css
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyUI的基本搭建与layout布局
举报原因:
原因补充:

(最多只允许输入30个字)