如何以编程方式调整jquery mobile中面板的选项？

在查看JQuery Mobile for panel上的文档时，它提供了以下如何打开面板的示例：

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

然而，我很难弄清楚它到底是什么样子。例如，我想让这个位置在右边。如果我使用dataposition属性，但不想通过javascript对其进行太多操作，那么这就行了。它将继续打开面板，但忽略我的选项覆盖

我尝试过的最正确的（imo）外观：

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

我将非常感谢在这方面的任何帮助。谢谢！：）

---

我更喜欢你的方式，但他们在演示网站上似乎就是这样做的。

然后我需要让你失望，jQuery Mobile是有问题的框架和平，更不用说在上一个jQuery Mobile版本中首次出现的面板了。这让他们有了马车

目前，根据您的示例，只有“位置”选项起作用，并且只有在面板打开之前设置该选项时才起作用

我给你举了一个有效的例子：

---

如果您手动设置类，您可以做到最好，但为了将来改进JQM，现在您可以同时执行这两项操作：

我只是改进了他的答案，结果

---

Hrmm，您的语法使它实际上显示在右侧，但仍然看起来有缺陷。它将在右侧打开，但在使用此方法时无法正确显示面板内容。data position=“right”似乎没有此问题，因此将继续使用。对那些更像是youtube风格的烘焙WRT面板的框架有什么建议吗？不幸的是，我不知道还有任何其他框架具有这种复杂的面板配置选项。告诉我你为什么不通过属性设置一切。另一个选项是从头开始动态创建面板？打开面板并内联更改其选项将不起作用。弹出窗口也是如此。检查这个问题，它在某种程度上类似于你的问题。

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

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

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")
    });
});