jQuery-mobile滑动菜单下的标题 [英] jQuery-mobile sliding menu under header

问题描述

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

计算标题 .outerHeight（）和面板的 .height（） p>

  var header = $（'[data-role = header]'）outerHeight 
 var panel = $（'。ui-panel'）。height（）; 
  

给小组一个新的 min-height 不会导致页滚动

  var panelheight = panel  - 
  

覆盖面板样式

  $（'。ui-panel'）。css（{
'top'：header，
'min-height'：panelheight 
}）; 
  

I just entered into jQuery mobile, and saw the next example

Is it possible to make the sliding menu appear under the header? (in the red lines in the image)

解决方案

Override .ui-panel style by changing top position and min-height values

Demo

Calculate header's .outerHeight() and panel's .height().

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

Give panel a new min-height in order not to cause page to scroll

var panelheight = panel - header;

Override panel style

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

这篇关于jQuery-mobile滑动菜单下的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！