easyui之accordion

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

xclsky1120

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

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yumolan4325/article/details/78833303

本文介绍了如何使用 EasyUI 的 Accordion 控件创建可折叠面板布局。Accordion 是一种用于显示多个可折叠面板的组件，每次只能展开其中一个面板。文章详细说明了引入必要的 CSS 和 JavaScript 文件的方法，展示了如何设置 Accordion 的基本结构，并提供了设置默认展开面板的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 accordion是类似与抽屉一样。有多个抽屉，但是每次只能打开一个抽屉。需要的引用的样式为easyui-accordion。
如：<div id="aa" class="easyui-accordion" style="width:400px;height:300px">
<div title="aa" >
11111
</div>
<div title="bb">
2222
</div>
<div title="cc">
3333
</div>
</div>

2 要想使用accordion，必须先引用相对应的easyui的css和js。
如：<link rel="stylesheet" type="text/css" href="./common/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./common/easyui/themes/icon.css">

<script type="text/javascript" language="javascript" src="./common/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="./common/easyui/jquery.easyui.min.js"></script>

3 每个抽屉作为一个小的div。title不同即可。这些小的抽屉都在一个div内部。该div需要引用easyui-accordion样式。需要有style属性
如：<div id="aa" class="easyui-accordion" style="width:400px;height:300px">
<div title="aa" > 每一个小的抽屉 title为aa
11111
</div>
<div title="bb"> 每一个小的抽屉 title为bb
2222
</div>
<div title="cc"> 每一个小的抽屉 title为cc
3333
</div>
</div>

4 如果想要哪个抽屉处于打开状态，就添加selected="true"即可。
如：<div id="aa" class="easyui-accordion" style="width:400px;height:300px">
<div title="aaa" >
11111
</div>
<div title="bb" selected="true"> 添加了selected属性，值为true。即处于打开状态。
2222
</div>
<div title="cc">
3333
</div>
</div>

总结：accordion是easyui的一个样式。可以包含多个抽屉。但每时只能让一个抽屉处于打开状态。