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

问题描述

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

计算header的.outerHeight()和panel的.height().

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

给面板一个新的min-height，以免导致页面滚动

var panelheight = panel - header;

覆盖面板样式

$('.ui-panel').css({'顶部':标题，最小高度":面板高度});

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屋！