jQuery mobile頁面結(jié)構(gòu)jQuery Mobile 應(yīng)用了 HTML5 標(biāo)準(zhǔn)的特性，在結(jié)構(gòu)化的頁面中完整的頁面結(jié)構(gòu)分為 header、content、footer 這三個(gè)主要區(qū)域。 jQuery mobile站點(diǎn)的頁面必須以HTML5的doctype開頭，即 “<!DOCTYPE html>”（不支持HTML5的瀏覽器會(huì)忽略這個(gè)標(biāo)簽）。
然后引入jQuery，jQuery mobile的javascript代碼文件以及jquery mobile的css文件。
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
下面是一個(gè)完整的單頁面：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="js/jquery.mobile-1.1.0-rc.1.min.css" rel="stylesheet" type="text/css" />
- <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
- <script src="js/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
- </head>
- <body>
- <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 -->
- </body>
- </html>
體驗(yàn)網(wǎng)址：http://www.gofane.com/mobileSSQ/
使用安卓手機(jī)，海豚瀏覽器感覺還可以。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。