jQuery Mobile 入门

最新推荐文章于 2021-08-06 20:39:54 发布

Never Yu

最新推荐文章于 2021-08-06 20:39:54 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： jquery mobile

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/52701686

版权

前端专栏收录该内容

179 篇文章 15 订阅

订阅专栏

jQuery Mobile简介

　　对于Web开发者来说，jQuery是非常流行的JavaScript类库，而且一直以来它都是为Web浏览器设计的，并没有特别为移动应用程序设计。jQuery Mobile则是用来填补jQuery在移动设备应用上的缺憾的一个新项目。它基于jQuery框架并使用了HTML 5 和 CSS 3这些新的技术，除了能提供很多基础的也懂页面元素开发功能外，框架自身还提供了很多可供扩展的API，以便于开发人员在移动应用上使用。使用该框架可以节省大量的JavaScript代码开发时间。
　　

jQuery Mobile主要特性

　　jQuery Mobile提供了非常友好的UI组件集合一个强有力的AJAX的导航系统，以支持动画页面转换。它的策略可以简单地总结为：创建一个在常见智能手机/平板电脑浏览器领域内能统一用户界面的顶级JavaScript库。概括起来，jQuery Mobile有以下特性：
　　(1) 基于jQuery构建
　　它采用与jQuery一致的核心和语法，这样能让学习者倍感熟悉，学习曲线也是最小的。另外，它还是用了jQuery UI 代码和模式。
　　
　　(2) 兼容绝大部分手机平台
　　jQuery Mobile以“Write Less，Do More”作为目标，为所有的主流移动操作系统平台提供了高度统一的UI框架，而不必为每个移动设备编写独特的应用程序。它兼容IOS、Android、Blackberry、Palm WebOS、Nokia/Symbian、Windows Mobile、bada和MeeGo等，只要是能解释标准HTML的设备就能提供最基本的支持。

　　(3) 轻量级的库
　　基于速度考虑，整个库非常轻量级，同时对图片的依赖也降到最小。

　　(4) 模块化结构
　　创建定制版本只包括应用所需的功能，而不需要修改应用的结构。

　　(5) HTML 5 标记驱动的配置
　　快速开发页面，把对开发人员的脚本能力需求降到最小化。

　　(6) 渐进增强原则
　　jQuery Mobile完全采用渐进增强原则：通过一个全功能的标准HTML网页和额外的JavaScript功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript，基于jQuery Mobile的移动应用程序仍能正常的使用，而较新的移动平台能获得更优秀的用户体验。

　　(7) 相应设计
　　通过灵敏的技术设置和工具，使得相同的基础代码块可以在不同屏幕大小中自动缩放。

　　(8) 强大的Ajax的导航系统
　　它使得页面之间跳转变得更加流畅，同时保持按钮，书签和地址栏的简洁。

　　(9) 易用性
　　一些辅助功能，比如WAI-ARIA，以确保页面可以在一些屏幕阅读器或者其他手持设备中正常工作。

　　(10) 支持触摸和鼠标事件
　　让触摸，鼠标，光标用户都能通过简单的API来流畅使用。

　　(11) 统一的UI组件
　　在触摸体验和主体化方面，jQuery Mobile加强和统一了本地控制。

jQuery Mobile的使用

首先去官方下载最新的jQuery Mobile版本。其次，建议在页面中使用HTML 5 标准的页面声明和标签，因为移动设备浏览器对HTML 5标准的支持程度要远远优于PC设置，因此使用简洁的HTML 5标准可以更加高效的进行开发，避免了因为声明错误出现的兼容性问题。代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title>标题</title>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>

jQuery Mobile可以在普通的html标签或html5标签中工作，在结构化的页面中，完整的页面结构分为header、content和footer这三个主要区域。一个最简单的jQuery Mobile代码如下：

<!DOCTYPE html>
<html>
  <head>
  <title>My Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mobile-1.0.1.min.js"></script>
  </head>
  <body>
  <div data-role="page">
    <div data-role="header">
      <h1>My Title</h1>
    </div>
    <div data-role="content">
      <p>Hello world</p>
    </div>
    <div data-role="footer">
      <h4>Footer content</h4>
    </div>
  </div>
  </body>
</html>

方便起见，提供本例中所用到的资源包下载：
jquery.mobile-1.0.1.min.css
jquery
jquery.mobile-1.0.1.min.js

效果图如下：
jquery-mobile-1

在上面代码中，我们引入了3个文件，这也是使用jQuery Mobile所必备的3个文件：
● CSS文件：jquery.mobile.css
● jQuery文件：jquery.js
● jQuery Mobile文件：jquery-mobile.js

注意：1.默认情况下，移动设备的浏览器会像在打屏幕的Web浏览器那样显示你的页面，宽度达到了960像素，然后缩小内容以适应移动设备的小屏幕，因此用户在移动设备看这个页面时感觉字体就比较小了，必须要放大才能看得清楚，幸运的是可以使用特殊的Meta元素可视区进行纠正，这个元素会通知浏览器使用移动设备的宽度作为可视区的宽度，对于Web应用程序，一个常见的设置是：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小。

2.在<head>中按顺序加入框架的引用，注意加载的顺序：

<link rel="stylesheet" href="jquery.mobile.css">
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>

再来看一个demo

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
        <h1>My Title</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" data-theme="d">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div data-role="footer">
        <h4>Footer content</h4>
    </div>

</div>
</body>
</html>

效果如如下：
jquery-mobile-2

在这个例子中，我们需要知道：

1.data-role属性

在上面的代码中可以看到页面中的内容都包装在div标签中，并在标签中加入data-role="page"属性。这样jQuery Mobile就会知道哪些内容需要处理。

注意：data-属性是HTML 5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中，只要添加的属性名有”data-“前缀。

在<ul>上我们使用了data-role="listview"，意思是设置元素为一个列表视图。
如果你不喜欢宽度为100%的列表，那么你可以通过为<ul>元素设置data-insert属性。例如为<ul>设置data-insert="true"。

2.样式切换

jQuery Mobile自带了一些不错的主题，这些主题能够快速的帮助开发人员修改页面的UI。我们只需在组件上添加data-theme属性即可。它的值是a、b、c、d或e。

写在最后：约定优于配置——-软件开发的简约原则.

——————————– (完)————————————–

我的
个人网站：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博：http://weibo.com/Neveryu

更多学习资源请关注我的新浪微博….

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">

Never Yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile 入门

jQuery Mobile简介　　对于Web开发者来说，jQuery是非常流行的JavaScript类库，而且一直以来它都是为Web浏览器设计的，并没有特别为移动应用程序设计。jQuery Mobile则是用来填补jQuery在移动设备应用上的缺憾的一个新项目。它基于jQuery框架并使用了HTML 5 和 CSS 3这些新的技术，除了能提供很多基础的也懂页面元素开发功能外，框架自身还提供了很多可供
复制链接

扫一扫