标题下的jQuery-mobile滑动菜单

Question

刚进入jQuery mobile，看到了下example

是否可以让滑动菜单出现在标题下方？ （图中红线处）

Answer 1

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

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-obtrusive。只需在第一个 li 中添加一个空的 h1 标签：

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

这是一个演示：http://jsbin.com/avuviy/1/edit