popup : 对话框组件
介绍
对话框组件
使用方法
define(['fui/popup/1.0','util/touchevents/1.0','jquery'], function(Popup,touchevent,$){
var onEvnet = $.os.supportsTouch ? 'tap' : 'click';
var popup = new Popup({
tpl:".fui-dialog-body",
isModal:true,
buttons:[
{
'event':onEvnet,//事件类型
'selector':'.fui-btn1',//要绑定事件的元素
'callback':function(paramObj){//事件的回调函数
alert(paramObj.name);
console.log(this);//这里的this指向的是当前的组件实例
},
'paramObj':{//回调函数要传入的参数(封装成对象便于管理)
'name':'按钮1'
}
},
{
'event':onEvnet,
'selector':'.fui-btn2',
'callback':function(popup,paramObj){
alert(paramObj.name);
},
'paramObj':{
'name':'按钮2'
}
},
{
'event':onEvnet,
'selector':'.fui-btn3',
'callback':function(popup,paramObj){
alert(paramObj.name);
},
'paramObj':{
'name':'insertBtn'
}
},
{
'event':onEvnet,
'selector':'.d-close',
'callback':function(popup,paramObj){
this.hide();
}
}
]
});
//dialog显示
popup.show();
$(".show-dialog").on(onEvnet,function(){
popup.show();
});
});
配置参数
配置参数 |
参数类型/可选值 |
参数默认值 |
作用说明 |
tpl |
String |
/ |
popup内容的class或id,也可以传入自定义的模板字符串 |
zindex |
number |
1688 |
浮层的z-index值 |
isModal |
Boolen |
true |
是否有浮层蒙板 |
maskAttr |
Object |
{
maskColor:'#000',
maskOpacity:"0.3"
} |
浮层蒙板的style样式 |
buttons |
[{},{}...] |
/ |
给组件内部的元素绑定事件和回调 |
timers |
[{},{}...] |
/ |
是否连续 |
disableScroll |
Boolen |
false |
给组件设置延时回调的函数 |
beforeOpen |
Function |
function(popup){
return true;
} |
浮层打开前的事件回调,返回Boolean值。若返回false,则浮层不打开 |
beforeClose |
Function |
function(popup){
} |
浮层关闭前的事件回调,可用作事件清理 |
contentSuccess |
Function |
function(popup){
} |
浮层创建后的事件回调,可以动态填入数据或内容 |
公共方法
方法名称 |
入参说明 |
返回值 |
作用说明 |
show |
/ |
/ |
显示popup |
hide() |
/ |
/ |
隐藏popup |
position ({}) |
{x:Number,y:Number} |
/ |
手动设置popup的位置 |