【HTML5】 jQuery Mobile 初体验
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文件。
下面是一个完整的单页面:
体验网址:http://www.gofane.com/mobileSSQ/
使用安卓手机,海豚浏览器感觉还可以。
jQuery mobile页面结构jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header、content、footer 这三个主要区域。 jQuery mobile站点的页面必须以HTML5的doctype开头,即 “<!DOCTYPE html>”(不支持HTML5的浏览器会忽略这个标签)。
然后引入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>
下面是一个完整的单页面:
- <!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>
体验网址:http://www.gofane.com/mobileSSQ/
使用安卓手机,海豚浏览器感觉还可以。
【【HTML5】 jQuery Mobile 初体验】相关文章
5. PhoneGap开发初体验:用HTML5技术开发本地应用
6. jQuery UI组件集Wijmo 支持移动Mobile UI库
7. jQuery UI 组件集 Wijmo 五年最大更新,Mobile First!
8. jQuery UI 组件集 Wijmo 五年最大更新,Mobile First!
9. AppMobi发布HTML5 jqMobi Framework版
10. 实战:jQuery Mobile开发HTML5移动应用
本文来源:https://www.51html5.com/a646.html
﹝【HTML5】 jQuery Mobile 初体验﹞相关内容
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- Jquery Mobile html5 phonegap中 js 跨域请求数据 实现增删查
- 实战:jQuery Mobile开发HTML5移动应用
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- 统一接口工具JQuery Mobile简介
- Jquery mobile 中文手册下载
- jQuery Mobile 发布全新 Logo
- 最新jQuery Mobile 1.2版本新特性全解析
- jQuery Mobile 1.3.0发布
- phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...