BUI

其它版本:

API for BUI 1.6.x

Show:

bui.toggle Class

Defined in: src/scripts/core/bui.toggle.js:9
Module: Core

常用动画切换器,只能运行已经配置好的动画,更多效果需要引入animate.css 外部样动画库

预览地址: demo

option: 获取设置参数
widget: 获取依赖控件
show: 显示
hide: 隐藏
remove: 移除
isShow: 显示状态 since 1.3.5

Constructor

bui.toggle

(
  • id
  • effect
  • inOrder
)

Defined in src/scripts/core/bui.toggle.js:9

Parameters:

  • id String

    [要操控的元素的选择器]

  • effect String

    [内置的效果, none (无动画) | showIn(无动画) | fadeIn | fadeInLeft | fadeInRight | fadeInDown | fadeInUp | zoomIn | bounceIn | rotateIn | flipInX | flipInY]

  • inOrder Boolean

    [ 是否按顺序出场, 默认:false (从哪进,就从哪出) ->进 <-出 | true (顺着进来的方向出) ->进 ->出 ]

Example:

 方法1:
                                
                                         //初始化page对象
                                     var uiToggle = bui.toggle("#page");
                                
                                         //显示动画
                                         uiToggle.show();
                                
                                         //隐藏动画
                                         uiToggle.hide();
                                
                                 方法2:
                                
                                     var uiToggle = bui.toggle({ id:"#page" ,effect:"fadeInLeft"});
                                         uiToggle.show();
                                         uiToggle.hide();
                                
                                 方法3: 自定义动画库里面没有的动画
                                
                                     var uiToggle = bui.toggle("#page");
                                         uiToggle.show("fadeInLeft");
                                         uiToggle.hide("fadeOutLeft");

Item Index

Methods

Methods

destroy

(
  • [bool] [ 默认: false 销毁部分 | true 销毁全部]
)

Defined in src/scripts/core/bui.toggle.js:314

[销毁控件]

Parameters:

  • [bool] [ 默认: false 销毁部分 | true 销毁全部] Boolean optional

Example:

       //销毁
                                                   uiToggle.destroy();

hide

(
  • [callback|effect] [1.5.1回调]
  • [effect] [1.5.1 指定单次隐藏动画效果]
)
chainable

Defined in src/scripts/core/bui.toggle.js:231

隐藏动画

Parameters:

  • [callback|effect] [1.5.1回调] Function | String optional
  • [effect] [1.5.1 指定单次隐藏动画效果] String optional

Example:

      var uiToggle = bui.toggle("#page");
                                                      uiToggle.hide();

isShow

()

Defined in src/scripts/core/bui.toggle.js:148

Available since 1.3.5

当前元素的显示状态

Example:

      var uiToggle = bui.toggle("#page");
                                                      uiToggle.isShow();

option

(
  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
  • [value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
)
chainable

Defined in src/scripts/core/bui.toggle.js:347

获取设置参数

Parameters:

  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
  • [value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传] String | number | boolean | function optional

Example:

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

remove

() chainable

Defined in src/scripts/core/bui.toggle.js:299

删除动画元素

Example:

      var uiToggle = bui.toggle("#page");
                                                      uiToggle.remove();

show

(
  • [callback] [1.5.1 回调]
  • [effect] [1.5.1 指定单次显示动画效果]
)
chainable

Defined in src/scripts/core/bui.toggle.js:160

显示动画

Parameters:

  • [callback] [1.5.1 回调] Function | String optional
  • [effect] [1.5.1 指定单次显示动画效果] String optional

Example:

      var uiToggle = bui.toggle("#page");
                                                      uiToggle.show();

widget

(
  • [name] [ 依赖控件名]
)

Defined in src/scripts/core/bui.toggle.js:332

获取依赖的控件

Parameters:

  • [name] [ 依赖控件名] String optional

Example:

       //获取依赖控件
                                                   var uiToggleWidget = uiToggle.widget();