关闭

easyUI的基本搭建与layout布局

标签: easyUI布局layout控件easyUI的搭建
5705人阅读 评论(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 该属性表示这个选项卡可以关闭(提供关闭按钮)
效果:



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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42174次
    • 积分:544
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:2篇
    • 译文:0篇
    • 评论:12条
    文章分类