【连载】研究EasyUI系统

　　Accordion组件是easyui框架中的布局组件之一，它提供了多个可展开/折叠的面板。Accordion经常用作页面的导航菜单。我们先通过制作一个导航菜单来认识一下Accordion。
　　
　　图中左侧便是通过accordion组件构建的导航菜单，右侧是用panel构建的内容显示页面。点击左侧不同的菜单，右侧panel将会加载对应的页面，显示不同内容。
　　我们通过代码来研究一下accordion组件用法。示例代码主要包含两个页面，分别为accordionDemo.php和cby.php，前者包含导航菜单和内容显示页框架，后者是具体的内容页面。
　　
accordionDemo.php

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><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.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><title>accordionDemo</title><style>a {text-decoration:none;font-size: 13px;color:black}.nav-left {float:left;width:200px;height:400px;margin-right: 20px;}.nav-item {padding: 10px;height: 328px;border: none;}.content {border-radius: 5px;}.contianer {width:100%;}</style><script>function openPage(page) {$("#content_panel").panel("refresh",page);}</script></head><body><div class="container"><!-- 左侧导航由accordion构建的导航菜单 --><div id="nav_menu" class="easyui-accordion nav-left"><div title="灵长类" class="nav-item"><table><tr><td><img src="data:image/nav_monkey.png" alt="" /></td><td><a href="javascript:void(0);" onclick="openPage('cby.php')">长臂猿</a></td></tr><tr><td><img src="data:image/nav_monkey.png" alt="" /></td><td><a href="#">猩猩</a></td></tr><tr><td><img src="data:image/nav_monkey.png" alt="" /></td><td><a href="#">卷尾猴</a></td></tr></table> </div><div title="龟类" class="nav-item"><table><tr><td><img src="data:image/nav_turtle.png" alt="" /></td><td><a href="#">草龟</a></td></tr><tr><td><img src="data:image/nav_turtle.png" alt="" /></td><td><a href="#">巴西龟</a></td></tr><tr><td><img src="data:image/nav_turtle.png" alt="" /></td><td><a href="#">金钱龟</a></td></tr></table> </div></div><!-- 右侧由Panel构建的内容显示页面 --><div id="content_panel" class="easyui-panel content" data-options="width:500,height:400"></div></div></body>
</html>

cby.php

<html><head><meta charset="UTF-8"><title>长臂猿</title><style>.logo {margin: 10px;width:80px;height:120px;float:left;}</style></head><body><div class="contianer"><img class="logo" src="data:image/cby.jpg"/><p style="margin:20px">长臂猿（学名：Hylobatidae）：是灵长目一科动物的通称，有4属16种。因臂特别长而得名。…………</p></div></body>
</html>

　　accordion.php构建了id为nav_menu的accordion组件，在nav_menu内部，每个子<div>就是一个子面板，代码中共构造了“灵长类”和“龟类”两个子面板。每个子面板中又有一个<table>，用来构建带图标的菜单链接。点击代码中的菜单链接，将调用openPage方法，openPage方法使用panel组件中的refresh方法，将对应的内容页（cby.php）加载到panel中显示（关于panel组件我们将另外专门说明）。
　　接下去介绍已给accordion的属性。由于accordion组件依赖于panel，因此这个组件有两个概念上的属性，其一是“容器(container)属性”，其二是“面板(panel)属性”。容器是指外围整体的框架，也就是整个accordion本身，包含了各个面板。面板则是指在容器中的各功能块，如“灵长类”或“龟类”等。
　　从代码中也能看出容器和面板的逻辑关系，id为nav_menu的div元素便是容器，它包含了灵长类、龟类两个面板，每个面板都是一个div元素。还有三个超链接，这三个超链接将分别显示在三个面板中。

容器属性

属性名称	属性值类型	属性默认值	描述
width	数值	auto	容器宽度。
height	数值	auto	容器高度。
border	布尔值	true	是否显示容器边框。
fit	布尔值	false	容器是否填充它的父组件。
animate	布尔值	true	是否在折叠或者展开时显示动画效果。
multiple	布尔值	false	是否允许同时展开多个面板。 1.3.5及以上版本支持。
selected	数值	0	初始化时选中的面板索引，索引从0开始。 1.3.5及以上版本支持。

　　容器属性非常简单，无需过多讲述。
　　accordion面板属性继承自panel组件，下述只是accordion独有的属性。
　　
扩展的panel属性

属性名称	属性值类型	属性默认值	描述
selected	布尔值	false	面板是否为展开状态。
collapsible	布尔值	true	是否允许面板显示折叠按钮。

accordion组件方法

方法名称	参数	描述
options	无	返回所有属性。
panels	无	返回所有面板。
resize	无	重置组件大小。
getSelected	无	返回第一个选中的面板。
getSelections	无	返回所有选中的面板。1.3.5及以上版本支持。
getPanel	which	返回指定的面板。参数which既可以是面板的标题（字符串），也可以是面板的索引（数字）。
getPanelIndex	panel	返回指定面板的索引，参数panel是面板对象。 1.3及以上版本支持。
select	which	选中指定的面板。参数参考”getPanel”方法。
unselect	which	取消选中指定的面板。参数参考”getPanel”方法。 1.3.5及以上版本支持。
add	options	新增面板。参数options是包含了面板各数据的json。
remove	which	删除指定的面板。参数参考“getPanel”方法。

　　有些比较简单的方法就不再多说。
　　getSelected返回第一个选中的面板，而getSelections返回了所有选中的面板。

<script>var p1 = $('#nav_menu').accordion('getSelected');p1.panel('collapse');var p2 = $('nav_menu').accordion('getSelections');for(var i=0;i<p2.length;i++) {p2[i].panel('collapse');}
</script>

　　p1是通过“getSelected” 方法返回选中的面板，我们通过“collapse”方法将这个面板折叠；p2则是通过“getSelections”方法返回的一组选中面板，使用循环将这些面板全部折叠。

<script>/* 根据索引号获取对应面板*/var p = $('#nav_menu').accordion('getPanel', 1);/* 根据标题获取对应面板*/p = $('#nav_menu').accordion('getPanel', '系统设置');var index = $('#nav_menu').accordion('getPanelIndex', p2);alert(index)
</script>

　　上例代码展示了“getPanel”和“getPanelIndex”两种方法的用法。getPanel参数which既可以是索引号，也可以是字符串形式的标题。
　　再来看一下如何增加一个面板。

<script>var options = {title:'我是新来的面板',content:'新来面板的内容',selected:false}$("#nav_menu").accordion("add", options);
</script>

　　新增一个面板时需要定义相关的面板参数，这些参数以JSON形式供“add”方法调用。
　　options中的各属性可以参见“panel”组件的属性，需要说明一下，如果“selected”属性为true（默认为true），新增的面板将处于选中状态。
　　
accordion组件事件

事件名称	参数	描述
onSelect	title,index	面板选中时触发。参数title为面板的标题，index为面板索引。
onUnselect	title,index	面板取消选中时触发。参数同上。1.3.5及以上版本支持。
onAdd	title,index	新增面板时触发。参数同上。
onBeforeRemove	title,index	删除面板前触发，如果返回false，则不删除。参数同上。
onRemove	title,index	删除面板后触发。参数同上。

　　事件都比较容易理解，简单举一个例子，说明事件的用法：

<button onclick="delAccordion();">删除accordion</button>
<script>$("#nav_menu").accordion({onBeforeRemove:function(title, index) {var r = confirm("确认删除"+title+"(索引号:"+index+")吗？");return r;}});function delAccordion() {$("#nav_menu").accordion("remove", 1);}
</script>

　　上例代码使用了onBeforeRemove事件，它在“删除面板事件”发生前被触发。用户确认删除后，索引号为1的面板被删除。

【连载】研究EasyUI系统— Accordion组件相关推荐

【连载】研究EasyUI系统— Resizable组件
resizable组件提供了一种可拉伸.缩小放大的功能,很多桌面应用程序,比如图片查看器.word文档等,用户可以通过鼠标将程序拉大拉小,resizable组件则在web页面上为各类元素提供了类似的功 ...
有关Accordion组件的研究——Silverlight学习笔记[27]
Accordion组件在开发中常用于信息的分类显示.本文将为大家介绍该组件的特性以及通过一个实例讲述该组件的基本运用. 组件所在命名控件: System.Windows.Controls 组件常用方法 ...
Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
软件的接口设计图_基于GJB 5000A的软件配置管理研究与系统实现
郝延刚 (海军装备部驻南京地区第二军事代表室,南京 211153) 摘要:采用Spring.MyBatis以及Activiti等技术,设计了符合GJB 5000A软件配置管理要求的软件配置管理系统. ...
[附源码]JAVA毕业设计人才库构建研究（系统+LW）
[附源码]JAVA毕业设计人才库构建研究(系统+LW) 项目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
centos5.6 (64bit)编译安装vsftpd-2.3.4的配置(两种用户登录)[连载之电子商务系统架构]...
centos5.6 (64bit)编译安装vsftpd-2.3.4的配置(两种用户登录) 出处:http://jimmyli.blog.51cto.com/我站在巨人肩膀上Jimmy Li 作者:Ji ...
构建百万访问量电子商务网站之LVS负载均衡(前端四层负载均衡器)[连载之电子商务系统架构]...
构建百万访问量电子商务网站之LVS负载均衡(前端四层负载均衡器)[连载之电子商务系统架构] 版本:V1 出处:http://jimmyli.blog.51cto.com/我站在巨人肩膀上Jimmy L ...
对 Accordion 组件使用样式
对 Accordion 组件使用样式您可以设置样式属性,以便更改 Accordion 组件的边框和背景的外观. Accordion 组件使用下列样式: 样式主题说明 themeColor 光晕 ...

【连载】研究EasyUI系统— Accordion组件

【连载】研究EasyUI系统— Accordion组件相关推荐

最新文章

热门文章