jQuery Mobile数据全屏工具栏未被100％隐藏

只是有一点麻烦与jQuery手机我试图在Phonegap项目中使用。jQuery Mobile数据全屏工具栏未被100％隐藏

我想标题&当屏幕被点击时，页脚工具栏会完全消失，以便可以看到所有内容。

我有这样的代码：

<!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的文档和这个工作正常时，向下滚动页面到一个区域，其中如果它们是静态的，则页眉和页脚将不可见。

我遇到的问题是，例如，当头部可见时，我会点击屏幕，它会是静态的，它会向上滑动，就好像它正在消失一样，但是然后空白的黑色工具栏就会回落任何文字。

我曾尝试复制代码，它到底是怎么上的文档例子，我得到哪里此页面上，工具栏正确地消失了同样的问题：jQuery Demo

来源

2012-04-10 Jon Hockley

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

来源

2013-03-18 10:32:17 Linerd

我有同样的问题。您必须在标题，内容和页脚中插入一些css（position：absolute和height：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-23 19:33:22 laynusfloyd

jQuery Mobile数据全屏工具栏未被100％隐藏

回答

相关问题