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％隱藏

回答

相關問題