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 に答える