我有一个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。
问题
如何更新全局弹出窗口的位置?
答案 0 :(得分:1)
您需要将其绑定到popupafteropen
。
$(".selector").on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window",
// or
x: 100,
y: 200
});
});