Question

祝大家好。

我以为我想了解更多关于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>

Answer 1

有可能，奇怪的行为是因为绑定事件发生在文档中，每次加载页面时都会触发pagecreate事件。（第一个是从index到pages / home.html，第二个是从pages / home.html到pages / home.html）要避免此问题，请在索引页面中设置一个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被放置到hosting / local sever（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

希望这可以帮到你。

Answer 2

这里是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>

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

PageCreate上的jQuery Mobile更改页面

2 个答案: