页眉和页脚之间的jQuery移动面板 [英] jQuery mobile panel between header and footer

问题描述

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

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

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

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

解决方案

您需要首先计算视口， header 和 footer 的高度.从视口的高度减去两个工具栏的高度，将为您提供两个工具栏之间的空间高度.另外，通过覆盖面板的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
});

演示

jQuery mobile panel usually convers part of the page from top to bottom:

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

The demos page has left table of content panel that is limited between the header and the footer - not from top to bottom: http://demos.jquerymobile.com/1.4.3/intro/

How to limit the panel between the header and the footer? How is it done in CSS?

解决方案

You need first to calculate height of viewport, header and footer. Subtract height of both toolbars from viewport's height will give you the height of space between both toolbars. Also, push the panel down by overriding top style of the panel.

    /* 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移动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！