jQuery Mobile学习日记（二）

首先依HTML5方式加载，DOCTYPE表示格式为HTML5：主要适用于iPhone、Android等，viewport表示适用于移动终端的适中显示，initial-scale缩放比例在1.0~1.3之间比较合适，需要载入的文件有三个：jquery.js jquery.mobile.js jquery.mobile.css

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

</head> 

<body>

    ...content goes here...

</body>

</html>

　　在body中插入如下内容块，一个页面只能显示一个page，在结构化的页面中完整的页面结构分为 header、content、footer 这三个主要区域

<div data-role="page">

  <div data-role="header">...</div>

  <div data-role="content">...</div>

  <div data-role="footer">...</div>

</div>

　　对于多页面

<body> 

<!-- Start of first page -->

<div data-role="page" id="foo">

    <div data-role="header">

        <h1>Foo</h1>

    </div><!-- /header -->

    <div data-role="content">

        <p>I'm first in the source order so I'm shown as the page.</p>

        <p>View internal page called <a href="#bar">bar</a></p>

    </div><!-- /content -->

    <div data-role="footer">

        <h4>Page Footer</h4>

    </div><!-- /footer -->

</div><!-- /page -->

<!-- Start of second page -->

<div data-role="page" id="bar">

    <div data-role="header">

        <h1>Bar</h1>

    </div><!-- /header -->

    <div data-role="content">

        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>

        <p><a href="#foo">Back to foo</a></p>

    </div><!-- /content -->

    <div data-role="footer">

        <h4>Page Footer</h4>

    </div><!-- /footer -->

</div><!-- /page -->

</body>

巴特西

jQuery Mobile学习日记（二）

最新文章

热门文章