jquery手机UI库 jquery mobile app

转载

代码工匠大师 2023-12-20 19:59:51

文章标签 jquery手机UI库 jQuery Mobile html 文章分类 jQuery 前端开发

目的：开发自己的APP——前端篇。

已有基础：HTML、CSS、Javascript、jQuery

由于有jQuery的基础，所以优先选择了jQuery Mobile框架作为APP开发的前端框架。

—————————-我是华丽丽的分割线————————-

这一章主要写一些概览性的知识，没有什么实质性内容，没有兴趣可以直接略过。

1.为什么需要jQuery Mobile

问这个问题的前提是，我们现在做的不是native开发，而是hybrid开发或者web app的开发。

1.1APP开发的三种方式

如果不明白三者的区别的话，可以简单看看下面的解释，不明白的可以找专门的文章搜一搜。

Native开发：即传统开发，IOS用Object C语言开发，Android用Java开发，界面和后台都不涉及所谓前端的知识。

优点：充分利用手机的自带功能，拍照，摇一摇（加速度检测）等，渲染效果好。2d、3d一般只能用这种方式开发。

缺点：学习成本高。

Web APP开发：简单说就是有着类似APP感觉的手机版的网页。使用最多的应该是微信平台的开发。

优点：开发迅速，简单。一个平台网站，改一改前端样式就可以直接适配手机浏览器了。

缺点：只能开发普通浏览性APP，不能调用手机资源，功能欠缺，无法离线。

Hybrid开发：介于以上二者之间，既可以用前端写样式，又可以利用PhoneGap等封装后使用手机自身功能。

1.2为什么是jQuery Mobile

明白我们要做的是什么开发了，那么再接着回答这个问题。

兼容性良好（基本适配所有常见设备操作系统和浏览器）

在做移动开发时，我们面对的是非常不一样的设备。算起来市场上有3000多种移动平台，差不多有50中浏览器，谁也不知道你的用户会用什么样子的设备，所以要减少开发成本，做兼容性开发。

学习成本低

做前端，都不可避免要学习javascript的知识，不可避免要学习一个框架，jQuery框架本身有十分广泛的使用，而jQuery Mobile是从jQuery衍生来的，容易上手。

2.jQuery Mobile是什么

2.1官方说明：

jQuery Mobile是一个支持所有流行移动设备平台的统一的用户界面系统，基于坚如磐石的jQuery及jQuery UI。它轻量级的代码使用渐进增强方式构建，具有可伸缩、易更换主题的设计特点。

2.2解析：

jQuery Mobile=jQuery核心+JavaScript库+CSS3样式表+一些资源图片。

主要特性：

1.跨平台、跨设备、跨浏览器

2.为触屏设备优化过的UI

3.设计为可修改主题及自定义

4.只使用无侵入性的HTML5，无需了解任何JavaScript、CSS和API知识

5.自动调用AJAX来加载动态内容

6.轻量级尺寸，压缩后为12KB

7.渐进增强

8.可访问性支持（为视力有障碍的人士提供可访问体验）

说明：

无侵入性：

先说侵入性：侵入就是说免不了会和页面中的其他相关内容起冲突，如样式乱掉、JS错误、某html标签不被支持等问题，造成侵入后，要么是自身的东西影响了其他的，要么自身的东西被影响了。这样理解的话，无侵入性就是不会对页面上其它因素造成影响并且自身不会被其它因素影响。具体一点比如说，我们不用担心jQuery Mobile里用的HTML5标签会不会被设备浏览器支持，或者一些其它的兼容性。我们只需从jQuery Mobile层面考虑兼容性即可，不用考虑其内部细节。（我没找到确切的定义，有问题的地方欢迎大家指导）

插一句：使用标准无侵入性的HTML5创建应用，特别适合搜索引擎优化（SEO）以及网站性能优化（WPO）。

渐进增强：

核心原则是：在所有浏览器上都能访问基本内容和使用基本功能；语义标签包含了所有内容；增强布局由外部链接的CSS提供；增强行为由不冲突的、外部链接的JavaScript提供；尊重终端用户浏览器的偏好支持。

最后提一下JM测试。在真机上看效果是最好的了，不过有一点值得注意，就是一定多在几种设备上测试一下。这是个充满恶意的世界，bug不知道什么时候就莫名其妙的跑出来了。所以可以把代码可以放到网上，比如自己开发个微信账号神马的开发下，之后请朋友帮忙访问看效果就好。

文章的最后，给一个最简单的jQueryMobile代码。可以看看效果，先自己研究下。

[html] 
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset=“utf-8” />
5. <title>My first jQuery Mobile code</title>
6. <link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css” />
7. <script src=“http://code.jquery.com/jquery-1.8.3.min.js”></script>
8. <script type=“text/javascript” src=“http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js”></script>
9. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
10. </head>
11.   
12. <body>
13. <div data-role=“page” data-theme=“a”>
14. <div data-role=“header”>
15. <h1>jQuery Mobile</h1>
16. </div>
17. <div data-role=“content”>
18.   
19.   
20. <ul data-role=“listview” data-inset=“true” data-divider-theme=“b”>
21. <li data-role=“list-divider”>Summary</li>
22. <li><a href=“cap1.html”>The Platform</a></li>
23. <li><a href=“cap2.html”>The Page</a></li>
24. <li><a href=“cap3.html”>Lists</a></li>
25. <li><a href=“cap4.html”>Components</a></li>
26. </ul>
27.   
28.   
29. <ul data-role=“listview” data-inset=“true” data-divider-theme=“d”>
30. <li data-role=“list-divider”>Links</li>
31. <li><a href=“http://www.mobilexweb.com”>Mobile Web Blog</a></li>
32. <li><a href=“http://www.oreilly.com”>O’Reilly Media</a></li>
33. </ul>
34.   
35.   
36. </div>
37. <div data-role=“footer”>
38. <h4>© 2014 Johnzhangscorpio</h4>
39. </div>
40. </div>
41. </body>
42. </html>

<!DOCTYPE html>
 <html>
 <head>
        <meta charset="utf-8" />
        <title>My first jQuery Mobile code</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

 <body>
 <div data-role="page" data-theme="a">
        <div data-role="header">
                <h1>jQuery Mobile</h1>
        </div>
        <div data-role="content">


                <ul data-role="listview" data-inset="true" data-divider-theme="b">
                     <li data-role="list-divider">Summary</li>
                     <li><a href="cap1.html">The Platform</a></li>
                     <li><a href="cap2.html">The Page</a></li>
                     <li><a href="cap3.html">Lists</a></li>
                     <li><a href="cap4.html">Components</a></li>
                </ul>


                <ul data-role="listview" data-inset="true" data-divider-theme="d">
                     <li data-role="list-divider">Links</li>
                     <li><a href="http://www.mobilexweb.com">Mobile Web Blog</a></li>
                     <li><a href="http://www.oreilly.com">O'Reilly Media</a></li>
                </ul>


        </div>
     <div data-role="footer">
        <h4>© 2014 Johnzhangscorpio</h4>
     </div>
 </div>
 </body>
 </html>