Jquery mobile ui-btn-active在導航欄中

我一直試圖讓這個工作4天，沒有運氣。Jquery mobile ui-btn-active在導航欄中

我有一個非常簡單的jquery移動應用程序。該應用程序有一個標題，內容和頁腳。頁腳正在'pagecreate'事件上動態生成，因爲它始終是相同的，我不想在每個頁面都有HTML。

所以我做這樣的事情：

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) { 
DrawHeader($(this)); 
DrawFooter($(this)); 
SetFooterEvents($(this)); 
SetActiveFooter($(this));

}）;

DrawHeader（）和DrawFooter（）簡單地將頁眉div預先寫入頁面並附加頁腳div。 SetFooterEvents（）設置頁腳導航欄按鈕的onclick事件，並且SetActiveFooter（）爲SUPPOSED以將ui-btn-active設置爲當前活動頁腳鏈接。爲此，我已將data-active-footer屬性添加到頁面div，將data-name屬性添加到導航欄元素。我正在根據頁面中的數據活動頁腳搜索當前元素並應用ui-btn活動類。

function SetActiveFooter(page) { 
page.children('div[data-role="footer"]') 
    .find('a[data-name="' + page 
     .attr("data-active-footer") + '"]').addClass("ui-btn-active");}

到目前爲止好。

現在，假設我已經更改爲一個頁面並且導航欄亮起（它已成功接收ui-btn-active類），並且我正在點擊上一頁，導航欄中亮起的項目不會換回來！
如果我再次點擊頁面（即：更改爲第二頁[corrent lit]，更改回第一頁[第二頁仍然點亮]，然後再次點擊第一頁），它會點亮導航欄按鈕。

我發現當我更改'pagecreate'事件中當前頁面的導航欄時，jqm也更改了上一頁的導航欄。我試圖用'pageshow'事件來覆蓋這種行爲，即嘗試將ui-btn-active類應用於導航欄中的當前元素，但問題在於$（this）和e.currentTarget對象在'pageshow'事件中不要包含腳手架元素！

$(".ui-page").live('pageshow', function (e) { 
alert($(this).children('div').length); // returns 2! 
alert($(this).children('div[data-role="footer"]').length); //returns 0 

alert($(e.currentTarget).children('div').length); // returns 2! 
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});

任何想法？

謝謝。

來源

2012-01-14 Dror ' Yitzhakov

我仍然不知道爲什麼，但jqm將頁腳從頁面移動到頁面，儘管我爲每個頁面分配了一個新的頁腳。也許是因爲我爲它們設置了相同的ID。

無論如何，我用這個解決方法來解決這個問題：在'pagebeforeshow'事件中，我設置了我希望激活的按鈕到文檔中的所有頁腳。我爲每個導航欄按鈕設置了一個特殊的數據名稱屬性，在將其從其餘項目中刪除後，我給它一個'ui-btn-active'類。

var $footers = $(document).find('div[data-role="footer"]'); 
$footers.find('a').removeClass("ui-btn-active"); 
$footers.find('a[data-name="' + page 
     .attr("data-active-footer") + '"]').addClass("ui-btn-active");

來源

2012-01-17 15:43:14

之前鑽研更詳細，請嘗試添加一起的.ui狀態，堅持的.ui-BTN-活躍

這可以確保主動按鈕保持活躍，當你changePage和頁腳是相同。另外請確保，所有頁腳都具有相同的data-id屬性。

在旁註上：查看最新的blog post關於jqm 1.1的即將發佈的功能 - 它將包含一個獲取鏈接實用程序，它允許ajax更新頁面的某些部分。因此，您可以使用此功能在每個頁面上抓取並插入頁腳。我現在正在嘗試使用登錄表單，我在每個頁面上都需要登錄表單。

來源

2012-01-15 19:21:24 frequent

您是否嘗試過「ui-state-persist」？

<div data-role="navbar" data-iconpos="top"> 
    <ul> 
     <li><a href="#page1" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li> 
     <li><a href="#page2" data-icon="star">Favorite</a></li> 
    </ul> 
</div>

來源

2012-07-12 16:31:45

Jquery mobile ui-btn-active在導航欄中

回答

相關問題