jQuery手機頁面導航行爲

我有一個非常簡單的.NET MVC3項目使用jQuery Mobile設置爲移動設備呈現。jQuery手機頁面導航行爲

我有一個網頁...

www.mydomain.com/landingpage

，並在此頁上我有一個鏈接到另一個頁面：

www.mydomain.com/homepage

我的問題是這樣的，從登陸頁面的鏈接工作正常 - 加載，動畫並正確返回內容。

但是，一旦在主頁上，所有的主頁鏈接不再起作用。主頁包含約3個不同的jquery移動「頁面」，並試圖鏈接到他們是行不通的。這是由於哈希格式，它仍然顯示類似的東西：

www.mydomain.com/landingpage#homepage

所以當生成鏈接，它看起來是這樣的：

www.mydomain.com/landingpage#homepage

然後，當我鏈接到其他頁面的一個與此類似：

a href="#homepage2">Homepage 2</a>

點擊鏈接將用戶返回到初始登錄頁面和更新網址類似於：

www.mydomain.com/landingpage#homepage2

但我相當肯定它應該看起來更是這樣的：

www.mydomain.com/homepage#homepage2

我能得到它的第一個鏈接正常工作通過使用rel =「外部」，但我想避免這種情況，因爲它重新加載頁面，你失去頁面過渡動畫等

任何想法非常讚賞:)

來源

2011-06-24 timothyclifford

你正在使用哪個版本的jqm？ – root

我使用的版本是1.0b1 – timothyclifford

所以基本上你有兩個單獨的文件。同時讓我爲你制定一個例子 – root

對於任何堅持同樣的問題，這個固定對我來說：

我手動設置數據網址屬性每個jQuery Mobile的「頁面「元素（div與data-role =」page「）。反過來，這又強制刷新頁面的URL哈希值。

不確定的確切原因，但我有一種感覺，因爲它回發到同一頁面，但服務器正在返回一個不同的頁面，URL散列有點混亂。

因此，只需手動正確設置數據網址屬性，並且當頁面回傳並加載下一頁時，正確的URL哈希將被更新。

因此，例如：

<div data-role="page" id="pageId" data-url="/Page/URL/Here/">

有點棘手解釋，所以如果有人需要一點幫助隨時直接與我聯繫！自從我最初發布這個版本以來，RC2已經發布，因此我也不確定包含哪些更改。

來源

2011-11-08 19:32:51 timothyclifford

我相信這是當你加載外部頁面的問題。當你嘗試加載一個外部頁面並從那裏嘗試加載一個內部頁面時，jquery mobile會假設你正在加載的內部頁面已經在DOM中，而這不僅僅是因爲當你加載一個只有多個外部頁面的第一個獲得加載，因此您試圖鏈接到的內部頁面不存在。

爲什麼你得到這個

www.mydomain.com/landingpage#homepage2

，而不是這個

www.mydomain.com/homepage#homepage2

的原因是因爲的LandingPage裝在第一頁。子序列頁面全部加載到DOM中，因此jqm假定該元素已經在DOM中，因此它嘗試加載。

目前我認爲唯一的解決方法不是將多個jqm頁面放在一個文件中，並將它們作爲外部文件加載。

例如

landingpage.html負載 - > homepage.html

homepage.html負載 - > homepage2。html

來源

2011-06-24 04:48:29 root

不好看，謝謝你的幫助，雖然:) – timothyclifford

看起來不像有一個解決方案，授予Jin他的努力:) – timothyclifford

在您的着陸頁上設置鏈接到主頁的rel =「external」。這將禁用動畫，但主頁上的ajax導航將正常工作。

來源

2011-06-24 16:14:00 Jasper

是的我可以讓導航功能正確使用這種方法，但是我想要知道是否有方法可以使用相同的ajax實現鏈接到同一個域上的不同頁面，以保持動畫等。我可以讓鏈接工作，但是一旦其他頁面加載，此頁面上的ajax鏈接就不能正常運行。到目前爲止聽起來不可能，謝謝你的回覆。 – timothyclifford

（您可能已經解決您的問題，還是若跌破幫助）

我使用RC2現在（剛剛發佈），他們在Beta3中取得了較大的變化在這附近，我使用正常的鏈接，如： -

它對我來說工作正常。雖然我還不停PushStateEnabled爲True頭：

<script type="text/javascript"> 
      $(document).bind("mobileinit", function() { 

       $.mobile.ajaxEnabled = true; 
       $.mobile.pushStateEnabled = true; 
      }); 
     </script>

來源

2011-10-31 10:48:49

<script type="text/javascript"> 
    $(document).bind("mobileinit", 
     function(){ 
      $.extend($.mobile , { ajaxEnabled: false }); 
     } 
    ); 
</script>

這個腳本添加到頁面佈局（或你已經提到了jQuery腳本。

這應該解決的問題，但是，它只是禁用阿賈克斯，這將需要更多的研究，以找出我們如何克服＃在url中仍然有一個啓用了jjd的問題

來源

2012-08-13 21:31:17

jQuery手機頁面導航行爲

回答

相關問題