2

我有 3 页：

通过单击第 1 页上的“过滤器”按钮，它会将您带到第 2 页。单击第 2 页上的“灰色按钮”会将您带到第 3 页。单击第 2 页上的“红色按钮”将带您回到第 1 页。

但是在所有这些转换过程中，页面失去了它们的样式。

我尝试在 page1 上添加此代码，但似乎效果不佳：

$(document).bind('pagechange', function() {
          $('.ui-page-active .ui-listview').listview('refresh');
          $('.ui-page-active :jqmData(role=content)').trigger('create');
        });
4

4 回答 4

2

似乎当用户单击 jQuery Mobile 驱动的站点中的链接时，导航系统的默认行为是使用该链接的 href 来制定 Ajax 请求（而不是允许浏览器的默认链接行为以完整的方式请求该 href页面加载）。

这意味着当通过 Ajax 加载页面时，引用页面头部的任何脚本和样式都不会产生任何影响，但是如果通过 HTTP 正常请求页面，它们就会执行。

所以我尝试合并样式，并在每个页面的头部引用相同的样式表和脚本集。这解决了这个问题。

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

于 2012-12-19T17:18:07.957 回答
0

如果您使用 Windows 8 导航，当您从一个页面导航到另一个页面时，将加载新页面 css，如果任何 css 选择器具有相同名称，则新 css 将有效。当你回来时，你可能会失去这种风格。

尝试为每个页面和子页面使用 css 命名空间： https ://www.google.com.br/search?q=css+namespace

于 2012-12-11T22:54:00.513 回答
0

我不确定您使用什么逻辑导航到 page2 或 page3

您可以尝试 changePage 功能导航到不同的页面..

    $.mobile.changePage("page2.html", { allowSamePageTransition: true, 
transition: "slide", reloadPage: true });
于 2012-12-15T07:33:01.433 回答
0

当您使用 pageChange 时，将对那个 url 发出一个 Ajax 请求，并且它只会加载具有 data-role="page" 的 div 内的内容。因此，您从该元素中获得的所有内容都将被忽略（JS 和 CSS）。

于 2012-12-19T17:34:57.817 回答