2

大家好。

我想我想了解更多关于 jQuery mobile 的知识，所以我昨天开始了，但我已经被困在了最开始的地方。

我想要实现的是：

  • index.html 加载
  • index.html 重定向到 pages/home.html

这样，pages/home.html 将成为默认页面。这有可能吗？目前，我有这个：

<body>
    <script>
    $(document).bind('pagecreate', function()
    {
        $.mobile.changePage("pages/home.html");
    });
    </script>
</body>
</html>

它显示了一种奇怪的行为，滑动两次并显示错误消息（说页面无法加载）。

我希望我的所有页面都在 pages 子目录中。这是可能的还是我又不可能了？

谢谢。

编辑

另一个页面在正文中包含以下内容；

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

</div>
4

2 回答 2

2

有可能，由于将事件绑定到文档而发生了奇怪的行为，每次加载页面时都会触发 pagecreate 事件。（第一次是从 index 到 pages/home.html，第二次是从 pages/home.html 到 pages/home.html ）为了避免这个问题，像这样在你的 index 页面中设置一个 id 并将事件绑定到 # indexPage 而不是文档。

<div data-role="page" id="indexPage">

<script type="text/javascript">
   $("#indexPage").bind('pagecreate', function()
   {
    $.mobile.changePage("pages/home.html");
   });
</script>

请注意，$.mobile.changePage() 仅在将您的 html 放入托管/本地服务器（localhost）时才有效。如果您不想将文件放到服务器上。还有另一种方法，使用 window.location 而不是 $.mobile.changePage()。因为 $.mobile.changePage() 将通过使用 ajax 加载 html 而不是在浏览器中刷新整个页面来以编程方式从一个页面更改为另一个页面。

<script type="text/javascript">
 $("#indexPage").bind('pagecreate', function()
 {
   window.location = "pages/home.html;
 });
</script>

更详细的步骤请参考http://demanstudio.blogspot.com/2013/02/change-pages-in-jquery-mobile.html

希望这可以帮到你。

于 2013-02-23T14:50:54.730 回答
0

这里是 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<script>
    $(document).bind('pagecreate', function()
    {
        $.mobile.changePage("home.html");
    });
    </script>

</body>
</html>

这是 home.html

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

</div>

在本地服务器上运行，不要直接在浏览器中打开。它工作正常

于 2013-02-23T13:36:21.003 回答