Question

在浏览面板的JQuery Mobile文档时，它提供了以下如何打开面板的示例：

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

然而，我无法弄清楚究竟是什么样子。例如，我想让位置在右边。如果我使用数据位置属性但是没有那么多尝试通过javascript操作它，那将是有效的。它会继续打开面板但忽略我的选项覆盖。

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

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

我非常感谢你提供任何帮助。谢谢！：）

Answer 1

然后我需要让你失望，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");          
    });        
});

Answer 2

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

我更喜欢你的方式，但看起来这就是他们在演示网站上的表现。

Answer 3

如果你手动设置类，你可以做到最好但是为了将来对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")
    });
});

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

3 个答案: