文档章节

artdialog4.1.7 封装

nao
 nao
发布于 2017/04/10 14:25
字数 272
阅读 17
收藏 0
($,$.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,_);


© 著作权归作者所有

共有 人打赏支持
nao

nao

粉丝 28
博文 152
码字总数 107883
作品 0
徐汇
artDialog对话框在PHP下的简单应用-artDialog弹出层篇

本教程使用的是artDialog 4.1.7版本,由于需要iframe的支持,所以选择这个版本,artDialog 5.0.3不支持iframe。 本教程是基于本站站长在网页设计写代码过程中与PHP页面交互的应用,部分表单类...

似水星辰
2013/05/03
0
0
Bootstrap 常用组件封装--BootstrapQ

其实bootstrap已经很好了,唯一的软肋就是js方面有些薄弱,对比easyui就知道了, 可以很明显的知道bootstrap是前端人员创建的,而easyui是偏后端人员创建的。 BootstrapQ 主要特性: 1.Boot...

uikoo9
2015/01/06
4.7K
5
Java之基本数据类型的封装类

基本数据类型 封装类 boolean Boolean byte Byte short Short int Integer long Long char Character float Float double Double 基本数据类型的封装类 1.基本类型的封装类(wrapper)用来存储...

Aaron_DMC
2016/12/15
51
0
(周期计划-2)RecyclerView封装系列(1):Header、Footer

2018年技术周期计划:周期计划-1(2018/1/1-2018/1/7) 写在前面 写这边文章的时候是2018年1月12日,也就是18年的第二周,按照原计划应该是关于分割线的封装,不过后来想一想既然提到了封装,...

MDove
01/28
0
0
浅析Java基础类型与封装类型的区别

[x] 基础类型(Primitives)与封装类型(Wrappers)的区别在哪里 一、传递方式不同 封装类是引用类型。 基本类型(原始数据类型)在传递参数时都是按值传递,而封装类型是按引用传递的(其实“引用...

AmorFatiYJ
2017/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[MicroPython]STM32F407开发板驱动OLED液晶屏

1.实验目的 1.学习在PC机系统中扩展简单I/O 接口的方法。 2.进一步学习编制数据输出程序的设计方法。 3.学习 F407 Micropython开发板控制OLED显示字符。 2.所需元器件 F407 Micropython开发板...

bodasisiter
24分钟前
0
0
php require和include 相对路径一个有趣的坑

以前总是被教育,不要使用相对路径,这样性能比较差,但是相对路径的问题不仅仅是性能哦,看下面这里例子 这是项目结构 .├── main.php├── t│ ├── t1.php│ └── t2.php└─...

anoty
24分钟前
13
0
x64技术之SSDT_Hook

测试环境: 虚拟机: Windows 7 64bit 过PG工具 驱动加载工具 PCHunter64 系统自带的计算器和任务管理器等 实现思路: 实际思路与win32的思路一样.都是替换SSDT表里边的函数地址.不过微软被搞怕...

simpower
25分钟前
0
0
TreeMap源码分析,看了都说好

一、简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现。TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey、get、put 和 remove 操作,效率很...

Java小铺
35分钟前
0
0
协变、逆变

概念 假设 A、B表示类型 ≤ 表示继承关系 f<⋅>表示类型转换 若A ≤ B,则 A是B的子类,B是A的超类 协变、逆变 什么是型变?型变(type variance)允许对类型进行子类型转换。 为了下面讲解先...

obaniu
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部