jQuery Mobile Daten-Vollbild-Symbolleisten sind nicht 100% versteckt

Ich habe nur ein wenig Mühe mit jQuery mobile Ich versuche, in einem Phonegap-Projekt zu verwenden.jQuery Mobile Daten-Vollbild-Symbolleisten sind nicht 100% versteckt

Ich möchte die Kopfzeile & Fußzeile Symbolleisten vollständig verschwinden, wenn der Bildschirm angetippt wird, so dass der gesamte Inhalt gesehen werden kann.

Ich habe diesen Code:

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

ich verwendet habe, die Daten-Vollbild = „true“ wie durch das jQuery Mobile docs angewiesen und das funktioniert einwandfrei, wenn die Seite in einen Bereich nach unten gescrollt, wo die Kopf- und Fußzeile wären nicht sichtbar, wenn sie statisch wären.

Das Problem, das ich habe, ist das sagen, zum Beispiel tippe ich auf den Bildschirm, wenn die Kopfzeile sichtbar ist, wo es statisch wäre, es gleitet nach oben, als ob es verschwand, aber dann kommt eine leere schwarze Symbolleiste wieder ohne beliebiger Text

Ich habe versucht, genau den Code zu kopieren, wie es auf dem docs Beispiel ist und ich das gleiche Problem bekommen, wo auf dieser Seite, die Symbolleiste richtig verschwinden: jQuery Demo

Quelle

2012-04-10 Jon Hockley

Hinzufügen data-position="fixed" Attribut sowohl die Kopf- und Fußzeile div Elemente sollte helfen.

Quelle

2013-03-18 10:32:17 Linerd

Ich hatte das gleiche Problem. Sie müssen einige CSS (Position: absolute und Höhe: 0) in Ihrer Kopfzeile, Inhalt und Fußzeile einfügen. Sie können es wie folgt tun:

<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; 
}

Und mit 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'); 
    } 
}); 

    });

Sie können die komplette anwser überprüfen hier http://jsfiddle.net/laynusfloyd/C3Y5X/

Quelle

2014-01-23 19:33:22 laynusfloyd

jQuery Mobile Daten-Vollbild-Symbolleisten sind nicht 100% versteckt

Antwort

Verwandte Themen