hybird - (03: jquery mobile)
2016-12-17 本文已影响45人
廖马儿
1.jqueryMobile简介
是一个jquery的插件,同时也是一个移动开发框架。
这样的移动开发框架有一个共同的特点就是，基于html5。
类似的框架还有：jqTouch, Sench touch（较早，不易上手，案桌上切换页面会闪屏，学习成本也较高， 其前身是ext，基于js驱动的）。
jqueryMobile特点，较易上手，基于html驱动的，可以用div这些容易做UI些。给移动平台带来了jQuery核心库，也发布了一套完整统一的jQuery移动UI框架。
他们设计的UI都仿照native，很像。
案例： http://m.oschina.com http://demos.juerymobile.com(控件的学习)
2.jqueryMobile 下载
下载之后解压的文件夹中需要用到的：
images 文件夹, jquery-mobile-version.css（前面这两个路劲不能乱），jquery-mobile-version.js，jquery-mobile-version.min.js(发布的时候用min版本)
注意：导入jqueryMobile也应该将jquery.min.js和jquery.js导入，因为是jquery插件。
3.新建页面的初始化工作：
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charse=utf-8"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../css/jquery.mobile-1.4.5.css" rel="stylesheet"> <script src="../js/lib/jquery-3.1.1.js"></script> <script src="../js/lib/jquery.mobile-1.4.5.js"></script></head><body></body></html>
注意：meta标签的 viewport，其属性：width=device-width宽度适应，initial-scale=1 在页面上的显示倍数。
这个meta标签十分重要，建立页面必须写上。
4.jqueryMobile标签属性
eg:
<div data-role="page">
<div data-role="header" data-theme="b" >
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
data-是h5的扩展属性。
data-role="page" 可以渲染一些样式出来。
data-theme="b" 样式，默认是a
