前端开发之弹出框系列教程十:通用参数说明
var win=$k.win(config);
var win=$k.alert(config);
var win=$k.confirm(config);
var win=$k.prompt(config);
var win=$k.msg(config);
var win=$k.loading(config);
一、config参数
1、title:标题
例如:$k.alert({title:'保存提示',content:'保存成功!'});
2、content:内容,支持三种类型:直接内容、url、ajax(ajax-get、ajax-post)
例如:
直接内容:$k.alert({title:'保存提示',content:'保存成功!'});
url:$k.win({title:'百度',content:'url:http://www.baidu.com'});
ajax-post:$k.win({title:'查询用户信息',conent:'ajax-post:/demo/kui/getUserInfo/?id=2'});
ajax-get:$k.win({title:'查询用户信息',conent:'ajax-get:/demo/kui/getUserInfo/?id=2'});
3、time:窗口自动关闭时间,默认为0,不自动关闭。
例如:$k.msg({content:'保存成功',time:3000});//3秒后会自动关闭
4、move:解发拖动的元素,默认为 .kui-window-title,即标题栏.
$k.alert(content:'保存成功');//默认只能拖动标题栏
$k.alert({content:'保存成功',move:'.kui-window-title,.kui-window-content,.kui-window-btns'});//标题栏、内容区、按钮栏都可拖动。
5、showTitleBar:是否显示标题栏.
$k.alert({content:'保存成功',showTitleBar:false});//不显示标题栏
6、closeAnim:关闭动画设置,默认为:{className:'kui-anim-close',speed:200}.
className:定义动画的css名称,可以自定义.
speed为动画播放时间,单位为毫秒.
7、shadeStyle:遮罩层样式,默认值:{background_color:'#000',opacity:'0.3'}
例如:$k.alert({content:'保存成功',shadeStyle:{background_color:'red',opacity:'0.3'}});
8、anim:打开动画,默认值为kui-anim,可以为:kui-anim-01、kui-anim-02、kui-anim-03、kui-anim-04、kui-anim-05、kui-anim-06,也可能自定义。
动画效果见:http://www.pingtaimeng.com/article/detail/id/815441
9、closeAnim:关闭动画,默认值为{className:'kui-anim-close',speed:200}
10、minimizeAnim:最小化动画,默认值为{ name: 'linear', params: {}, speed: 200 }
11、normalizeAnim:正常化动画,默认值为{ name: 'linear', params: {}, speed: 200 }
12、maximizeAnim:最大化动画,默认值为{ name: 'linear', params: {}, speed: 200 }
13、style:弹出框样式,默认值{},属性名为css样式名,中横线用下划线替代,例如:{width:600,max_width:1000}
14、args:父页面与子窗口通过该参数进行交互。
请看:http://www.pingtaimeng.com/article/detail/id/661993
15、onShow(args):弹出框显示事件。
16、showLoading:是否显示加载框,conent为url、ajax-get、ajax-post时,此参数有效。
17、showLoadingDelay:如果大于0,超过该值数据未加载完成,显示加载框,单位为毫秒。
18、contentPartStyle:内容部分样式。属性名为css样式名,中横线用下划线替代。
19、min:是否显示最小化按钮
20、max:是否显示最大化按钮
21、close:是否显示最大化按钮
22、buttons:自定义按钮栏,
请看:http://www.pingtaimeng.com/article/detail/id/662001
23、titlePartStyle:标题栏样式
24、buttonsPartStyle:按钮栏样式
25、loadingText:加载框显示的文字
26、optionsPartStyle:右上角部分(最大化、最小化、正常化按钮部分)样式
27、loadingPartStyle:加载框显示加载动画部分样式
28:loadingTextPartStyle:加载框显示文字部分的样式
29、closeButtonStyle:关闭按钮样式
30、minButtonStyle:最小化按钮样式
31、maxButtonStyle:样式化按钮样式
32、normalButtonStyle:正常化按钮样式
33、iframePartStyle:iframe部分样式,content为url时,页面是嵌套在iframe中的。
二、实例属性
1、args:this.args 包含了 config.args传递过来的值。
args用处:1、父页面与子窗口通过args进行交互.
2、作为事件参数,例如onClosed(args).
args.close设置为false,点击按钮不会关闭弹出框,默认值为true.
args.closeTrigger:触发关闭弹出框的事件源,有:closeButton(右上角关闭按钮)、timer(定时自动关闭)、按钮栏上的按钮( 'btn-0'、 'btn-1'、 'btn-2'等)
三、实例方法
1、close():关闭弹出框
例如:
var win=$k.alert({content:'保存成功'});
win.close();
2、full():全屏
3、getIFrame(selector):content为url时,用于获取iframe的dom。如果传selector,获取url页面中的selector.
4、iframeSrc(url,loadingConfig):设置frame的src为url。
四、静态方法
1、var win=$k.getWin(windowName):根据window.name获取弹出框对象.
2、$k.closeAll():关闭所有弹出框,例如:$k.closeAll()
四、事件:
1、onMin():最小化事件
2、onMax():最大化事件
3、onNormal():正常化事件
4、onClosing(args):关闭前发生