2014-09-05 102 views
0

我是jQuery mobile的新手,我正在使用jQuery mobile 1.4.3開發應用程序。我的問題是,我需要動態地添加一個左側面板到所有頁面,我不能讓它工作。將左側面板動態添加到所有頁面

該頁面還需要在所有頁面上都有左側標題按鈕才能訪問面板菜單。

我的失敗嘗試代碼:JSFIDDLE

一些示例代碼:

$(document).on('pagecontainerbeforeshow', function (e, ui) { 
    var activePage = $(ui.toPage), 
     activePageId = activePage[0].id, 
     myPanel = "", 
     panelBtn = ""; 

    //does not work, but you get the ideia: 
    myPanel = $('<div data-role="panel" id="mypanel" data-theme="a"><li><a href="#page1" data-role="button" data-theme="a">Btn page 1</a></li><li><a href="#page2" data-role="button" data-theme="a">Btn page 2</a></li></div>'); 
    activePage.append(myPanel); 

    //how to add the panel Button to the Header so that it will show the left panel? some dummy code: 

    panelBtn = $('<a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext"></a>'); 
    activePage.append(panelBtn); 

    switch (activePageId) { 
     case 'page1': 

      break; 
     case 'page2': 

      break; 
     default: 
    } 

}).on("pagecontainerhide", function (e, ui) { 
    var activePage = $(ui.toPage), 
     activePageId = activePage[0].id; 
}); 
+0

chek this http://jsfiddle.net/yd1oze74/10/ – Aravin 2014-09-05 11:09:48

回答

-1

嘗試追加到$(body)

和IM假設pagecontainerbeforeshow是一個定義監聽器?