bootstrap weebox,支持ajax的模态弹出框(2)-阿里云开发者社区

开发者社区> 沉默王二> 正文

bootstrap weebox,支持ajax的模态弹出框(2)

简介: bootstrap weebox,支持ajax的模态弹出框
+关注继续查看

②、bootstrap.weebox.js(文件偏大,只介绍部分)

var weeboxs = function() {
        var self = this;
        this._onbox = false;
        this._opening = false;
        this.boxs = new Array();
        this.zIndex = 999;
        this.push = function(box) {
            this.boxs.push(box);
        };
        this.pop = function() {
            if (this.boxs.length > 0) {
                return this.boxs.pop();
            } else {
                return false;
            }
        };
        // 提供给外部的open方法
        this.open = function(content, options) {
            self._opening = true;
            if (typeof (options) == "undefined") {
                options = {};
            }
            if (options.boxid) {
                this.close(options.boxid);
            }
            options.zIndex = this.zIndex;
            this.zIndex += 10;
            var box = new weebox(content, options);
            box.dh.click(function() {
                self._onbox = true;
            });
            this.push(box);
            return box;
        };
        // 提供给外部的close方法
        this.close = function(id) {
            if (id) {
                for (var i = 0; i < this.boxs.length; i++) {
                    if (this.boxs[i].dh.attr('id') == id) {
                        this.boxs[i].close();
                        this.boxs.splice(i, 1);
                    }
                }
            } else {
                this.pop().close();
            }
        };
        this.length = function() {
            return this.boxs.length;
        };
        this.getTopBox = function() {
            return this.boxs[this.boxs.length - 1];
        };
        this.find = function(selector) {
            return this.getTopBox().dh.find(selector);
        };
        this.setTitle = function(title) {
            this.getTopBox().setTitle(title);
        };
        this.getTitle = function() {
            return this.getTopBox().getTitle();
        };
        this.setContent = function(content) {
            this.getTopBox().setContent(content);
        };
        this.getContent = function() {
            return this.getTopBox().getContent();
        };
        this.hideButton = function(btname) {
            this.getTopBox().hideButton(btname);
        };
        this.showButton = function(btname) {
            this.getTopBox().showButton(btname);
        };
        this.setButtonTitle = function(btname, title) {
            this.getTopBox().setButtonTitle(btname, title);
        };

        $(window).scroll(function() {
            if (self.length() > 0) {
                var box = self.getTopBox();
                if (box.options.position == "center") {
                    box.setCenterPosition();
                }
            }
        }).bind("resize", function() {
            // 窗口在resize能够使窗口重新居中,模态层的高度和宽度为当前document的大小
            if (self.length() > 0) {
                // 居中
                var box = self.getTopBox();
                if (box.options.position == "center") {
                    box.setCenterPosition();
                }

                if (box.mh) {
                    // 模态层先隐藏,使document的高度和宽度得到变化
                    box.mh.hide();
                    // 设置模态层新的大小
                    box.mh.css({
                        width : box.bwidth(),
                        height : box.bheight(),
                    });
                    // 展示模态层
                    box.mh.show();
                }
            }
        });

        $(document).click(function() {
            if (self.length() > 0) {
                var box = self.getTopBox();
                if (!self._opening && !self._onbox && box.options.clickClose) {
                    box.close();
                }
            }
            self._opening = false;
            self._onbox = false;
        });
    };
    $.extend({
        weeboxs : new weeboxs()
    });


这段代码我们可以看得到,页面加载时就会初始化weebox的基础参数、方法。

通过提供open方法,外部可以将基础的参数options还有url传递到weebox对象中。

紧接着,weebox通过new weebox(content, options)创建weebox对象,稍候介绍。

然后呢,为了能够产生响应式,weebox绑定了窗口的resize、scroll,这两个方法很关键,resize是为了窗口在缩放过程中,弹出框的模态层、弹出框能够重新绘制大小和居中,scroll为了弹出矿口始终处于window窗口的中心位置(setCenterPosition,稍候介绍)。

1.setCenterPosition 方法

// 居中
this.setCenterPosition = function() {
    var wnd = $(window), doc = $(document);

    // 大小不能超过窗口大小,很关键哦
    var iContentW = wnd.width() - 40;
    var iContentH = self.options.maxheight || wnd.height() - 100 * 2 - 40;
    self.dc.css({
        "max-height" : iContentH + 'px',
        "max-width" : iContentW + 'px',
    });
    self.dheader.css({
        "max-width" : iContentW + 'px',
    });
    self.df.css({
        "max-width" : iContentW + 'px',
    });

    // 设置top和left,使窗口居中
    self.dh.css({
        top : (wnd.height() - self.dh.height()) / 2 + doc.scrollTop(),
        left : (wnd.width() - self.dh.width()) / 2 + doc.scrollLeft()
    });

};
2.initContent 方法,加载窗口内容
// 加载内容
this.initContent = function(content) {
    // ok button的名字
    self.bo.val(self.options.okBtnName);
    // cancel button的名字
    self.bc.val(self.options.cancelBtnName);

    // 窗口标题
    self.setTitle(self.options.title);

    if (!self.options.showTitle) {
        self.dheader.hide();
    }
    if (!self.options.showButton) {
        self.df.hide();
    }
    if (!self.options.showCancel) {
        self.bc.hide();
    }
    if (!self.options.showOk) {
        self.bo.hide();
    }
    if (self.options.contentType == "selector") {
        self.selector = self._content;
        self._content = $(self.selector).html();
        self.setContent(self._content);
        // if have checkbox do
        var cs = $(self.selector).find(':checkbox');
        self.dc.find(':checkbox').each(function(i) {
            this.checked = cs[i].checked;
        });
        $(self.selector).empty();
        self.onopen();
        self.show();
        self.focus();
    } else if (self.options.contentType == "ajax") {// content为ajax时,能够将view视图加载到弹出窗口中
        self.ajaxurl = self._content;
        // loading
        self.setContent('<div class="well well-large well-transparent lead"> <i class="icon-spinner icon-spin icon-2x pull-left"></i> 内容加载中... </div>');

        self.show();

        $.ajax({
            type : "post",
            cache : false,
            url : self.ajaxurl,
            success : function(data) {
                // 处理view视图数据
                var json = YUNM.jsonEval(data);

                // 出现error时,关闭当前窗口,弹出错误消息
                if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
                    self.close();
                    $.showErr(json[YUNM.keys.message]);
                } else {
                    // 正常情况下,显示内容
                    self._content = data;
                    self.setContent(self._content);

                    // 设置打开事件
                    self.onopen();
                    // 设置焦点
                    self.focus();

                    // 居中显示
                    if (self.options.position == 'center') {
                        self.setCenterPosition();
                    }
                }

            },
            // 通过弹出的对话框显示错误信息
            error : function(xhr, ajaxOptions, thrownError) {
                self.close();
                YUNM.ajaxError(xhr, ajaxOptions, thrownError);
            }
        });
    } else if (self.options.contentType == "image") {// image类型时,弹出图片
        self.setContent('<img src=' + self._content + ' ></div>');
        self.onopen();
        self.show();
        self.focus();
    } else {
        self.setContent(self._content);
        self.onopen();
        self.show();
        self.focus();
    }
};

以上提供的这部分代码很关键,无论你使用何种模态弹出框,其核心方法无非上述列出的内容,当然了,文章开头也说了,你可以通过git下载完整的源码。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10013 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11587 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9154 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13812 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7336 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22363 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4483 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载