jquery - ヘッダーの下の jQuery-mobile スライド メニュー

Question

jQueryモバイルに入ったところ、次の例を見ました

ヘッダーの下にスライド メニューを表示することはできますか? （画像の赤線部分）

Answer 1

位置と値.ui-panelを変更してスタイルをオーバーライドするtopmin-height

デモ

ヘッダー.outerHeight()とパネルの を計算し.height()ます。

var header = $('[data-role=header]').outerHeight(); 
var panel = $('.ui-panel').height();

min-heightページがスクロールしないように、パネルを新しくする

var panelheight = panel - header;

パネル スタイルをオーバーライドする

$('.ui-panel').css({
    'top': header,
    'min-height': panelheight
});

Answer 2

それはさらにうまくいくことができます：

これは、次の状況で機能します。

• パネル：data-display="push"
• パネル：data-position="left"
• ヘッダ：data-position="fixed"

次の css スタイルを変更します。

.ui-panel {
    top: 41px;
    height: calc(100% - 41px);
}

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

1 つ目は、パネルを少し下に移動してヘッダーの下に移動することです。2 つ目は、ヘッダーを横に移動するのではなく静止させます。

PanelさまざまなHeader設定では、CSS クラスのさまざまな組み合わせが使用されていると思います。あなたはそれをいじる必要があります。

デモ: http://jsbin.com/avuviy/2/

Answer 3

Omar による優れた回答に加えて、これらのオプションも解決策と見なすことができます。

• の最初の要素をlistviewボタンとして使用して、パネルを閉じます。(はい、閉じるボタンを追加すると、ユーザーは気に入ってくれます。この質問を参照してください)。li最初の要素の内部にアンカー タグを追加するだけで設定完了です。

  <li data-icon="false"><a href="#my-header" data-rel="close" data-icon="delete"></a></li>
  

• あなたはその場所を空にすることができます。（ええ、私は知っています、ちょっと不自由に聞こえますが、それはあなたのデザインを妨げません-邪魔になりませんh1。最初のliに空のタグを追加するだけです:

  <li data-icon="false"><h1></h1></li>
  

ここにデモがあります: http://jsbin.com/avuviy/1/edit