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");
Methods
destroy
-
[bool]
[销毁控件]
Parameters:
-
[bool]
Boolean optional默认: false 销毁部分 | true 销毁全部
Example:
//销毁
uiToggle.destroy();
hide
-
[callback|effect]
-
[effect]
隐藏动画
Parameters:
-
[callback|effect]
Function | String optional1.5.1回调
-
[effect]
String optional1.5.1 指定单次隐藏动画效果
Example:
var uiToggle = bui.toggle("#page");
uiToggle.hide();
isShow
()
当前元素的显示状态
Example:
var uiToggle = bui.toggle("#page");
uiToggle.isShow();
option
-
[key]
-
[value]
获取设置参数
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]
显示动画
Parameters:
-
[callback]
Function | String optional1.5.1 回调
-
[effect]
String optional1.5.1 指定单次显示动画效果
Example:
var uiToggle = bui.toggle("#page");
uiToggle.show();
widget
-
[name]
获取依赖的控件
Parameters:
-
[name]
String optional依赖控件名
Example:
//获取依赖控件
var uiToggleWidget = uiToggle.widget();