easyUI快速入门第三讲——easyUI中的accordion（分类）组件

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

李阿昀

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

阅读量1k

点赞数 1

分类专栏： easyUI快速入门学习

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/102798180

版权

本文介绍了easyUI中的accordion组件，它提供多面板展示，每次只显示一个。讲解了accordion的基本概念，如何通过href属性加载内容，以及如何设置默认选中面板。还通过实例演示了如何创建和使用accordion组件，包括创建03-accordion.html页面，展示了组件效果，并探讨了与layout组件结合使用的方式。

摘要由CSDN通过智能技术生成

accordion（分类）组件的概述

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的href属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
在这里插入图片描述
可以看到accordion（分类）组件有点类似手风琴的效果。

accordion（分类）组件的使用

首先，在所在项目的WebContent目录下新建一个03-accordion目录，并在该目录下新建一个03-accordion.html页面。
在这里插入图片描述
从以上HTML页面中，可以发现使用到了一些分类面板的属性，下表就列出了分类面板的属性。

然后，在Google Chrome浏览器中访问该页面，你就能看到如下图所示的效果了。

接着，我们可以尝试使用accordion（分类）组件和前一讲中的layout（布局）组件来布局一个网站的后台管理页面。在所在项目的WebContent目录下新建一个index.html页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src