如何以編程方式調整jQuery移動版面板的選項？

當通過對jQuery Mobile的的文檔的面板會，它提供了以下爲如何打開面板的例子：如何以編程方式調整jQuery移動版面板的選項？

$("#idofpanel").panel("open" , optionsHash);

但是，我無法搞清楚究竟是什麼樣子。例如，我想讓位置在右側。這將工作，如果我使用數據位置屬性，但沒有太多試圖通過JavaScript來操縱它。它繼續打開面板，但忽略了我的選項覆蓋。

最正確的（IMO）在尋找的東西我已經試過：

$('#rightpanel').panel(
    "open", 
    { 
     position: "right", 
     animate: false, 
     dismissable: false 
    } 
);

我將不勝感激任何幫助。謝謝！ :)

來源

2013-03-15 Eric98118

打開面板和內聯改變其選擇，是行不通的。它也出現在彈出窗口中。檢查這個問題，它與你的問題類似。 [問題]（http://stackoverflow.com/questions/15435934/jquery-mobile-popup-dialog-disallow-on-options-doesnt-work） – Omar 2013-03-15 21:43:26

那麼我需要讓你失望的是，jQuery Mobile有問題的框架和平，更不用說最後jQuery Mobile版本中出現的面板。這使他們越野車。

目前，在你的例子中，只有位置選項工作，並且只有在面板打開前設置。

我給你做一個工作示例：http://jsfiddle.net/Gajotres/znygq/

$(document).on('pagebeforeshow', '#index', function(){  
    $(document).on('click', '#openpanel', function() {    
     $('#rightpanel').panel({ position: "right"});  
     $('#rightpanel').panel("open");   
    });   
});

來源

2013-03-15 19:30:44 Gajotres

Hrmm，你的語法使它實際上顯示在右邊，但似乎仍然是越野車。它將在右側打開，但在使用此方法時不能正確顯示面板內容。 data-position =「right」似乎沒有這個問題，所以會堅持。任何關於框架的建議，這些框架都是以YouTube風格滑動的更加烘烤的WRT面板？ – Eric98118 2013-03-15 20:44:38

不幸的是，我不知道任何其他框架與這個複雜的面板配置選項。告訴我爲什麼你不通過屬性設置所有的東西。另一種選擇是從頭開始動態創建面板？ – Gajotres 2013-03-15 21:50:22

$('#rightpanel').panel(
    "open", 
    { 
     options: { 
     position: "right", 
     animate: false, 
     dismissable: false 
     } 
    } 
);

我更喜歡你的方式，但看起來他們是如何在演示網站上做到這一點的。

來源

2013-03-15 19:22:44 dmoss18

如果手動設置類，你可以做的最好的，但爲了將來JQM改進也許你可以現在做兩個：

我只是提高Gajotres的答案，並導致jsFiddle

var panel = $("#rightpanel"), 
    DEFAULT = { 
    POSITION: { 
     left: {type: "left"}, 
     right: {type: "right"} 
    }, 
    DISPLAY: { 
     overlay: { type: "overlay" , className: "ui-panel-display-overlay"}, 
     reveal: { type: "reveal" , className: "ui-panel-display-reveal"}, 
     push: { type: "push" , className: "ui-panel-display-push"} 
    } 
}, 
lastState = { 
    display: DEFAULT.DISPLAY.push, 
    position: DEFAULT.POSITION.left 
}; 

function options (key, value) { 
    return panel.panel("option", key, value); 
} 

function position (pos) { 
    // { left | right } 
    if (
     DEFAULT.POSITION[pos] && 
     DEFAULT.POSITION[pos].type !== lastState.position.type 
    ){ 
     panel.panel("close"); 
     lastState.position = DEFAULT.POSITION[pos] 
     panel 
      .toggleClass("ui-panel-position-left ui-panel-position-right"); 
     return options("position", pos); 
    } 
} 

function display (disp) { 
    // { overlay | reveal | push } 
    if (
     DEFAULT.DISPLAY[disp] && 
     DEFAULT.DISPLAY[disp].type !== lastState.display.type 
    ) { 
     panel.panel("close"); 
     lastState.display = DEFAULT.DISPLAY[disp] 
     panel 
      .removeClass("ui-panel-display-reveal ui-panel-display-overlay ui-panel-display-push") 
      .addClass(display.className); 
     return options("display", disp); 
    } 
} 


$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#openpanel', function() { 
     position("right"); 
     panel.panel("open") 
    }); 
});

來源

2015-07-12 03:49:07

如何以編程方式調整jQuery移動版面板的選項？

回答

相關問題