前端开发之弹出框系列教程十：通用参数说明

新用户60276041 2020-08-17

展开全文

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./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./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./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):关闭前发生

5、onClosed(args)：关闭后发生

原文：http://www./article/detail/id/815874