Question

如何使用100％身高的id = test创建div？

<div data-role="page" id="device1">
    <div data-role="header">
        <h1>Title</h1>
    </div><!-- /header -->
    <div data-role="content">
      <div data-role="fieldcontain">
        <input type="range" name="slider1" id="slider1" value="0" min="0" max="255"  />
      </div>
      <div id=test height=100%>
      </div>    
    </div><!-- /content -->
<div data-role="footer" data-position="fixed">
    </div><!-- /footer -->
</div><!-- /page -->

Answer 1

好的，这就是我给你的。但请记住，如果页面内容很高，那么这可能不是很有用。滑动区域是内容之下的所有内容。因此，随着内容区域变大，滑动区域变小。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Swipe</title>

    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

    <script src="phonegap.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {

            // Set the initial window (assuming it will always be #1
            window.now = 1;

            //get an Array of all of the pages and count
            windowMax = $('div[data-role="page"]').length; 

           $('.swipeArea').bind('swipeleft', turnPage);
           $('.swipeArea').bind('swiperight', turnPageBack);
        });

        // Named handlers for binding page turn controls
        function turnPage(){
            // Check to see if we are already at the highest numbers page            
            if (window.now < windowMax) {
                window.now++
                $.mobile.changePage("#device"+window.now, "slide", false, true);
            }
        }

        function turnPageBack(){
            // Check to see if we are already at the lowest numbered page
            if (window.now != 1) {
                window.now--;
                $.mobile.changePage("#device"+window.now, "slide", true, true);
            }
        }
        </script> 

        <style>
            body, div[data-role="page"], div[data-role="content"], .swipeArea {
                height: 100%;
                width: 100%;
            }
    </style>
</head> 
<body> 

<div data-role="page" id="device1"">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        Content 
        <div class=swipeArea></div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device2" style="height: 100%">
    <div data-role="header">
        <h1>Content 2</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device3" style="height: 100%">
    <div data-role="header">
        <h1>Content 3</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device4" style="height: 100%">
    <div data-role="header">
        <h1>Content 4</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

如何使用jquery mobile创建100％高度的div？

1 个答案: