如何更新jQuery Mobile全局弹出窗口的位置?

时间:2013-12-11 09:33:07

标签: javascript jquery jquery-mobile popup position

我有一个jQuery Mobile全局弹出窗口,其内容是动态生成的。所以默认情况下它是空的。

我正在侦听beforeposition事件以捕获正在打开的弹出窗口。然后我加载配置文件/内容文件,生成内容并将其附加到弹出窗口。

然而,当我追加时,JQM已经完成了计算弹出窗口的位置,因此它将被错放在屏幕上。

以下是我正在做的事情:

$(document).find("#global-popup")
    .on("popupbeforeposition", function (e) {
    factory.util.generatePopupContents(app.generateActionObject(e));
});


factory.util.generatePopupContents = function (obj) {
    var i, j, promises, fragment, popup, reference, state;

    popup = obj.gadget,
    reference = popup.getAttribute("data-reference"),
    state = popup.getAttribute("data-state");

    // don't reload if same popup is opened
    if (state !== reference) {
        if (reference === null) {
            util.errorHandler({
                "error": "Global Bindings: No handler for popup"
            });
        } else {
            popup.setAttribute("data-state", reference);
            popup.setAttribute("data-reference", reference);
            promises = [];

            // fetch content > THIS WILL LOAD A JSON DICT
            app.fetchConfiguration({
                "storage": app.default_dict.storage_dict.settings,
                    "file": app.default_dict.storage_dict.gadgets,
                    "attachment": reference,
                    "pass": undefined
            })
                .then(function (reply) {
                obj.gadget.setAttribute("data-reference", reference);
                // loop children in JSON dict
                if (reply.children) {
                    for (i = 0; i < reply.children.length; i += 1) {
                        promises[i] = app.setContent(reply.children[i], {}, false);
                    }
                }
                return RSVP.all(promises)
            })
                .then(function (content) {
                // create a fragment and append generated content
                fragment = document.createDocumentFragment();
                for (j = 0; j < content.length; j += 1) {
                    fragment.appendChild(content[j]);
                }

                // translate fragment if needed
                if (i18n) {
                    map.actions.translateNodeList(fragment);
                }

                // empty gadget and reload
                obj.gadget.innerHTML = "";
                obj.gadget.appendChild(fragment);
            })
                .fail(util.errorHandler);
        }
    }
};

我想知道在添加内容后如何重新定位弹出窗口($(obj.gadget))。

我试过了:

 $(obj.gadget).trigger("updatelayout");

或者:

 $(obj.gadget).popup("reposition", {"y": 0});

但他们都不行。也没有在document上触发updatelayout。

问题
如何更新全局弹出窗口的位置?

1 个答案:

答案 0 :(得分:1)

您需要将其绑定到popupafteropen

$(".selector").on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window",
        // or
        x: 100,
        y: 200
    });
});
  

Demo