【HTML5】 jQuery Mobile 初体验

时间：2016-02-29
jQuery Mobile v1.1.0上个月已经发布，由于好奇就学习了一下。jQuery Mobile是 jQuery 在手机和平板设备上的版本，用于创建针对智能手机和平板电脑的跨设备Web应用。jQuery的用户界面总设计师Todd Parker(jQuery之父)称，jQM旨在“为 jQuery 社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。

jQuery mobile页面结构jQuery Mobile 应用了 HTML5 标准的特性，在结构化的页面中完整的页面结构分为 header、content、footer 这三个主要区域。 jQuery mobile站点的页面必须以HTML5的doctype开头，即 “<!DOCTYPE html>”（不支持HTML5的浏览器会忽略这个标签）。

然后引入jQuery，jQuery mobile的javascript代码文件以及jquery mobile的css文件。


  1. <div data-role="page">
  2. <div data-role="header">...</div>
  3. <div data-role="content">...</div>
  4. <div data-role="footer">...</div>
  5. </div>
复制代码

下面是一个完整的单页面：

  1. <!DOCTYPE html>  
  2. <html>
  3.     <head>
  4.     <title>Page Title</title>

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

  8.     <link href="js/jquery.mobile-1.1.0-rc.1.min.css" rel="stylesheet" type="text/css" />
  9.     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
  10.     <script src="js/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>

  12. </head>
  13. <body>

  15. <div data-role="page">

  17.     <div data-role="header">
  18.         <h1>Page Title</h1>
  19.     </div><!-- /header -->

  21.     <div data-role="content">   
  22.         <p>Page content goes here.</p>        
  23.     </div><!-- /content -->

  25.     <div data-role="footer">
  26.         <h4>Page Footer</h4>
  27.     </div><!-- /footer -->
  28. </div><!-- /page -->

  30. </body>
  31. </html>
复制代码



体验网址：http://www.gofane.com/mobileSSQ/


使用安卓手机，海豚浏览器感觉还可以。


上一篇：详解微博发言框的@功能 下一篇：HTML5技术之图像处理：一个滑动的拼图游戏

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权