bui.dialog Class
对话框
对话框同样是一个只关注交互的一个控件,可以从不同方向弹出,并且支持全屏,交互里面的内容是什么,完全由你定义, 可以是文本,也可以是控件, 完全可以由你定义, 像 提醒框 | 确认框 | 上拉菜单 | 选择列表菜单 | 日期等,都是基于dialog.
注意: 当页面有bui.listview 控件时,侧滑出来的按钮如果要触发弹窗,会导致点击弹窗按钮第一次无效,需要设置弹窗的buttons的样式名为 bui-click
预览地址: demo
方法说明:
isOpen: 是否打开状态open: 打开弹出窗
close: 关闭弹出窗
remove: 移除弹出窗
create: 动态创建弹出窗
option: 获取设置参数
widget: 获取依赖控件
Constructor
bui.dialog
(
-
option
Parameters:
-
optionObject-
[id] [ render:true 不需要传对话框的id | render:false 为静态绑定, 不传id只是引用,不初始化]String optional -
[className] [ 增加自定义的对话框样式,防止修改]String optional -
[effect] [对话框的打开效果,修改position会有默认的效果, 要修改具体可以查看 {{#crossLink "bui.toggle"}}{{/crossLink}} 有哪些效果]String optional -
[position] [ 对话框的位置 默认 center | left | right | top | bottom | custom (1.5.6新增,定位通过样式去定义)]String optional -
[width] [ 对话框的宽度, 只在 position:center | left | right 有效]String optional -
[height] [ 对话框的高度, 只在 position:center | top | bottom 有效]String optional -
[fullscreen] [ 全屏显示对话框]Boolean optional -
[style] [ 1.5.6新增 全屏以后的上下左右距离, 默认: null 不做处理 || { left: "10%", top: "20%"},]Object optional -
[useBox] [1.5.6新增, 是否使用弹性布局，默认 false | true]Boolean optional -
[scroll] [ true | false 是否计算最大高度,配合height参数,超出可以滚动]Boolean optional -
[mask] [是否显示遮罩，默认 true | false]Boolean optional -
[opacity] [ 遮罩的透明度, 默认 0.6]Number optional -
[zoom] [ 保持比例缩放 默认 false | true]Boolean optional -
[zIndex] [ 1.5.0新增 默认:100 以上,如果是嵌套的dialog,则需要分好层级, mask层级会自动减1]Boolean optional -
[callback] [ 点击按钮的回调, this 指点击的按钮]Function optional -
[onBeforeOpen] [ 1.5.2新增 打开前触发,return false 则不允许打开]Function optional -
[onBeforeClose] [ 1.5.2新增 关闭前触发,return false 则不允许打开]Function optional -
[onBeforeInit] [ 1.5.1新增 初始化前触发]Function optional -
[onInited] [ 1.5.1新增 初始化以后触发]Function optional -
[onMask] [ 点击遮罩的回调]Function optional -
[onClose] [ 对话框关闭的回调]Function optional -
[render] [ 是否动态填充,动态填充以下参数才会有效]Boolean optional -
[dialogid] [ 1.6.2新增 render:true 可以传指定对话框的id]String optional -
[title] [ render:true 对话框的标题才会显示]String optional -
[content] [ render:true 对话框的内容]String optional -
[close] [ render:true 显示关闭文本]Boolean optional -
[closeText] [ render:true 才能把图标改为文本并且可以更改图标]String | Html optional -
[autoClose] [ true点击按钮会自动关闭,如果false需要手动关闭 调用自身的close()方法]Boolean optional -
[buttons] [ render:true 底部的按钮 格式为:["确定","取消"] || [{name:"确定",className:"primary-reverse"}]]Array optional -
[appendTo] [ render:true 才有效 1.4.3新增 默认:"body",添加到哪里去,主要配合单页使用]String | Object optional
-
Example:
html:
//对话框的标准结构
<div id="dialog" class="bui-dialog" style="display:none;">
<div class="bui-dialog-head">对话框标题</div>
<div class="bui-dialog-main">对话框的内容</div>
</div>
js:
var uiDialog = bui.dialog({
id: "#dialog"
});
Item Index
Methods
close
(
chainable
-
[callback] [回调]
关闭对话框
Parameters:
-
[callback] [回调]Function optional
Example:
uiDialog.close();
create
(
chainable
-
option
动态增加对话框
Parameters:
-
optionObject[参考bui.dialog 的参数]
Example:
// 1.5.0 支持公共参数, 1.4.8 参数需要在create 里面
var dialog = bui.dialog();
// 先创建再打开
var dialogobj = dialog.create({ title:"标题", content:"提醒内容"})
dialogobj.open();
destroy
()
[销毁控件]
Example:
//销毁
uiDialog.destroy();
init
(
chainable
-
[option] [参数控件本身]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option] [参数控件本身]Object optional
isOpen
()
检测窗口是否打开
Example:
var status = uiDialog.isOpen();
open
(
chainable
-
[callback] [回调]
打开对话框
Parameters:
-
[callback] [回调]Function optional
Example:
uiDialog.open();
option
(
chainable
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] -
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
获取设置参数
Parameters:
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]String | object optional -
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]String | number | boolean | function optional
Example:
//获取所有参数
//获取所有参数
var option = uiDialog.option();
//获取某个参数
var id = uiDialog.option( "id" );
//修改一个参数
uiDialog.option( "fullscreen",true );
//修改多个参数
uiDialog.option( {"fullscreen":true} );
remove
()
chainable
移除对话框
Example:
uiDialog.remove();
toggle
(
chainable
-
[onOpen] [ 打开的回调, 非必需] -
[onClose] [ 关闭的回调, 非必需]
切换显示, 默认点一次打开,点2次关闭
Parameters:
-
[onOpen] [ 打开的回调, 非必需]Function optional -
[onClose] [ 关闭的回调, 非必需]Function optional
Example:
$("#id").click(function(){
// 1. 只做切换
uiDialog.toggle();
// 2. 切换带回调
uiDialog.toggle(function(){
// 打开的回调
},function(){
// 关闭的回调
});
})
top
(
chainable
-
[index] [ 设置指定层级]
置顶
Parameters:
-
[index] [ 设置指定层级]Number optional
Example:
$("#id").click(function(){
// 1. 只做切换
uiDialog.top();
})
widget
(
-
[name] [ 依赖 toggle 控件]
获取依赖的控件
Parameters:
-
[name] [ 依赖 toggle 控件]String optional
Example:
//获取依赖控件
var uiDialogWidget = uiDialog.widget("toggle");
Events
off
为控件取消绑定事件
Event Payload:
-
[type] [ 事件类型: "open"(打开的窗口时候触发) | "close"(关闭窗口的时候触发)]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiDialog.off("open");
on
为控件绑定事件
Event Payload:
-
[type] [ 事件类型: "open"(打开的窗口时候触发) | "<del>openafter</del>" "afteropen"(打开的动画结束之后触发) | "close"(关闭窗口的时候触发)]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiDialog.on("open",function () {
// 点击的菜单
console.log(this);
});