gpt4 book ai didi

javascript - jQuery 手机 : Multi-Page Application with Separate Pages: Second Page not Getting Styled

转载 作者:行者123 更新时间:2023-11-30 06:38:13 28 4
gpt4 key购买 nike

我们有一个带有两个 View 的单页应用程序(本质上是一个项目列表和所选项目的详细信息页面)。两个 View 都在单独的 html 文件中,我们使用 sammy.js 在页面之间进行转换/导航。在我们尝试将 jQuery Mobile 添加到组合中之前,一切都运行良好。现在,当我们导航到第二个页面(详细信息页面)时,jQuery Mobile 没有设置页面样式。

我们的工作应用程序没有按照 jQuery Mobile 的多页面模板的描述进行设置(即,将所有页面 div 放在同一个 html 文件中,并使用它们的导航系统通过 AJAX 将链接页面加载到 DOM 中)。但是,有没有可能有单独的页面,使用 jQuery Mobile 导航以外的东西,并且第二页仍然有 jQuery Mobile 样式?或者,有没有办法强制 jQuery Mobile 设置第二页的样式?

这里有一些代码片段,希望有助于展示我们正在做的事情。 (注意:我们还使用 ASP.NET razor View 。)

索引.cshtml

<body>
@RenderPage("Views/items.cshtml")
@RenderPage("Views/item.cshtml")

@Scripts.Render("~/bundles/jquery")
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loader.prototype.options.text = "loading. please wait...";
$.mobile.loader.prototype.options.textVisible = true;
});
</script>
@Scripts.Render("~/bundles/jquerymobile", ...)
</body>

items.cshtml(此页面已正确加载和呈现)

<section id="items-view" class="view" data-role="page">
<section data-role="header">
....
</section>

<section data-role="content">
(navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
</section>

<section data-role="footer">
....
</section>
</section>

item.cshtml(此页面已加载但未正确呈现,没有 jQuery Mobile 样式)

<section id="item-view" class="view" data-role="page">
<section data-role="header">
....
</section>

<section data-role="content">
(ULs, LIs, listboxes, textboxes, etc. are here)
</section>

<section data-role="footer">
....
</section>
</section>

router.js(用于页面间路由)

....
navigateTo = function (url) {
sammy.setLocation(url); // url = #/items or #/item/1234
},
....

在item页面的js文件中,我们尝试过:

        var $page = $("#item-view");
//$page.trigger("create");
//$page.listview("refresh");
//$page.page(); (this one kind of work but doesn’t style every object)
//$page.page("refresh", true);

但还没有任何东西可以正确和完整地工作。

那么,再一次,考虑到我们的情况,有没有办法让 jQuery Mobile 多页面应用程序具有实际的独立物理文件,并让所有页面都正确设置样式?或者是否有一种编程方式强制 jQuery Mobile 正确设置所有页面的样式?

谢谢。

最佳答案

jquery mobile 不会从您的第二页加载所有内容。当您需要使用 JQM(或它的 ajax 方法)的新页面时,它会加载您页面的部分 DOM 并将所有内容放在

<div data-role="page" id="yourPageID"></div>

所以您可以简单地尝试将您的样式表置于“数据 Angular 色”之下,如下所示:

<div data-role="page" id="yourPageID">
<link rel="stylesheet" href="yourStyleSheetLink.css" />
</div>

然后,当 JQM 需要一个新页面时,您的样式表将被加载。

作为一个不会说英语的人,我希望你能理解我的话:)

关于javascript - jQuery 手机 : Multi-Page Application with Separate Pages: Second Page not Getting Styled,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13259891/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com