EasyUI中Accordion折叠面板的简单使用

最新推荐文章于 2021-07-30 13:33:02 发布

霸道流氓气质

最新推荐文章于 2021-07-30 13:33:02 发布

阅读量901

点赞数

分类专栏： EasyUI EasyUI入门学习教程文章标签： accordion

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92747226

版权

EasyUI 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

EasyUI入门学习教程

24 篇文章 3 订阅

订阅专栏

场景

效果

容器选项

名称	类型	描述	默认值
width	number	折叠面板（Accordion）容器的宽度。	auto
height	number	折叠面板（Accordion）容器的高度。	auto
fit	boolean	设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。	false
border	boolean	定义是否显示边框。	true
animate	boolean	定义当展开或折叠面板（panel）时是否显示动画效果。	true
multiple	boolean	设置为 true，则可同时展开多个面板（panel）。该属性自版本 1.3.5 起可用。	false
selected	number	初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。	0

面板（Panel）选项

折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：

名称	类型	描述	默认值
selected	boolean	设置为 true 就展开面板（panel）。	false
collapsible	boolean	定义是否显示可折叠按钮。如果设置为 false，将不能通过点击来展开/折叠面板（panel）。	true

事件

名称	参数	描述
onSelect	title,index	当面板（panel）被选中时触发。
onUnselect	title,index	当面板（panel）未被选中时触发。该事件自版本 1.3.5 起可用。
onAdd	title,index	当添加一个新面板（panel）时触发。
onBeforeRemove	title,index	当移除一个面板（panel）之前触发，返回 false 就取消移除动作。
onRemove	title,index	当移除一个面板（panel）时触发。

方法

名称	参数	描述
options	none	返回折叠面板（accordion）的选项。
panels	none	获取全部的面板（panel）。
resize	none	调整折叠面板（accordion）的尺寸。
getSelected	none	获取第一个选中的面板（panel）。
getSelections	none	过去所有选中的面板（panel）。该方法自版本 1.3.5 起可用。
getPanel	which	获取指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
getPanelIndex	panel	获取指定的面板（panel）索引。该方法自版本 1.3 起可用。下面的实例显示如何获取选中的面板（panel）索引。 var p = $('#aa').accordion('getSelected'); if (p){ var index = $('#aa').accordion('getPanelIndex', p); alert(index); }
select	which	选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。
unselect	which	未选择指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
add	options	添加一个新的面板（panel）。默认情况下，新添加的面板（panel）会被选中。如需添加一个未被选中的新面板（panel），请传递 'selected' 属性，并将其设置为 false。代码实例： $('#aa').accordion('add', { title: 'New Title', content: 'New Content', selected: false });
remove	which	移除指定的面板（panel）。'which' 参数可以是面板（panel）的标题（title）或索引（index）。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
            面板1
        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            面板2
        </div>
        <div title="Title3">
            面板3
        </div>
    </div>
</body>
</html>

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI中Accordion折叠面板的简单使用

场景效果容器选项名称类型描述默认值 width number 折叠面板（Accordion）容器的宽度。 auto height number 折叠面板（Accordion）容器的高度。 auto fit boolean 设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。...
复制链接

扫一扫