jQuery Mobile移动开发
1.在<head>元素中包括JavaScript文件是传统的方法。然而，依据Yahoo！”80%的终于用户响应时间在前端上”的说法，这些事件大部分花在资产的下载上，比如样式表，图片，脚本等。降低这些资产的数量明显非常重要，在HTML文件的最后包括JavaScript也变得更加常见。这是由于脚本阻止并行下载，也就是说其它资产在每一个脚本单独下载完之前无法下载。为了确保脚本放在正确的位置，在</html>结束标记之前包括它。
2.注意：创建自己定义 data- 属性的唯一限制是属性的自己定义部分的长度至少为一个字符，不能包含大写字母。
3.jQuery Mobile框架一次仅仅能显示当中一个页面，使用 data-title 属性动态改变页面标题。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>切换页面</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head> <body class="container"> <!-- page 1 -->
<div data-role="page" id="page-one" data-title="Page 1"> <div data-role="header">
<h1>Page 1</h1>
</div> <div data-role="content">
<p>Body copy for page 1</p>
<p><a href="#page-two">Link to page 2</a></p>
</div> <div data-role="footer">
Copyright
</div> </div> <!-- page 2 -->
<div data-role="page" id="page-two" data-title="Page 2"> <div data-role="header">
<h1>Page 2</h1>
</div> <div data-role="content">
<p>Body copy for page 2</p>
<p><a href="#page-one">Link to page 1</a></p>
</div> <div data-role="footer">
Copyright
</div> </div>
</body>
</html>
4.用jQuery Mobile创建主要的对话框窗体非常easy。仅仅要在不论什么链接锚标记上使用data-rel属性，并将其值设置为dialog。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>对话框</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head> <body> <div data-role="page"> <div data-role="header">
<h1>Dialog Test</h1>
</div> <div data-role="content">
<p><a href="#multipage-dialog" data-rel="dialog">Open Muti-page Dialog</a></p>
</div> <div data-role="footer">
Copyright
</div> </div> <div data-role="page" id="multipage-dialog"> <div data-role="header">
<h1>Multi-page dialog window</h1>
</div> <div data-role="content">
<p><a href="dialog.html" data-rel="back">OK</a></p>
</div> </div> </body>
</html>
5.很多输入元素类型被jQuery Mobile自己主动增强为按钮。这包含类型属性被设置为button，submit，reset或image的输入元素，它们的默认外观都同样。更改这样的默认的增强的唯一手段是将data-role设置为none。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>编辑对话框</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head> <body> <div data-role="page"> <div data-role="header">
<h1>John Doe</h1>
<a href="#options-dialog" data-icon="gear" class="ui-btn-right" data-rel="dialog">Edit Profile</a>
</div> <div data-role="content">
<p>123 E Street</p>
<p>Chicago, I1 60622</p>
</div> <div data-role="footer">
Copyright
</div> </div> <div data-role="page" id="options-dialog"> <div data-role="header">
<h1>Edit John Doe</h1>
<a href="#" data-icon="check">Save</a>
</div> <div data-role="content">
<label for="profile-image">Profile Image</label>
<p><img src="images/boy.jpg"></p>
<input type="file" id="profile-image" name="prfile-image">
<label for="street-address">Street Address</label>
<input type="text" id="street-address" name="street-address" value="123 E Street">
<label for="city">City</label>
<input type="text" id="city" name="city" value="Chicago">
<label for="state">State</label>
<input type="text" id="state" name="state" value="I1">
<label for="zip-code">Zip Code</label>
<input type="text" id="zip-code" name="zip-code" value="60622">
</div> </div> </body>
</html>
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>controlgroup</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
<style type="text/css">
.align-left{ float:left;}
.align-right{ float:right;}
</style>
</head> <body class="container"> <div data-role="page" id="page-one"> <div data-role="header">
<div data-role="controlgroup" data-type="horizontal" class="align-left">
<a href="#" data-role="button" data-icon="home">Home</a>
<a href="#" data-role="button" data-icon="arrow-l">Back</a>
</div>
<div data-role="controlgroup" data-type="horizontal" class="align-right">
<a href="#" data-role="button" data-icon="delete">Delete</a>
<a href="#" data-role="button" data-icon="check">Save</a>
</div>
<h1>Page</h1>
</div> <div data-role="content">
<p>Body</p>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
6.jQuery Mobile框架巧妙地依据button数量平均切割navbar的空间。唯一须要注意的是，假设它们包括超过5个超链接，就会開始卷绕到多行。这从某种程度上来说是一种局限，可是也是可取之处，由于移动设备没有足够的水平空间容纳这么多button。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>navbar</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header" data-fullscreen="true" data-position="fixed">
<img alt="header" src="images/header.png">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-iconpos="top">Home</a></li>
<li><a href="#" data-icon="arrow-l" data-iconpos="top">Edit</a></li>
<li><a href="#" data-icon="arrow-r" data-iconpos="top">Search</a></li>
<li><a href="#" data-icon="arrow-u" data-iconpos="top">About</a></li>
<li><a href="#" data-icon="arrow-d" data-iconpos="top">Help</a></li>
</ul>
</div>
</div> <div data-role="content">
<p>Body</p>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
7.网格行--具有ui-block-a类的每一个元素自己主动清除行，建立一个新行。查看jQuery Mobile框架中包括的用于ui-block-a类的实际CSS，你就会发现它清除了左浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ui-block</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header">
<h1>Head</h1>
</div> <div data-role="content">
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-b">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-b">D</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-b">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-b">D</div>
</div>
</div>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
8.为容器加入collapsible data-role，标题元素自己主动转换为一个button，可用来展开和收起段落。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>collapsible</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header">
<h1>Head</h1>
</div> <div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h3>Collapsible content header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div data-role="collapsible">
<h3>Collapsible child #1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div data-role="collapsible">
<h3>Collapsible child #2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
9.要定义可折叠面板，必须创建一个包括一组可折叠内容区域的容器元素。在这个容器元素上，data-role必须设置为collapsible-set值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>collapsible-set</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header">
<h1>Head</h1>
</div> <div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Collapsible child #1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div data-role="collapsible">
<h3>Collapsible child #2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
10. jQuery Mobile在无序列表元素的開始标记中附加了一个值为listview的data-role属性，对这些列表元素进行增强。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>listview</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header">
<h1>Head</h1>
</div> <div data-role="content">
<ul data-role="listview">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">More</a></li>
</ul>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
11.jQuery Mobile框架使得在列表中加入一个搜索过滤栏很easy：仅仅要为列表加入一个data-filter属性，并将值设置为true就可以，能够用附加属性data-filter-placeholder改动默认文本，该属性用于有序列表或者无序列表的開始元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>filter</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page"> <div data-role="header">
<h1>Head</h1>
</div> <div data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search the song list ...">
<li>Across The Universe</li>
<li>Act Naturally</li>
<li>Ain't She Sweet</li>
<li>Baby It's You</li>
<li>Bad Boy</li>
<li>Because</li>
</ul>
</div> <div data-role="footer">
Copyright
</div> </div> </body>
</html>
12.为滚动栏加入高亮显示 data-highlight="true"
<label for="my-slider">My slider</label>
<input type="range" name="slider" id="my-slider" value="50" min="0" max="100" step="10" data-highlight="true">
13.切换开关 data-role="slider"
<label for="flip-switch">Do you like pizza?</label>
<select name="flip-switch" id="flip-switch" data-role="slider" data-highlight="true">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
14.jQuery Mobile有一个主题系统，包括了由字母“a”到“e”定义的5个样本。样本能够在单个网页上混合和匹配，同意全然自己定义，使用样本非常easy，仅仅要使用data-theme属性就可以。
<a href="#" data-role="button" data-theme="a">Swatch A</a>
<a href="#" data-role="button" data-theme="b">Swatch B</a>
<a href="#" data-role="button" data-theme="c">Swatch C</a>
<a href="#" data-role="button" data-theme="d">Swatch D</a>
<a href="#" data-role="button" data-theme="e">Swatch E</a>
15.jQuery Mobile包括一个名为mobileinit的初始化事件，它在jQuery的document.ready事件之前载入。这使得你能够覆盖和扩展jQuery Mobile的默认全局选项，也是全部自己定义的開始。为了扩展mobileinit事件，你必须正确排列JavaScript的顺序。你必须在jQuery Mobile载入之前，jQuery框架载入之后包括自己定义JavaScript事件处理器。
jQuery Mobile移动开发的更多相关文章
- PhoneGap与Jquery Mobile组合开发android应用的配置
PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...
- (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...
- 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)
使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...
- jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明
近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...
- PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
- PhoneGap&jQuery Mobile应用开发环境配置（For Android）
关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...
- jquery mobile开发笔记之Ajax提交数据（转）
http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- jquery mobile 教程
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...
随机推荐
- 硬件——STM32 , 录音,wav
详细的wav头文件解析,有例子:http://www.cnblogs.com/chulin/p/8918957.html 关于录音程序的编写: 我的思路是改写原子的程序,原子的程序需要借助VS1053 ...
- NSNotificationCenter消息通信(KVO)
NSNotificationCenter是程序不同类间的消息通信. 注册消息通知: [[NSNotificationCenter defaultCenter]addObserver:self sele ...
- C#学习笔记——常量、字段以及事件
一 常量与字段 (一) 常量 常量总是被视为静态成员,而不是实例成员.定义常量将导致创建元数据.代码引用一个常量时,编译器会在定义常量的程序集的元数据中查找该符号,提取常量的值,并将值嵌入IL中.由于 ...
- numpy 高阶函数 —— np.histogram
np.diff(a, n=1, axis=-1):n 表示差分的阶数: >> x = np.array([1, 2, 4, 7, 0]) >> np.diff(x) array ...
- Redis学习笔记--Hash（五）
Redis的数据是通过key-value的方式存储的,对于value的数据类型有字符串.Hash.list.set.sortedSet在redis命令语句中,语句是忽略大小写的,但是key是不可以忽略 ...
- python课程：python3函数
摘自廖雪峰的网站:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014316 ...
- 32、从零开始写CMOS摄像头驱动
使用的内核:linux-3.4.2 参考源码:第32课_新内核下的I2C驱动\i2c\1th_i2c_new_device第2课第1.1.7节文档和图片(从0写USB摄像头)\myuvc 设备地址:写 ...
- 前端css常用的选择小汇
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.选择器就是选择器用来指定样式的作用范围. 类选择器: 类选择器在css中比较常见,首先要在普通标签中设置 ...
- 浅浅的分析下es6箭头函数
原文链接:http://damobing.com/?p=589 前言 箭头函数作为es6重点的语法内容之一,很多开发者对其爱不释手,当也要注意其可能存在的问题,其正确的使用场景,否则会引起不必要的bu ...
- Linux 下查看线程信息
1. 使用 pstree -p PID ps aux | grep firefox | grep -v grepcharles 26058 0.0 0.0 4908 1152 ? ...