Show:

bui.toggle Class

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

预览地址: demo

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

Constructor

bui.toggle

(
  • id
  • effect
  • inOrder
)

Parameters:

  • id String

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

  • effect String

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

  • 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

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiToggle.destroy();
                                                

hide

(
  • [callback|effect]
  • [effect]
)
chainable

隐藏动画

Parameters:

  • [callback|effect] Function | String optional

    1.5.1回调

  • [effect] String optional

    1.5.1 指定单次隐藏动画效果

Example:

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

isShow

()

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

Available since 1.3.5

当前元素的显示状态

Example:

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

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [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

删除动画元素

Example:

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

show

(
  • [callback]
  • [effect]
)
chainable

显示动画

Parameters:

  • [callback] Function | String optional

    1.5.1 回调

  • [effect] String optional

    1.5.1 指定单次显示动画效果

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

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