bui.accordion Class

Defined in: src/scripts/ui/bui.accordion.js:9

Module: UI

折叠菜单

折叠菜单初始化时尽量使用ID单独初始化,它不止可以用于dl,dt 这样的结构,还可以用在panel以及自定义的结构中,更多例子参考modules/accordion_panel.html

预览地址: demo

方法说明:

show: 展开第几个
hide: 隐藏第几个
showFirst: 所有折叠菜单显示第一个
showAll: 所有折叠菜单全部展开
hideAll: 所有折叠菜单全部隐藏
option: 获取设置参数
widget: 获取依赖的控件

Constructor

`bui.accordion`

(

option

)

Defined in src/scripts/ui/bui.accordion.js:9

Parameters:

option Object
- id String
  
  控件id
- [uid] String optional
  
  1.6.6新增，实例的自定义唯一名字，用于命令式调用
- [handle] String optional
  
  点击的区域
- [height] Number optional
  
  父层高度,0则自适应
- [target] String optional
  
  要显示隐藏的目标
- [effect] String optional
  
  1.8.5 新增，支持自定义交互效果默认 none | slide
- [targetHeight] Number optional
  
  目标自适应高度还是限制高度
- [single] Boolean optional
  
  false(显示多个) || true(一次只折叠一个)
- [stopPropagation] Boolean optional
  
  1.5.6新增默认:false不阻止冒泡, true 阻止冒泡,比方有链接的时候
- [lock] Boolean optional
  
  1.5.6新增,锁定点击默认:false可以点击 | true 不能点击
- [onBeforeInit] Function optional
  
  1.5.1新增初始化前触发
- [onInited] Function optional
  
  1.5.1新增初始化以后触发
- [callback] Function optional
  
  点击按钮的回调

Example:

html:

   <dl id="accordion">
                                           <dt class="bui-btn">折叠菜单</dt>
                                           <dd>
                                               折叠菜单的内容
                                           </dd>
                                       </dl>

js:

       // 初始化
                                           var uiAccordion = bui.accordion({
                                               id: "#accordion"
                                             });
                                    
                                           // 展开第一个
                                           uiAccordion.showFirst();
                                    
                                       例子2: dt上有按钮要绑定事件

html:

   <dl id="accordion">
                                           <dt class="bui-btn bui-box"><div class="span1">折叠菜单</div><div class="bui-btn-text">更多</div></dt>
                                           <dd>
                                               折叠菜单的内容
                                           </dd>
                                       </dl>

js:

       // 初始化
                                           var uiAccordion = bui.accordion({
                                               id: "#accordion",
                                               callback(e){
                                                   if( e.target.innerText == "更多"){
                                                       // 点击了更多的回调
                                                   }
                                               }
                                             });

Index
Methods
Events

Item Index

Events

Methods

`destroy`

(

[bool]

)

Defined in src/scripts/ui/bui.accordion.js:589

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

默认: false 销毁部分 | true 销毁全部

Example:

       //销毁
                                                       uiAccordion.destroy();

`disabled`

(

[index]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:260

Available since 1.4

阻止触发

Parameters:

[index] Number optional

阻止第几个,从0开始算起

Example:

       uiAccordion.disabled(1);

`enabled`

(

[index]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:283

Available since 1.4

允许触发

Parameters:

[index] Number optional

阻止第几个,从0开始算起

Example:

       uiAccordion.enabled(1);

`hide`

(

[index]
[effect]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:450

关闭第几个面板这个需要绑定ID单独显示

Parameters:

[index] Number optional

关闭第几个,从0开始算起
[effect] String optional

1.8.5 新增，单独控制动画 "none" | "slide"

Example:

       //显示第几个
                                                       uiAccordion.hide(1);

`hideAll`

(

[effect]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:554

隐藏所有展开的菜单

Parameters:

[effect] String optional

1.8.5 新增，单独控制动画 "none" | "slide"

Example:

       //隐藏第几个
                                                       uiAccordion.hideAll();

`init`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:151

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

[option] Object optional

参数控件本身

`option`

(

[key]
[value]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:632

获取设置参数

Parameters:

[key] String | object optional

不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数
[value] String | number | boolean | function optional

设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                       var option = uiAccordion.option();
                                                
                                                       //获取某个参数
                                                       var id = uiAccordion.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiAccordion.option( "height",200 );
                                                
                                                       //修改多个参数
                                                       uiAccordion.option( {"height":200} );

`show`

(

[index]
[effect]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:413

显示第几个面板这个需要绑定ID单独显示

Parameters:

[index] Number optional

显示第几个,从0开始算起
[effect] String optional

1.8.5 新增，单独控制动画 "none" | "slide"

Example:

       //显示第几个
                                                       uiAccordion.show(1);

`showAll`

(

[effect]

)

chainable

Defined in src/scripts/ui/bui.accordion.js:525

显示所有隐藏的菜单

Parameters:

[effect] String optional

1.8.5 新增，单独控制动画 "none" | "slide"

Example:

       //显示第几个
                                                       uiAccordion.showAll();

`showFirst`

() chainable

Defined in src/scripts/ui/bui.accordion.js:488

所有折叠菜单显示第一个

Example:

       //显示第几个
                                                       uiAccordion.showFirst();

`widget`

(

[name]

)

Defined in src/scripts/ui/bui.accordion.js:617

获取依赖的控件

Parameters:

[name] String optional

依赖控件名

Example:

       //获取依赖控件
                                                       var uiAccordionWidget = uiAccordion.widget();

Events

`off`

Defined in src/scripts/ui/bui.accordion.js:679

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] String optional

事件类型: "show"(显示目标时) | "hide"(隐藏目标时)
[callback] Function optional

绑定的事件, this 为当前点击的菜单

Example:

       uiAccordion.off("show");

`on`

Defined in src/scripts/ui/bui.accordion.js:659

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] String optional

事件类型: "show"(显示目标时) | "hide"(隐藏目标时)
[callback] Function optional

绑定的事件, this 为当前点击的菜单

Example:

       uiAccordion.on("show",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });

BUI

bui.accordion Class

折叠菜单

预览地址: demo

方法说明:

Constructor

bui.accordion

Parameters:

Example:

Item Index

Methods

Events

Methods

destroy

Parameters:

Example:

disabled

Parameters:

Example:

enabled

Parameters:

Example:

hide

Parameters:

Example:

hideAll

Parameters:

Example:

init

Parameters:

option

Parameters:

Example:

show

Parameters:

Example:

showAll

Parameters:

Example:

showFirst

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.accordion`

`destroy`

`disabled`

`enabled`

`hide`

`hideAll`

`init`

`option`

`show`

`showAll`

`showFirst`

`widget`

`off`

`on`