标题下的jQuery-mobile滑动菜单

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

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

Answer 1

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

演示

计算标题的.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的第一个元素作为关闭面板的按钮。 （是的，用户喜欢它，当你添加一个关闭按钮，看到这个问题 ）。 只需在第一个li元素中添加一个锚标记即可进行设置。

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

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