1、实例背景
EasyUI实现手风琴Accordion，并获取Accordion中的标题
2、实现实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI之手风琴Accordion</title>
<link rel="stylesheet" href="../themes/black/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<link rel="stylesheet" href="../css/demo.css" />
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var pad = $('#accordion').accordion('getSelected');
var opt = $("#accordion").accordion("options");
var panels = $("#accordion").accordion("panels");
var index = $('#accordion').accordion('getPanelIndex', pad);
var pan = $("#accordion").accordion("getPanel",index);
for(var i=0;i<panels.length;i++)
{
console.info(panels[i].panel('options').title);
}
console.dir(pan[0]);
});
});
</script>
</head>
<body>
<div id="accordion" class="easyui-accordion" style="width:1330px;height:600px;">
<div title="第一季度" data-options="closable:true" style="padding:10px;">
<label>第一季度</label>
</div>
<div title="第二季度" data-options="closable:true" style="padding:10px;">
<label>第二季度</label>
</div>
<div title="第三季度" data-options="closable:true" style="padding:10px;">
<label>第三季度</label>
</div>
<div title="第四季度" data-options="closable:true" style="padding:10px;">
<label>第四季度</label>
</div>
</div>
<div>
<button id="btn">获取</button>
</div>
</body>
</html>
3、实现结果
（1）初始化
![]()
（2）调试结果
![]()
分享到：
相关推荐
首先，手风琴式菜单（Accordion）是EasyUI中的一个组件，它允许在一个有限的空间内展开和折叠多个内容区域。在C# MVC中，你可以通过创建控制器和视图来动态生成菜单项。每个菜单项对应一个数据库查询结果，当用户...
接下来，创建一个`<div>`元素，并设置类为`easyui-accordion`，这将定义一个手风琴容器。这个容器可以包含多个面板，每个面板由一个标题（`title`）和内容区域（`data-options`）组成。在代码中，有三个这样的面板，...
2. **手风琴布局（Accordion）**：手风琴布局允许在一个容器中显示多个面板，每次只有一个面板展开，其余面板折叠。在左侧菜单实现手风琴效果，可以优化空间利用，方便用户导航。 3. **Tab标签页（Tabs）**：在描述...
在本文中，我们将专注于使用 EasyUI 创建可折叠面板（Accordion）的布局，即手风琴菜单。 手风琴菜单是一种常见的 UI 设计模式，它允许用户展开或折叠各个面板，一次只显示一个内容区域，常用于导航菜单或内容分类...
easyui-accordion：手风琴式下拉框** 手风琴（Accordion）组件用于展示可折叠的内容区域，一次只能展开一个区域。`$("#element").accordion`方法用于创建和控制手风琴。 **11. easyui-combobox：组合下拉框** 组合...
4. **easyui-accordion**: Accordion（手风琴）是一种垂直折叠式的面板，只允许单个面板展开。它适合用于展示大量但不同时需要显示的信息，如设置菜单、帮助文档等。在后台应用中，可以节省空间，使用户更容易导航。...
1. **Accordion（手风琴）**: Accordion组件允许在一个容器内折叠或展开多个面板，每个面板可以包含文本、图像或其他HTML内容。这种布局方式常用于节省空间并展示多级信息。在Demo中，你可以看到如何配置和控制各个...
6. **Accordion**：手风琴组件，可以折叠和展开内容区域，节省空间。 三、使用 jQuery EasyUI 开发步骤 1. **引入库文件**：在HTML页面中添加jQuery和jQuery EasyUI的CSS及JS文件引用。 2. **HTML结构**：按照...
10. **div easyui-accordion `accordion` 手风琴式下拉框**： `accordion` 通常用于显示多段内容，每次只能展开一个段落，适用于有限空间内的内容展示。 11. **select easyui-combobox `combobox` 组合下拉框**： ...
`easyui-accordion` 创建了一个可以折叠和展开的多节内容区域，类似于手风琴，只允许单个内容区域展开，常用于节省空间并组织大量内容。 11. **easyui-combobox (组合下拉框)** `easyui-combobox` 是一个组合...
Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton 菜单按钮 SplitButton 拆分按钮 （这个一直不知道中文该如何表述才恰当，谁知道一定告诉我啊） Form ...
4. **导航组件**：如`menu`（菜单）、`tabs`（标签页）、`accordion`（手风琴）等，用于组织页面内容和导航。 5. **交互组件**：如`dialog`（对话框）、`tooltip`（提示）、`pagination`（分页）等，增强用户交互...
- **基础用法**：`diveasyui-accordion` 创建一个手风琴式的面板组件。 ##### 3.6 combobox (组合框) - **基础用法**：`selecteasyui-combobox` 创建一个组合框。 ##### 3.7 combotree (组合树) - **基础用法**：`...
7. **Accordion（手风琴）**：多个面板以折叠方式显示，一次只显示一个。 8. **Slider（滑块）**：用于数值输入，常用于设置值的范围。 **三、jQuery EasyUI 开发实践** 1. **快速启动**：在HTML文件中引入jQuery...
10. **easyui-accordion (手风琴式下拉框)**：`easyui-accordion` 用于展示多段折叠内容，每次只能展开一个段落，适合用来节省空间并展示层次结构的信息。 11. **easyui-combobox (组合下拉框)**：`easyui-combobox...
在本文中，我们将深入探讨如何将Spring MVC框架与EasyUI结合使用，特别是在构建具有三级目录菜单和手风琴效果的Web应用中。Spring MVC作为Java领域中的一个强大MVC框架，能够有效地处理Web请求和响应，而EasyUI则...
**EasyUI 手风琴式下拉框（Accordion）** `easyui-accordion` 类似于折叠面板，但所有面板只能同时打开一个。它适用于展示有限空间内的多个相关项目，如FAQs或分类内容。 **EasyUI 组合下拉框（Combobox）** `...
6. **其他组件**：如Layout（布局）、Accordion（手风琴）、Panel（面板）等，丰富了页面构建的可能性。 **API 使用指南** jQuery EasyUI 的API主要包括组件方法、事件和配置选项。通过调用组件的方法，可以实现对...
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery EasyUI—Accordion 手风琴效果，大家应该很熟悉。 基本代码： 代码如下: <htm