2

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

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

但是，我很难弄清楚它到底是什么样子。例如，我想让位置在右边。如果我使用 data-position 属性而不是试图通过 javascript 操作它，那将起作用。它继续打开面板但忽略我的选项覆盖。

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

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

我将不胜感激任何帮助。谢谢！:)

4

3 回答 3

4

那我要让你失望了，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-15T19:30:44.243 回答
1 
$('#rightpanel').panel(
    "open",
    {
      options: {
        position: "right",
        animate: false,
        dismissable: false
      }
    }
);

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

于 2013-03-15T19:22:44.857 回答
0

如果您手动设置类，您可以做到最好，但为了将来改进 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-12T03:49:07.257 回答