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

浅浅的花香味﹌ 2023-06-11 05:27 17阅读 0赞

# accordion（分类）组件的概述 #

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

# accordion（分类）组件的使用 #

首先，在所在项目的WebContent目录下新建一个03-accordion目录，并在该目录下新建一个03-accordion.html页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
从以上HTML页面中，可以发现使用到了一些分类面板的属性，下表就列出了分类面板的属性。  
![在这里插入图片描述][2019102913560471.png]  
然后，在Google Chrome浏览器中访问该页面，你就能看到如下图所示的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
接着，我们可以尝试使用accordion（分类）组件和前一讲中的layout（布局）组件来布局一个网站的后台管理页面。在所在项目的WebContent目录下新建一个index.html页面。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <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="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <style type="text/css"> /* 自己定义的样式，去掉超链接的下划线 */ .menuA { text-decoration:none; } </style>
    </head>
    <body>
    	
    	<div id="cc" class="easyui-layout" data-options="fit:true">   
    		
    	    <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>   
    	    <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
    	    	
    	    	<div id="aa" class="easyui-accordion" data-options="fit:true">   
    			    <div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">   
    			    	<a href="#" class="menuA">客户管理</a>
    			    </div>   
    			    <div title="联系人管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
    			    	<a href="#" class="menuA">联系人管理</a>
    			    </div>   
    			    <div title="拜访记录管理" data-options="iconCls:'icon-reload'">   
    			    	<a href="#" class="menuA">拜访记录管理</a>
    			    </div>
    			    <div title="统计分析" data-options="iconCls:'icon-reload'">   
    			    	<a href="#" class="menuA">统计分析</a>
    			    </div>
    			    <div title="系统管理" data-options="iconCls:'icon-reload'">   
    			    	<a href="#" class="menuA">系统管理</a>
    			    </div>
    			</div>
    	    </div>   
    	    <div data-options="region:'center',title:'数据区域'" style="padding:5px;background:#eee;">
    	    	
    	    </div>   
    	</div> 
    </body>
    </html>

这时，在Google Chrome浏览器中访问该页面，你就能看到如下图所示的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20230531/70c56d02f9324a24a34457bcbb141a35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20230531/f4314fde11574ed99b0ddd301078408c.png
[2019102913560471.png]: /images/20230531/a4d7147c2bb843778336ff5717b3b4ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: /images/20230531/1009438aa92d41de90f9f6a27cedd6d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: /images/20230531/3389ae53e35e4f798addac528e7c910b.png