artdialog4.1.7 封装

最新推荐文章于 2018-09-30 09:38:00 发布

weixin_33712881

最新推荐文章于 2018-09-30 09:38:00 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/lvhuizhenblog/blog/876081

本文介绍了一个用于显示消息对话框的JavaScript库实现，包括提示框和确认框的功能，并提供了定制化的模板选项。该库利用了jQuery和artDialog来创建弹窗，支持自定义操作回调和自动销毁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

($,$.dialog,_);(function ($,artDialog,_) {
    if(window.MoMessageBox){ return }
    var tpl = [
    '<div class="title">',
    '<span><%=title%></span>',
    '<a href="javascript:void(0);" class="w-close" hidefocus="true" data-action="cancel"></a>',
    '</div>',
    '<div class="separater"></div>',
    '<div class="info-wrap">',
    '<div class="info"><%=text%></div>',
    '</div>',
    '<div class="btn-wrapper">',
    '<a class="mo-btn-gray confirm mo-btn-x mo-btn-x-left" data-action="ok" href="javascript:">确定</a>',
    '<%if(type !== "alert"){%><a class="mo-btn-gray cancel mo-btn-x mo-btn-x-left" data-action="cancel" href="javascript:">取消</a><%}%>',
    '</div>'].join('');
    
    var MessageBox = window.MoMessageBox = function (options) {
        var me = this;
        options = options || {};
        this.tpl = options.tpl || tpl;
        this.autodestroy = options.autodestroy;
        this.id = options.id || "mo-msgbox-dialog";
        this.$el = $('<div class="mo-msgbox-wrapper"><div class="mo-msgbox-content mo-dialog-content"></div></div>');
        this.$el.on('click','[data-action]',function (e) {
            switch($(e.target).attr('data-action')){
                case 'ok':{
                    me.close('ok');
                    break;
                }
                case 'cancel':{
                    me.close('cancel');
                    break;
                }
            }
        });
        return this;
    }

    MessageBox.prototype = {
        constructor: MessageBox,
        show: function (msg, title ,type ,callback, scope ,param) {
            var me = this;
            var data = {text:msg ,title:title,type:type};
            this.$el.find('.mo-msgbox-content').html(_.template(this.tpl,data));
            this.callback = callback;
            this.scope = scope;
            this.param = param;
            this.dialog = $.dialog({
                id:this.id,
                content:this.$el[0],
                lock: true,
                opacity: 0.50,  // 透明度
                padding: 0,
                cancel:false, // 隐藏关闭按钮
                drag: false, // 不允许拖拽
                show:true,
                close: function () {
                    if(!me.result){
                        me.onresult('cancel')
                    }
                    if(me.autodestroy){
                        return true;
                    }
                    me.hide();
                }
            });
            this.dialog.show();
            this.visible = true;
            this.result = null;
        },
        close:function(result){
            if(result) this.onresult(result);
            this.result = result || 'cancel';
            if(this.dialog)this.dialog.close();
            this.visible = false;
        },
        hide:function(){
            this.dialog.hide();
            this.visible = false;
        },
        onresult:function(result){
            if(this.callback){
                this.callback.call(this.scope || this, result=="ok",result,this.param );
            }
        },
        alert: function (msg,title,callback) {
            this.show(msg,title,'alert',callback);
        },
        confirm: function (msg,title,callback) {
            this.show(msg,title,'confirm',callback);
        },
        prompt:function(){
        },
        isvisible:function(){
            return this.visible;
        }
    };
    
})($,$.dialog,_);

转载于:https://my.oschina.net/lvhuizhenblog/blog/876081