使用JQuery Mobile浏览页面

我正在研究使用JQuery Mobile的应用程序。我的应用程序有3个屏幕，分为两个独立的ASP.NET文件。这些屏幕 “1”，第2页 - A”，和 “第2页 - B” 这些屏幕被放置在以下文件：使用JQuery Mobile浏览页面

page1.aspx这个

Page 1

第2页。 ASPX

Page 2 - A 
Page 2 - B

我有这样做的原因，我在这里提供的样品只是为了说明问题的问题是，当我从第1页转到页2 - 。A，工作的事情但是，当我点击Pa上的“B”时ge 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>

来源

2012-01-31 Mono Developer

我认为，（但有没有试过）你需要使用$.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的内容的本机行为。

来源

2012-01-31 15:13:54

好吧，这是要健全有点不可思议。但我试过你的例子（通过复制你的代码样本），并遇到同样的问题。不过我注意到，你有一个空格在你的链接到#B页，像如下所示那样：

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

当我删除了空白，一切运行良好。试试看，让我知道它是否适合你。

来源

2012-01-31 15:23:49 corthmann

corthmann您好，感谢尝试。我试过它对我不起作用:(。我看着我的原始代码库，它在href中没有空格。谢谢你的指针！ – 2012-01-31 15:51:20

我对你的代码做的唯一其他修改是使用jQuery Mobile 1.0（而不是1.0.1）并将.aspx改为.html（因为这是我如何存储你的示例） - 但我认为这不应该有任何区别，但我只在Firefox中尝试过，所以它可能与移动浏览器的工作方式有关。 – corthmann 2012-01-31 16:11:06

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

这将解决您的问题：

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

来源

2012-04-03 10:38:02 Jack

您可以通过用户目标：目标= “_自我” 对我来说工作100％

来源

2017-03-21 10:48:25

使用JQuery Mobile浏览页面

回答

相关问题