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

How do I update the position of a jQuery Mobile global popup?

本文关键字:全局 窗口 位置 Mobile jQuery 何更新 更新      更新时间:2024-06-27

我有一个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也不起作用。

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

您需要将其绑定到popupafteropen

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

演示