0

只是对 jQuery mobile 有点麻烦，我正试图在 Phonegap 项目中使用。

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

我有这个代码：

    <!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

4

2 回答 2

2

我有同样的问题。您必须在页眉、内容和页脚中插入一些 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');
    }
});

    });

您可以在此处查看完整的 anwser http://jsfiddle.net/laynusfloyd/C3Y5X/

于 2014-01-23T19:33:22.917 回答
0

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

于 2013-03-18T10:32:17.290 回答