jQuery Mobile 入门_mmmojq-程序员宅基地

技术标签: 前端  mobile  jquery  

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">


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/csdn_yudong/article/details/52701686

智能推荐

python 获取安装包apk, ipa 信息-程序员宅基地

文章浏览阅读528次。# -*- coding:utf-8 -*-import reimport osimport zipfilefrom biplist import *from androguard.core.bytecodes import apkclass AnalyzePackage: def get_android_data(self, package..._python命令如何查看apk和ipa版本

mysql 恢复日志文件_教你自动恢复MySQL数据库的日志文件(binlog)-程序员宅基地

文章浏览阅读176次。如果MySQL服务器启用了二进制日志,你可以使用mysqlbinlog工具来恢复从指定的时间点开始 (例如,从你最后一次备份)直到现在或另一个指定的时间点的数据。“mysqlbinlog:用于处理二进制日志文件的实用工具”。要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名。一般可以从选项文件(即my.cnf or my.ini,取决于你的系统)中找到路径。如果未包含在选项文件中..._mysql binlog日志以前的没了

在openEuler 21.09上配置远程桌面VNC-程序员宅基地

文章浏览阅读2.8k次。[root@opencloud iso]# dnf install -y tigervnc-server tigervnc-server-module[root@opencloud iso]# vncpasswdPassword:Verify:Would you like to enter a view-only password (y/n)? n[root@opencloud iso]#[root@opencloud ~]# vncserverNew 'open

【无标题】_unresolved requirement: require-capability: osgi.e-程序员宅基地

文章浏览阅读2.8k次。anypoint studio An erro has occorred.See the log file_unresolved requirement: require-capability: osgi.ee; filter:="(&(osgi.ee=jav

c# datagridview列头添加复选框实现全选_c# 在datagridview的头部有一个全选按钮,勾上后此列下的所有行的-程序员宅基地

文章浏览阅读1.5w次,点赞2次,收藏33次。1.datagridview列头添加复选框 网上查了很多资料,大都是通过添加自绘复选框类来实现的。经验证效果不错。/*****************************以下是自定义在datagridview列头绘制复选框*********************************************/ //定义继承于DataGridViewColumn_c# 在datagridview的头部有一个全选按钮,勾上后此列下的所有行的

服务器ie安全增强关闭还是显示,如何关掉ie浏览器的增强安全配置-程序员宅基地

文章浏览阅读6.6k次。在 Windows Sever 2012 中打开 IE 浏览器时,IE10 会出现【已启用 Internet Explorer 增强的安全配置】的提示信息。在安全性等级中会设置以【高安全性】,如果我想要关闭 Internet Explorer 增强的安全配置,该如何进行设置?问题的发生原因在 Windows Server 2012 通常扮演重要的服务器角色,不应该用来做上网等工作,可能会增强被攻击..._winserver2012关闭ie增强无效

随便推点

java socket:TcpNoDelay 参数详解_tcpnodelay默认值-程序员宅基地

文章浏览阅读404次。转载自 http://blog.csdn.net/huang_xw/article/details/7TcpNoDelay=false,为启用nagle算法,也是默认值。 Nagle算法的立意是良好的,避免网络中充塞小封包,提高网络的利用率。但是当Nagle算法遇到delayed ACK悲剧就发生了。Delayed ACK的本意也是为了提高TCP性能,跟应答数据捎带上ACK,同时避免糊涂窗口综_tcpnodelay默认值

dso slam跑自己数据_双目dso跑自己数据集-程序员宅基地

文章浏览阅读2.2k次。Dso slam跑自己数据使用文档Dso跑demo数据集非常容易成功,按照各博主经验一步一步做即可,但是如果将网上可下载下来的数据集换成我们自己的相机数据,就可能需要这份文档了1.从网上下载下来的dso源码经过编译之后无需安装,但在build中cmake …后可能出现无法出现bin目录的问题(也就是最后没有办法产生dso_dataset),这是因为cmakelists中#optional li..._双目dso跑自己数据集

SpringBoot 悲观锁 与 乐观锁-程序员宅基地

文章浏览阅读194次。乐观所和悲观锁策略悲观锁:在读取数据时锁住那几行,其他对这几行的更新需要等到悲观锁结束时才能继续 。乐观所:读取数据时不锁,更新时检查是否数据已经被更新过,如果是则取消当前更新,一般在悲观锁的等待时间过长而不能接受时我们才会选择乐观锁。在SELECT 的读取锁定主要分为两种方式:SELECT ... LOCK IN SHARE MODE SELECT ... FOR UPDATE..._springboot 乐观锁 悲观锁

jmeter+jenkins+ant部署持续集成测试-程序员宅基地

文章浏览阅读64次。原文地址:http://blog.csdn.net/kaluman/article/details/74535495开头的注意事项:1、所有的环境变量和代码,都需要使用英文的符号,变量之间都需要英文分号;隔开。2、配置环境时,最好切换到英文输入法进行,以免由于中文符号出错,不好查找原因。3、调试时,没有使用命令行工具,一直使用的Xshell。一、 安装包准备JD..._配置兼容测试报告样式的脚本持续集成

CSS 行内样式_行内css-程序员宅基地

文章浏览阅读1.7w次,点赞3次,收藏12次。本节我们要学习一下 CSS 样式的几种形式,在实际应用中向 HTML 中引入 CSS 样式的方法有三种,分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景,本节我们先来讲一下行内样式。什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的:<p style="font-size: 18px;">行内样式</p>HTML 中的 style 属性提供了一种改_行内css

iOS OpenGL ES2.0 开发实例 (转载)_opengles.framework-程序员宅基地

文章浏览阅读1.8k次。本教程源码地址下载:https://github.com/wanglixin1999/HelloGLOpenGL ES 是可以在iphone上实现2D和3D图形编程的低级API。如果你之前接触过 cocos2d,sparrow,corona,unity 这些框架,你会发现其实它们都是基于OpenGL上创建的。多数程序员选择使用这些框架,而不是直接调用OpenGL,因为OpenGL实在是太难用了_opengles.framework