标题下的jQuery-mobile滑动菜单

Question

我刚进入jQuery mobile，看到了下一个example

是否可以将滑动菜单显示在标题下？ （在图像中的红线）

Answer 1

通过更改.ui-panel位置和top值来覆盖min-height样式

  

<强> Demo

计算标题.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);
}

首先是将面板向下移动一下，使其在标题下移动，而第二个使标题保持静止而不是向侧面移动。

我想对于不同的Panel和Header设置，会使用不同的CSS类组合。你需要摆弄它。

演示：http://jsbin.com/avuviy/2/

Answer 3

除了Omar的出色答案外，您还可以将这些选项视为一种解决方案。

• 您可以使用listview中的第一个元素作为关闭面板的按钮。 （是的，当您添加关闭按钮时，用户喜欢它，请参阅此question）。只需在第一个li元素中添加一个锚标记即可进行设置。

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

• 你可以把那个地方留空。 （是的，我知道，听起来有点蹩脚，但它不会妨碍你的设计 - 它的 un-obstrusive 。只需在第一个li中添加一个空的h1标签：

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

以下是演示：http://jsbin.com/avuviy/1/edit