2

我的应用程序有一个按钮（在 app.html 上），它指向一个带有导航栏（app2.html）的新页面。导航有一个内部链接（工具栏 2），应该显示内部 div“page2”。

当来自带有 changePage() 的按钮时，单击导航时无法显示内容。似乎 reloadPage 不起作用。

app.html 看起来像这样：

<body>
    <!-- Home -->
    <div data-role="page" id="page3">
        <div data-role="content">
            <a id="asdf" data-role="button" name="asdf">
                Button
            </a>
        </div>
    </div>
    <script>
        $('#asdf').click(function(){

            $.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });

            });

    </script>
</body>

这是我的 app2.html：

<body>
    <!-- Home -->
    <div data-role="page" id="page1">
        <div data-role="content">
            <div id="navigation" data-role="navbar" data-iconpos="right">
                <ul>
                    <li>
                        <a href="app.html" data-theme="" data-icon="">
                            Toolbar1
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="check">
                            toolbar 2
                        </a>
                    </li>
                    <li>
                        <a href="app.html" data-theme="" data-icon="">
                            Toolbar 3
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <div data-role="header">
                <h3>asdfasd</h3>
            </div>
        </div>
    </div>
 </body>

问题出在哪里？我将 jQuerymobile 1.1.1 与 jQuery 1.7.1 一起使用。

以下是文件： app.html app2.html

4

1 回答 1

1

第二页中不能有两个 jQuery Mobile 页面。当您单击 app.html 中的链接时，它将向 app2.html 发出 ajax 请求以获取 data-role="page" 并且它只需要在 html 文件中。您应该阅读单页模板和多页模板之间的区别。

您可以在文档中找到更多信息，查找“多页文档中的链接”。

tl;dr：您要么需要将所有页面放在一个 HTML 文件中并链接到 id，要么将所有页面放在单独的 HTML 文件中并链接到该文件。

于 2012-10-12T17:02:17.707 回答