使用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瀏覽頁面

回答

相關問題