EasyUI入门（Accordion，Layout）

最新推荐文章于 2023-05-16 16:46:59 发布

乔你那熊色

最新推荐文章于 2023-05-16 16:46:59 发布

阅读量975

点赞数

本文链接：https://blog.csdn.net/qq_41160264/article/details/83046485

版权

和以前一样，这个博文依旧是演示文档中的Demo。

一.Accordion(分类)

Accordion单词意为手风琴，可折叠的。分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

1.创建分类

通过标签创建分类，给<div/>标签添加一个名为'easyui-accordion'的类ID。

<%@ 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">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		//我们可以更改或修改面板的一些功能以后再重新创建它。
		$('#aa').accordion({    
		    animate:true  
		});
		//刷新分类面板内容。调用'getSelected'方法获取当前面板，此外我们还可以调用'refresh'方法重新载入新内容。
		var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
		if (pp){    
		    pp.panel('refresh','1.jsp');  // 调用'refresh'方法刷新 
		}
	});
</script>	
</head>
<body>
	<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
	    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
	          <h3 style="color:#0099FF;">小情歌</h3>   
	          <p>这是一首简单的小情歌</p>   
	          <p>这是一首简单的小情歌</p>  
	    </div>   
	    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
	        content2    
	    </div>   
	    <div title="Title3">   
            content3    
    </div>   
</div> 
</body>
</html>

页面效果：

我们需要通过一个div标签定义一个Accordion容器，然后通过子div标签来创建面板。其中<p/>标签自带换行，并且当多个div的selected标签为true时，最前面的标签会默认执行selected。

现在说一个语句：

var pp = $('#aa').accordion('getSelected'); // 获取选择的面板
if (pp){
pp.panel('refresh','1.jsp'); // 调用'refresh'方法刷新
}

在上篇博客末尾我认为.accordion和.panel是一个方法，现在觉得是错误的，现在看一下，我觉得 $('#aa').accordion的含义是说明这个id为aa的div标签现在是一个accordion对象，而getSelected是这个对象的一个方法，由于后面没有值，说明这个方法没有参数。而写.accordion和.panel的原因，我认为是可能是同名的方法比较多，通过这个就可以指明这个标签代表的或引用指向的到底是个什么对象。（自己理解的，如果觉得有错误望告知。。。）

二.Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

1.通过标签创建布局

为<div/>标签增加名为'easyui-layout'的类ID。

<%@ 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">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body>
	<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
	    <div data-options="region:'north',title:'上',split:false" style="height:100px;"></div>   
	    <div data-options="region:'south',title:'下',split:true" style="height:100px;"></div>   
	    <div data-options="region:'east',iconCls:'icon-reload',title:'右',split:false" style="width:100px;"></div>   
	    <div data-options="region:'west',title:'左',split:true" style="width:100px;"></div>   
	    <div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>   
	</div>  
</div> 
</body>
</html>

我们通过父div标签来作为easyui-layout容器，然后通过子div的region属性和style属性来指定div的位置或者height和width。其中split属性为true时，会显示分割条纹，如果设为false，则使区域间不产生无横的间隔。

页面效果图：

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">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>  
</html>

页面效果描述：

和上一个代码块不同的是，这次将body标签作为布局用的父标签，所以这次的布局会填满整个屏幕。

3. 创建嵌套布局

注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

<%@ 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">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'上'" style="height:100px"></div>   
    <div data-options="region:'center'">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
		    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
		    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
		    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
		    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
        </div>   
    </div>   
</body>  

</html>

上述代码中有一个fit属性，它的作用是自适应父容器的大小。简单的一个体现就是如果不设置为true，那么页面可以就不会被显示。

4. 通过ajax读取内容

布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术，用户可以使自己的布局页面显示的内容更多更快。

<%@ 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">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		//得到这个layout布局面板对象
		$('#cc').layout(); 
		//对这个面板布局对象进行操作。
		$('#cc').layout('collapse','west');
		//
		$('#cc').layout('add',{    
		    region: 'east',    
		    width: 180,    
		    title: 'West Title',    
		    split: true,    
		    tools: [{    
		        iconCls:'icon-add',    
		        handler:function(){
		        	alert('add')
		        }    
		    },{    
		        iconCls:'icon-remove',    
		        handler:function(){
		        	alert('remove')
		        }    
		    }]    
		});  

	});
</script>	
</head>
<body id="cc" class="easyui-layout">   
    <div data-options="region:'west',title:'左',href:'1.jsp',split:true" style="width:180px" ></div>   
    <div data-options="region:'center',title:'中',href:'1.jsp'" ></div>   
</body>  
</html>

页面效果图：

三.总结

在操作对象的时候，我们应该先用 " . " 的方式来指明操作的对象是一个什么对象,然后在调用这个对象的方法。

乔你那熊色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI入门（Accordion，Layout）

和以前一样，这个博文依旧是演示文档中的Demo。一.Accordion(分类) Accordion单词意为手风琴，可折叠的。分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的...
复制链接

扫一扫