Set Size for jQuery Mobile?
By default, jQuery Mobile fills the entire width of the s开发者_开发问答creen. Is there a way to specify the size that jQuery Mobile should fill, such as providing an element to fill?
Just set this line in your CSS file. Make it really easy. Change max-width to width if prefer.
.ui-page { max-width: 500px; }
You can simply specify this through CSS...
For example:
CSS
#wrapper {width:95%}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</div>
</body>
</html>
You can also do this dynamically by:
$("div[data-role='page']").css('width',$("#container_element").innerWidth()+"px");
The size is automatic. If you create a div outside the page div and set it to float and width in pixels - it should display correctly next to the page div.
加载中,请稍侯......
精彩评论