How to create div with 100% height with jquery mobile?
How to create div with id=test with 100% height?
<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><!-- /cont开发者_StackOverflowent -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.
<!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>
加载中,请稍侯......
精彩评论