jQuery-EasyUI学习（三）accordion分类布局

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

原创最新推荐文章于 2023-05-16 16:46:59 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

easyUi 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了jQuery EasyUI的accordion组件，包括其分类功能，如何设置容器属性，响应的事件处理以及可用的方法。accordion允许用户展示多面板，每次只显示一个，支持展开和折叠，并可通过ajax获取面板内容。同时，文章还涵盖了默认选中面板的设定和组件的交互操作。

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

一、accordion分类

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Accordion（分类）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  	<!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
  
  	<!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

	<!-- 所有的css文件和的有的js文件位置不限 -->
    
  </head>
  
  
  <body>
		
	<!-- 容器 -->
	<div 
		id="accordionID" 
		class="easyui-accordion" 
		data-options="fit:false,border:true,animate:true,multiple:false,selected:-1" 
		style="width:300px;height:400px;">   
	    
	    <!-- 面板 -->
	    <div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
	       	北京  
	    </div>   
	    <div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
	        上海    
	    </div>   
	    <div title="标题3">   
	        广州    
	    </div> 
	    <div title="标题4" data-options="collapsible:true">   
	        深圳    
	    </div> 
	     
	</div> 
  </body>
</html>

效果如下：