2012-04-10 3 views
0

jQuery 모바일에 신경을 써야한다는 점을 감안할 때 Phonegap 프로젝트에서 사용하려고합니다.jQuery 모바일 데이터 - 전체 화면 툴바가 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> 

내가 사용한를 데이터 전체 화면 = "true"로 JQuery와 모바일 문서 지시하고이 지역에 제대로 페이지를 아래로 스크롤 할 때 작동으로 어디 머리글과 바닥 글은 정적 인 경우 표시되지 않습니다.

내가 가진 문제는 예를 들어 머리글이 보이면 화면을 살짝 두드리면 화면이 사라져 버렸을 때와 같이 위로 슬라이드하지만 빈 검은 색 도구 모음은 모든 텍스트.

나는 그것이 문서의 예에 정확히 어떻게 코드를 복사 시도하고 나는이 페이지에 도구 모음이 제대로 사라 같은 문제가 얻을 : jQuery Demo

답변

0

는 머리글과 바닥 글 div 요소 모두에 data-position="fixed" 속성 추가를 도움이 될 것입니다.

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는 :

$(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/

을 확인할 수 있습니다
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로

관련 문제