jQuery | javascript | CSS

jQuery Mobile - 05.전체 화면보기

Godffs 2012. 9. 14. 00:55
반응형

Header, footer 바가 고정된 상태에서 page영역을 전체 보기로 설정됩니다.
사진이나 동영상를 보는 화면에서 사용되는 기능입니다.  화면을 클릭(터치)해주세요.

 전체 화면보기
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile</title>
        
<meta charset="euc-kr" />    
        <meta name="viewport" content="width=device-width,
                                       initial-scale=1.0,
                                       maximum-scale=1.0,
                                       minimum-scale=1.0,user-scalable=no"/>
        <link rel="shortcut icon" href="../FrameWork/images/icons-18-black.png" />
        <link rel="apple-touch-icon" href="../FrameWork/images/icons-18-black.png" />
        <link href="../framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
        <script src="../framework/jquery-1.6.4.js"></script>
        <script src="../framework/jquery.mobile-1.0.js"></script>
    </head>
    <body>
        <div data-role="page" data-fullscreen="true">
            <div data-role="header" data-position="fixed">
                <h2>Header</h2>
            </div>
            <div data-role="content">
                <img src="../FrameWork/images/Koala.jpg" />
            </div>
            <div data-role="footer" data-position="fixed" class="ui-bar">
                <h2>footer</h2>
            </div>
        </div>
    </body>
 
</html>



반응형