Set Size for jQuery Mobile?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-15 09:34 出处：网络

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 lin

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.