2014-02-12 25 views
2

我正在使用Phonegap和jQuery Mobile開發Windows Phone 8應用程序。在Windows Phone 8中使用jquery mobile進行頁面導航時出現的問題

我有一個側邊欄菜單頁面導航。由於我爲多個頁面提供了相同的菜單,因此我希望保持其動態,即以.js文件生成。

問題是:如果我在html文件中添加ul和li元素,鏈接將正確導航到相應的頁面。但是當我在js文件中追加ul和li元素時,鏈接沒有響應。

這裏是正在使用的代碼:

var ulStr = '<div class="ui-panel-inner">'+ 
        '<header class="nav-header">MUSCLES</header>'+ 
        '<ul id="leftMenu'+identifier+'" data-role="listview" class="sidelist ui-listview">'+ 
         '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C1" class="navlink ui-link-inherit" data-ajax="false">TERMINOLOGY</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+ 
         '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C2" class="navlink ui-link-inherit" data-ajax="false">page 2 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+ 
         '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch1C0" class="navlink ui-link-inherit" data-ajax="false">page 3 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+ 
        '</ul>'+ 
       '</div>'; 

$('#leftNavmenu'+identifier).html(""); 
$('#leftNavmenu'+identifier).html(ulStr); 

相同的代碼在Android和iOS平臺上正常工作。所以沒有任何語法錯誤的可能性。如果有人能夠提供幫助,那將會很棒。

+0

你是如何創建鏈接的元素? – Alvaro

+0

滾動代碼段@Alvaro裏面有元素。 –

+0

你如何處理與jQuery的錨點。 – Alvaro

回答

2

jQuery Mobile的的導航是基於Ajax的hashchange。當您禁用Ajaxdata-ajax="false")時,瀏覽器改爲使用查找div參考anchor標記。

正如您在OP中提到的,它可以在iOS和Android上運行。這是因爲hashchange事件被觸發,因此發生轉換。但是,如果您禁用hashListeningEnabled,那麼將無法在任何設備上使用Ajax已禁用。

使用data-ajax="false"當你想通過HTTP來加載外部頁面不阿賈克斯。它具有rel="external"的相同效果。

相關問題