4

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

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

在此处输入图像描述

4

3 回答 3

12

通过更改位置和值来覆盖.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
});
于 2013-06-10T16:20:57.047 回答
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/

于 2013-06-12T15:11:13.260 回答
1

除了 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

于 2013-06-10T16:40:45.440 回答