jquery weebox 弹出框

jquery weebox 弹出框，使用起来非常方便，页面也非常漂亮。

一、材料准备

可以到该地址进行下载。weebox插件

二、效果图

通过点击登录按钮进入到登陆弹出框页面。

三、使用demo

①、登陆按钮

<a title="登录" href="${ctx}/mem/initLoginPop" target="dialog" width="600">登录</a>

1. target属性表明是一个dialog。
2. href指定对应的服务端请求路径。
3. width指定弹出框weebox的宽度。

②、页面加载时初始化a标签

    // dialogs
    $("a[target=dialog]", $p).each(function() {
        $(this).click(function(event) {
            var $this = $(this);
            var title = $this.attr("title") || $this.text();
            var options = {};
            var w = $this.attr("width");
            var h = $this.attr("height");
            var maxh = $this.attr("maxheight");
            if (w)
                options.width = w;
            if (h)
                options.height = h;
            if (maxh)
                options.maxheight = maxh;
            options.title = title;
            options.contentType = "ajax";
            options.showButton = eval($this.attr("showButton") || "false");
            options.showCancel = eval($this.attr("showCancel") || "false");
            options.showOk = eval($this.attr("showOk") || "false");
            options.type = "wee";
            options.onopen = eval($this.attr("onopen") || function() {
            });
            options.boxid = "pop_ajax_dialog";

            var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
            YUNM.debug(url);
            if (!url.isFinishedTm()) {
                $.showErr($this.attr("warn") || YUNM.msg("alertSelectMsg"));
                return false;
            }
            $.weeboxs.open(url, options);
            event.preventDefault();
            return false;
        });
    });

1. 重载target为dialog的a标签点击事件。
2. options设置weebox的一系列所需属性。
3. 通过$.weeboxs.open(url, options);将属性和服务端请求url传递到weebox对象。

③、login弹出页面

至于login弹出页面，以及URL请求的服务端代码将不再进行说明，每个人的项目不尽相同，所以方法也不同，但weebox弹出框的打开方法却一样。

④、weebox的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;
        }

open方法中最关键的就是weebox的构造方法。

    var weebox = function(content, options) {
        // 窗口初始化
        this.initialize = function() {
            self.initOptions();
            self.initMask();
            self.initBox();
            self.initContent();
            self.initEvent();
            return self;
        }
        // 初始化
        this.initialize();
        }

weebox构造方法最关键的就是initContent方法。

            } else if (self.options.contentType == "ajax") {
                self.ajaxurl = self._content;
                self.setContent('<div class="dialog-loading"></div>');

                self.show();

                $.ajax({
                    type : "post",
                    url : self.ajaxurl,
                    success : function(data) {
                        var json = YUNM.jsonEval(data);

                        if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
                            if (json[YUNM.keys.message]) {
                                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 : YUNM.ajaxError
                })
            }

1. 当weebox的contenttype为ajax时，其会通过ajax请求url进而显示对应的页面内容。
2. 当服务端发生异常时，会弹出错误消息提示，否则正常打开页面。
3. self.setCenterPosition()则会使窗口居中显示。

当然了，本组件封装了部分项目的特殊需要，不过，你只需要将错误代码调整为你项目的代码就可以了！
本文出自:【沉默王二的博客】