jQuery Mobile 数据全屏工具栏没有 100% 隐藏答案

【问题标题】：jQuery Mobile data-fullscreen toolbars not being 100% hiddenjQuery Mobile 数据全屏工具栏没有 100% 隐藏
【发布时间】：2014-01-24 03:33:22
【问题描述】：

我正在尝试在 Phonegap 项目中使用 jQuery mobile。

我希望页眉和页脚工具栏在点击屏幕时完全消失，以便可以看到所有内容。

我有这个代码：

    <!DOCTYPE html>
<html>
  <head>
  <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script type="text/javascript">

    function onBodyLoad()
    {       
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady()
    {

    }

    </script>
  </head>
  <body onload="onBodyLoad()">

        <div data-role="page" data-fullscreen="true">

            <div data-role="header" data-fullscreen="true" class="ui-bar-a ui-header ui-header-fixed fade ui-fixed-overlay" data-position="fixed">
                <h1>Hide Header/Footer</h1>
            </div>

            <div data-role="content">
                <p>Hello</p>
                <p>Hello</p>
                <p>Hello</p>
                <p>Hello</p>
            </div>

                <div data-role="navbar" data-position="fixed" data-fullscreen="true">
                    <ul>
                        <li><a href="" class="ui-btn-active">One</a></li>
                        <li><a href="">Two</a></li>
                    </ul>
                </div>

        </div>

  </body>
</html>

我已按照 jQuery Mobile 文档的指示使用了 data-fullscreen="true"，当向下滚动页面到页眉和页脚不可见的区域时，它可以正常工作，如果它们是静态的。

我遇到的问题是，例如，我在标题可见时点击屏幕，如果它是静态的，它会向上滑动，好像它正在消失一样，但随后一个空的黑色工具栏又没有任何文本。

我已尝试完全按照文档示例中的方式复制代码，但在此页面上我遇到了同样的问题，工具栏正确消失：jQuery Demo

【问题讨论】：

标签： jquery mobile hide fullscreen toolbars

【解决方案1】：

我有同样的问题。您必须在页眉、内容和页脚中插入一些 CSS（位置：绝对和高度：0）。你可以这样做：

<div data-role="page" id="pageDefault">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content" style="background-color : white;">

        <button type="button" id="fullScreen" >Full Screen Content</button>

          <a href="#" id="closeFullScreen"  data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left" >Cerrar</a>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQncv8Hwg5UXuB-xFIFmu8BKpmgcVDU2Yh99ejuOiXk-Tfp_RJOZQ" alt="SW" height="100%" width="100%">


    </div>
    <div data-role="footer"  data-position="fixed"  >
        <p>Footer</p>
    </div>
</div>

CSS：

html, body {
    height : 100%;
}


#pageDefault .ui-content {
    position: absolute;
    top: 35px;
    right: 0;
    bottom: 0;
    left: 0;
}

[data-role=footer]
{
    bottom: 0 !important;
    height: 35px !important;
    width: 100% !important;
    vertical-align: middle !important;
}
[data-role=header]
{
    bottom: 0 !important;
    height: 35px !important;
    width: 100% !important;
    vertical-align: middle !important;
}
.hideContentHeaderFooter
{
    position : absolute !important ;
    bottom   : 0 !important ;
    left     : 0 !important ;
    height   : 0 !important ;
    display: none;  
}
.fullContentWithoutHeaderAndFooter 
{
      position : absolute !important;
    top      : 0 !important;
    right    : 0 !important;
    bottom   : 0 !important;
    left     : 0 !important;
}

使用 jquery：

$(function () {


$('#fullScreen').on({
    'click': function () {

     $("div[data-role='footer']").addClass('hideContentHeaderFooter');
     $("div[data-role='header']").addClass('hideContentHeaderFooter');
             $("div[data-role='content']").addClass('fullContentWithoutHeaderAndFooter');
    }
});

$('#closeFullScreen').on({
    'click': function () {

     $("div[data-role='footer']").removeClass('hideContentHeaderFooter');
     $("div[data-role='header']").removeClass('hideContentHeaderFooter');
             $("div[data-role='content']").removeClass('fullContentWithoutHeaderAndFooter');
    }
});

    });

你可以在这里查看完整的答案http://jsfiddle.net/laynusfloyd/C3Y5X/

【讨论】：

【解决方案2】：

将data-position="fixed" 属性添加到页眉和页脚div 元素应该会有所帮助。

【讨论】：