使用棘轮框架(twitter引导程序）的模式菜单问题

Modal menu issues using ratchet framework (twitter-bootstrap)

本文关键字：模式 菜单 问题 引导程序 twitter 框架      更新时间：2023-09-26

我正在使用棘轮构建一个移动应用程序，到目前为止我很喜欢这个工具集，但我在使用模态作为菜单时遇到了问题。

这是实时索引页面。

这是我使用的唯一一个自定义js:

$(document).ready(function() {
    if ((navigator.userAgent.match(/Android/i))) {
        $('head').append('<link rel="stylesheet" href="css/ratchet-theme-android.min.css" type="text/css" />');
        var plainAddress = $("#appAddress").text().replace(/'s+/g, "+");
        var paramAddress = encodeURI(plainAddress);
        var urlAddress = ('geo:0,0+?q=' + paramAddress);
        $('#appLink').attr('href', urlAddress);
    } else {
        $('head').append('<link rel="stylesheet" href="css/ratchet-theme-ios.min.css" type="text/css" />');
        var plainAddress = $("#appAddress").text().replace(/'s+/g, "+");
        var paramAddress = encodeURI(plainAddress);
        var urlAddress = ('http://maps.apple.com/?q=' + paramAddress);
        $('#appLink').attr('href', urlAddress);
    };
});
$.get('modal/qrModal.html', function(qr) {
    $("#loadedModals").append(qr);
});
$.get('modal/menuModal.html', function(qr) {
    $("#loadedModals").append(qr);
});

剩下的是goratchet.com上的ratchet.js。我通过js获取菜单和qr代码，因为它们不是每个页面都独有的。菜单在启动时运行良好，当第一次进行选择时，它会执行、加载页面并关闭模态。

之后就变得挑剔了。

有时模态不会加载，有时它没有响应，有时它加载，加载一个新页面，但不退出模态。

这是因为我已将其导出到外部页面吗？还是出了什么事？

通过push.js加载新页面后，您的loadedModals容器似乎正在清空，而不是重新填充。

<div id="loadedModals">
   ...
</div>

您可以在每次推送事件后通过触发回调来重新加载模态。

var loadModal = function(){
    $.get('modal/qrModal.html', function(qr) {
        $("#loadedModals").append(qr);
    });
    $.get('modal/menuModal.html', function(qr) {
        $("#loadedModals").append(qr);
    });
};
loadModal();
window.addEventListener('push', loadModal);
相关文章：