Question

我正在使用JQuery Mobile的应用程序。我的应用程序有3个屏幕，分为两个单独的ASP.NET文件。这些屏幕是＆＃34; Page 1＆＃34;，Page 2 - A＆＃34;和＆＃34; Page 2 - B＆＃34;。这些屏幕放在以下文件中：

page1.aspx这个

Page 1

page2.aspx

Page 2 - A
Page 2 - B

我有理由这样做，我在这里提供的样本只是为了证明这个问题。问题是当我从第1页到第2页 - A时，事情有效。但是，当我点击＆＃34; B＆＃34;在第2页 - A，屏幕将不会导航到页面。但是，这是奇怪的地方。如果我在浏览器中直接导航到page2.aspx，我可以导航到第2页 - B没有问题。只有当我从page1.aspx开始时才会出现问题。有人可以帮助我，我的页面代码如下所示：

page1.aspx这个

<!DOCTYPE html> 

<html>
  <head><title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <link rel="stylesheet" href="/app.css" />

  <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
  <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script> 
  </head>

  <body>
    <form method="post" action="page1.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />      
      </div>

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

        <div data-role="content">   
            <a href="page2.aspx" data-role="button">Page 2</a></div>
        </div>
      </div>
    </form>
  </body>
</html>

page2.aspx

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="/app.css" />

    <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> 
    </script> 
  </head>

  <body>
    <form method="post" action="page2.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
      </div>

      <div id="A" data-role="page">
        <div data-role="header"><h1>Page 2 - A</h1></div>
        <div data-role="content">
          <a href="#B " data-role="button">B</a></div>
    </div>
      </div>

      <div id="B" data-role="page">
        <div data-role="header"><h1>Page 2 - B</h1></div>
        <div data-role="content">
            I can't get to this page!
        </div>
      </div>
    </form>
  </body>
</html>

Answer 1

我认为（但尚未尝试过此操作）您需要先使用$.mobile.loadPage('testpage.html')将页面加载到DOM中，然后使用$.mobile.changePage('#bar')进行转换。

更多相关内容：

http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

此外，我已经看到使用 目标属性 ，但不确定这是否可以使用$.mobile.changePage()

http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

此外，我认为jQM认为这是“深层链接”，但我发现这不是你想要实现的目标

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

请注意：由于我们使用哈希来跟踪所有Ajax“页面”的导航历史记录，因此目前无法深入链接到jQuery Mobile页面上的锚(index.html#foo)，因为框架会查找ID为#foo的“页面” 而不是滚动到内容的本机行为 ID。

Answer 2

您需要将外部页面标记为外部页面，即。相对= “外部”

这将解决您的问题：

  <a href="page2.aspx" rel="external" data-role="button">Page 2</a>

Answer 3

好的，这听起来有点奇怪。但我尝试了你的例子（通过复制你的代码样本）并遇到了同样的问题。但是我注意到您在指向页面#B的链接中有一个空格，如下所示：

<a href="#B " data-role="button">...</a>

当我删除空白时，一切正常。尝试一下，让我知道它是否适合你。

Answer 4

你可以用户目标：target =“_ self” 对我而言，这是100％的工作

使用JQuery Mobile在页面之间导航

4 个答案: