• artDialog组件应用学习(三)


    一.可以加载url的对话框

    预览:

    对话框编写代码

    //弹出一个对话框,加载页面
    function OpenBox(url, title, width, height) {
        seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
            var d = dialog({
                title: title,
                quickClose: true,
                url: url
            });
            d.width(width);
            d.height(height);
            d.show();
        });
    }

    属性:

    title:  string类型,当前对话框显示标题,title传空字符串时,对话框没有关闭选项。

    url:    string类型,要加载显示内容的url

     

    .有遮罩层的对话框

    预览:

    对话框编写代码:

    //警告对话框
    function WarningTip(msg) {
        seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
            var d = dialog({
                title: "警告",
                content: msg,
                okValue: "取消",
                ok: function () {
                    d.remove();
                }
            });
            d.width(280);
            d.height(50);
            d.showModal();
        });
    }

    属性:

    okValue:  string类型,确定按钮文本,我把这里放着"取消",意为不让操作。

    ok:          Function类型,确定按钮,回调函数,可以针对当前对话框操作。

    方法:

    showModel():  显示有遮罩层的对话框。

     

    .可传递函数的选择对话框

    预览:

    html调用代码:

    function DirectUrl() {
                location.href = "http://www.baidu.com";
            }
    ChoseTip("确定要跳到百度吗?", DirectUrl);

    对话框编写代码:

    //选择性对话框
    function ChoseTip(msg, selfFun) {
        seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
            var d = dialog({
                title: "温馨提示",
                content: msg,
                okValue: "确定",
                ok: function () {
                    this.title('提交中…');
                    selfFun();
                },
                cancelValue: "取消",
                cancel: function () { }
            });
            d.width(280);
            d.height(50);
            d.show();
        });
    }

    属性:

    cancelValue:  string类型,取消按钮文本。

    cancel:          Function类型,取消按钮,回调函数,可以针对当前对话框操作。

    this:       object类型,当前对话框对象

    方法:

    titile():          给对话框标题赋值。

    selfFun():     自定义函数,可在确认之后执行想要的动作。

  • 相关阅读:
    深入学习 History 对象管理浏览器会话历史
    js用斜率判断鼠标进入div的四个方向
    致敬各位10年阿里的前端开发
    JavaScript 时间与日期处理实战:你肯定被坑过
    圣杯/双飞翼布局
    ES6入门
    Javascript中类式继承和原型式继承的实现方法和区别
    五十行javascript代码实现简单的双向数据绑定
    JavaScript 巧学巧用
    VUE2.0学习总结
  • 原文地址:https://www.cnblogs.com/paulhe/p/3663067.html
Copyright © 2020-2023  润新知