Question

jQuery移动面板通常从上到下转换页面的一部分：

<div data-role="panel">...</div>

演示页面左侧的内容面板表限制在页眉和页脚之间 - 而不是从上到下： http://demos.jquerymobile.com/1.4.3/intro/

如何限制页眉和页脚之间的面板？它是如何在CSS中完成的？

Answer 1

首先需要计算视口，标题和页脚的高度。从视口的高度减去两个工具栏的高度将为您提供两个工具栏之间的空间高度。此外，通过覆盖面板的top样式来向下推动面板。

    /* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
    /* viewport */
    screen = $.mobile.getScreenHeight(),
    /* header - whether it's fixed */
    header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
    /* footer - whether it's fixed */
    footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
    /* math 101 */
    panelheight = screen - header - footer;
/* update "min-height" and "top" */
$('#panelID').css({
    'top': header,
        'min-height': panelheight
});

<强> Demo

页眉和页脚之间的jQuery移动面板

1 个答案: