如何以编程方式调整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移动版面板的选项？

回答

相关问题