Question

问题是在html中的页面中显示/隐藏所请求的特定页面。我试过的代码如下所示。任何人都可以指出正确的方向。我试图只显示pagethree的打击代码，但它显示了pageone。

<!DOCTYPE html PUBLIC >
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" /> 
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>   

<script>
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
</script>

</head>

<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>page one</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>page one contents </p>
  </div>

  <div data-role="footer">
    <h1>page one</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>page two</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>page two contents</p>
  </div>

  <div data-role="footer">
    <h1>page two</h1>
  </div>
</div> 



<div data-role="page" id="pagethree">
  <div data-role="header">
    <h1>page three</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>page three contents...</p>
  </div>

  <div data-role="footer">
    <h1>page three</h1>
  </div>
</div> 



</body>
</html>

Answer 1

要在显示下一页之前阻止页面显示或重定向用户，您需要收听pagebeforechange事件。在更改页面转换开始之前会触发此事件，并且 URL历史记录会更新。

发出pagebeforechange时，会省略数据对象，其中包含上一页和下一页的详细信息。使用此数据来确定用户正在导航的页面和页面。

$(document).on("pagebeforechange", function (e, data) {
    var nextPage = data.toPage,
        prevPage = data.options.fromPage;
    if (typeof nextPage === "object" && typeof prevPage === "undefined") {
        var page = nextPage[0].id;
        if (page === "pageone") {
            $.mobile.changePage("#pagethree", {
                transition: "flip"
            });
            return false;
        }
    }
});

使用.show()或.hide()将无处可寻。此外，请不要在jQuery Mobile中使用.ready()或$(function () {});，而是使用 Page Events 。

<强> Demo

Answer 2

尝试将您的代码置于 pagecreate 事件中：

在DOM中创建页面时触发（通过ajax或其他）并且所有小部件都有机会增强包含标记。

<script>
$(document).on('pagecreate', function() {
    $("#pageone").hide();
    $("#pagetwo").hide();
    $("#pagethree").show();
});
</script>

Answer 3

<script>
$(document).ready(function()
{
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>

jquery show隐藏请求的页面

3 个答案: