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


    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样式名,中横线用下划线替代,例如:{600,max_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):关闭前发生

    5、onClosed(args):关闭后发生
     
     
  • 相关阅读:
    Docker常用基础命令详解
    Docker安装教程(超详细)
    IDEA 新建 Java 项目 (图文讲解, 良心教程)
    SpringBoot2.0之@Configuration注解
    idea的安装和无限期试用
    vue 取消上次请求
    calc()使用通用的数学运算规则,但是也提供更智能的功能:
    pdfh5 移动端 查看pdf
    Git处理Failed to connect to www.google.com port 80: Timed out
    对象排序
  • 原文地址:https://www.cnblogs.com/caogenrenwu/p/13518594.html
Copyright © 2020-2023  润新知