如何更新jQuery Mobile全局弹出窗口的位置? [英] How do I update the position of a jQuery Mobile global popup?

问题描述

我有一个jQuery Mobile全局弹出窗口，其内容是动态生成的.因此默认情况下为空.

I have a jQuery Mobile global popup, whose contents are generated dynamically. So by default it's empty.

我正在监听 beforeposition 事件以捕获正在弹出的窗口开了.然后，我加载一个配置文件/内容文件，生成内容并将其附加到弹出窗口.

I'm listening for the beforeposition event to capture the popup being opened. Then I load a config file/content file, generate the content and append it to the popup.

但是，到我追加内容时，JQM已经完成了计算弹出窗口的位置，因此它将在屏幕上放错位置.

However by the time I'm appending, JQM is already done calculating the position of the popup so it will be misplaced on the screen.

这是我在做什么:

$(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)).

I'm wondering how to reposition the popup ($(obj.gadget)) after I have appended the content.

我尝试过:

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

或者:

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

但是它们都不起作用.不会触发document上的updatelayout.

But they both don't work. Neither does triggering updatelayout on document.

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

Question
How can I update the position of a global popup?

推荐答案

您需要将其绑定到popupafteropen.

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

演示

这篇关于如何更新jQuery Mobile全局弹出窗口的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！