jQuery easyUI布局（Layout）与手风琴（Accordion）

十大队伍

于 2022-07-23 19:32:04 发布

阅读量660

点赞数 2

文章标签： easyui jquery 前端

原文链接：https://www.jeasyui.net/

版权

上期讲了easyUI最重要的组件：面板，这期讲讲布局和手风琴

运用jQuery easyUI是需要引用文件的，详见上一期

布局（layout）

效果图如下：

我们从上图可以看到，整个布局分为五个部分，分别为上，下，左，右，中，其中，上，下，左右是可以不要的，中部是必须的，我们先来看看上图中的源代码

<body>
	<h2>Basic Layout</h2>
	<p>The layout contains north,south,west,east and center regions.</p>
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:700px;height:350px;">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
</body>

可以看到，这个代码一共有5个div，分别为：北，南，西，东，中间，其中：

north 区域可以用来显示网站的标语。
south 区域可以用来显示版权以及一些说明。
west 区域可以用来显示导航菜单。
east 区域可以用来显示一些推广的项目。
center 区域可以用来显示主要的内容。

我们可以试试改一下代码：

<body>
		<div class="easyui-layout" style="width:1600px;height:672px;">
		<div data-options="region:'west',split:true" title="Menu" style="width:300px;"></div>
		<div data-options="region:'center',title:'home',iconCls:'icon-ok'"></div>
	</body>

他就变成这样了：

所以代码可以根据自己的需求进行修改，但最终效果还是一样的

我们可以再改一下让它更符合我们的要求：

<body>
		<div class="easyui-layout" style="width:1600px;height:672px;">
			<div data-options="region:'north'" style="height:50px">
				<h1>XX后台管理系统</h1>
			</div>
		    <div data-options="region:'west',split:true" title="导航菜单" style="width:150px;"></div>
		    <div data-options="region:'center',title:'主界面'"></div>
	</body>

效果图就变成这样了：

在整个页面上创建布局（Layout）

<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',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>

我只是在body中添加了一个class就可以使他布满整个屏幕：

看看它的用法：

布局选项（Layout Options）

名称	类型	描述	默认值
fit	boolean	当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。	false

区域面板选项（Region Panel Options）

区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：

名称	类型	描述	默认值
title	string	布局面板（layout panel）的标题文本。	null
region	string	定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border	boolean	当设置为 true 时，就显示布局面板（layout panel）的边框。	true
split	boolean	当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。	false
iconCls	string	在面板（panel）头部显示一个图标的 CSS class。	null
href	string	从远程站点加载数据的 URL 。	null
collapsible	boolean	定义是否显示可折叠按钮。	true
minWidth	number	面板（panel）最小宽度。	10
minHeight	number	面板（panel）最小高度。	10
maxWidth	number	面板（panel）最大宽度。	10000
maxHeight	number	面板（panel）最大高度。	10000

这个是运用在div里的data-options里的

方法

名称	参数	描述
resize	none	设置布局（layout）的尺寸。
panel	region	返回指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'、'center'。
collapse	region	折叠指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
expand	region	展开指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
add	options	添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。
remove	region	移除指定的面板（panel），'region' 参数可能的值：'north'、'south'、'east'、'west'。

布局算是完成了，接下来我们开始制作

手风琴（Accordion）

人们也称它为“折叠面板”，它可以将一些数据折叠起来，使网页更加的简洁明了。

先上效果图：

来看看源代码：

<div data-options="region:'west',split:true" title="导航菜单" style="width:150px;">
		    	<div class="easyui-accordion" style="width:500px;height:300px;" data-options="fit:true">
		            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
			            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
			            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
		            </div>
		            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
			            <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 		
		            </div>
		            <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
			            <ul class="easyui-tree">
				           <li>
				  	            <span>Foods</span>
					            <ul>
					        	    <li>
							            <span>Fruits</span>
							            <ul>
							        	    <li>apple</li>
							        	    <li>orange</li>
						        	    </ul>
					        	    </li>
				        		    <li>
					        		    <span>Vegetables</span>
				        			    <ul>
				         				    <li>tomato</li>
								            <li>carrot</li>
								            <li>cabbage</li>
								            <li>potato</li>
								            <li>lettuce</li>
						        	    </ul>
			        			    </li>
			        		    </ul>
			        	    </li>
	        		    </ul>
        		    </div>
        	    </div>
		    </div>

解释一下这一段

<div class="easyui-accordion" style="width:500px;height:300px;" data-options="fit:true">
</div>

class和style都不用解释了，其中data-options里面的fit是自适应尺寸的意思(html原本是标记语言，不属于编程语言，那是因为在HTML里没有逻辑处理，这里就不一定了)

虽然自适应尺寸了，但边框依然超出了一点，我们只需要用border参数就可以了

<div class="easyui-accordion" style="width:500px;height:300px;" data-options="fit:true,border:false">

这个div是定义整个面板的，项目则用以下代码定义

<div title="#标题名称" data-options="#参数及其值" style="overflow:auto;padding:10px;">
    <!--项目内容-->
</div>

有多少个项目就写多少块。

注意：多个data-options参数之间要用英文状态下的逗号进行分隔。

这就是效果图，下面讲讲树形菜单:

一般的导航菜单只有一排，不过还是先讲讲树形菜单吧

<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
			            <ul class="easyui-tree">
				           <li>
				  	            <span>Foods</span>
					            <ul>
					        	    <li>
							            <span>Fruits</span>
							            <ul>
							        	    <li>apple</li>
							        	    <li>orange</li>
						        	    </ul>
					        	    </li>
				        		    <li>
					        		    <span>Vegetables</span>
				        			    <ul>
				         				    <li>tomato</li>
								            <li>carrot</li>
								            <li>cabbage</li>
								            <li>potato</li>
								            <li>lettuce</li>
						        	    </ul>
			        			    </li>
			        		    </ul>
			        	    </li>
	        		    </ul>
        		    </div>

看看效果图：

我们也可以设置项目的操作，只需要a标签

就可以：

但似乎不能正常地转到链接（我也不知道怎么解决）

要想转到链接，只能：

<div title="基本操作" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
		            <ul class="easyui-tree">
			            <span>
			                <li><a href="1" target="c" style="text-decoration: none"><font color="#000000">统计1</font></a></li>
			                <li><a href="book1.htm" target="c" style="text-decoration: none"><font color="#000000">统计2</font></a></li>
			                <li><a href="book1.htm" target="c" style="text-decoration: none"><font color="#000000">统计3</font></a></li>
			                <li><a href="book1.htm" target="c" style="text-decoration: none"><font color="#000000">统计4</font></a></li>
			                <li><a href="book1.htm" target="c" style="text-decoration: none"><font color="#000000">统计5</font></a></li>
			                <li><a href="book1.htm" target="c" style="text-decoration: none"><font color="#000000">统计6</font></a></li>
			            </span>
			        </ul>
		            </div>

效果就是这样的：

也可以根据自己的需要添加小图标：

<li><a href="1" target="c" style="text-decoration: none"><img border="0" src="/images/chart_curve.png" width="16" height="16"><font color="#000000">统计1</font></a></li>

效果就是这样的：

下面看看用法吧

刷新折叠面板（Accordion Panel）内容

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

容器选项

名称	类型	描述	默认值
width	number	折叠面板（Accordion）容器的宽度。	auto
height	number	折叠面板（Accordion）容器的高度。	auto
fit	boolean	设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。	false
border	boolean	定义是否显示边框。	true
animate	boolean	定义当展开或折叠面板（panel）时是否显示动画效果。	true
multiple	boolean	设置为 true，则可同时展开多个面板（panel）。该属性自版本 1.3.5 起可用。	false
selected	number	初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。	0

面板（Panel）选项

折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：

名称	类型	描述	默认值
selected	boolean	设置为 true 就展开面板（panel）。	false
collapsible	boolean	定义是否显示可折叠按钮。如果设置为 false，将不能通过点击来展开/折叠面板（panel）。	true

事件

名称	参数	描述
onSelect	title,index	当面板（panel）被选中时触发。
onUnselect	title,index	当面板（panel）未被选中时触发。该事件自版本 1.3.5 起可用。
onAdd	title,index	当添加一个新面板（panel）时触发。
onBeforeRemove	title,index	当移除一个面板（panel）之前触发，返回 false 就取消移除动作。
onRemove	title,index	当移除一个面板（panel）时触发。

方法

名称	参数	描述
options	none	返回折叠面板（accordion）的选项。
panels	none	获取全部的面板（panel）。
resize	none	调整折叠面板（accordion）的尺寸。
getSelected	none	获取第一个选中的面板（panel）。
getSelections	none	过去所有选中的面板（panel）。该方法自版本 1.3.5 起可用。
getPanel	which	获取指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
getPanelIndex	panel	获取指定的面板（panel）索引。该方法自版本 1.3 起可用。下面的实例显示如何获取选中的面板（panel）索引。 `var p = $('#aa').accordion('getSelected'); if (p){ var index = $('#aa').accordion('getPanelIndex', p); alert(index); }`
select	which	选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
unselect	which	未选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
add	options	添加一个新的面板（panel）。默认情况下，新添加的面板（panel）会被选中。如需添加一个未被选中的新面板（panel），请传递 'selected' 属性，并将其设置为 false。代码实例： `$('#aa').accordion('add', { title: 'New Title', content: 'New Content', selected: false });`
remove	which	移除指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。