1. jQueryMobile的概念
jQuery Mobile是jQuery在手机上和平板上设备上的版本。 jQuery Mobile给主流移动平台带来jQuery核心库。与 jQuery核心库一样，你不需要安装任何东西，只需要将*.js和*.css文件直接包含在你的web页面中即可。
2. jQuery Mobile事件：
jQuery Mobile提供了针对移动端浏览器的事件
1）触摸事件:当用户触摸屏幕时触发
2）滑动事件：当用户上下滑动时触发
3）定位事件：当设备水平或垂直翻转时触发
4）页面事件:当页面显示，隐藏，创建，加载或未加载时触发
3. 下载jQuery Mobile:
http://jquerymobile.com/download/
4. 简单的Page的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置设备适配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--Page的使用:页面如何构建-->
<div data-role="page">
<!--设定页面的，头部，主体，以及脚部-->
<!--
data-position="fixed":起到固定的作用，想要让它消失，只需要点击下就可以了
-->
<div data-role="header" data-position="fixed">
<h1>这是头部</h1>
</div>
<div role="main">
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>这是底部</h4>
</div>
</div>
</body>
</html>
5.jQuery Mobile的事件
1）pageinit：在dom元素加载完成之后才执行的事件
2）tap:触摸事件
3）taphold:常按事件
4）swipe:滑动的时候处理的事件
5）swipeleft:向左滑动
6）swiperight:向右滑动
7）scrollstart:滑动页面时进行触发
8）scrollstop:滑动页面停止时触发
9）orientationchange：当设备方向改变的时候进行触发
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置设备适配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on('pageinit',function(){
//alert('hello');
//点击事件
//$('p').on('tap',function(){
//常按事件
//$('p').on('taphold',function(){
//滑动事件
//$('p').on('swipe',function(){
//$('p').on('swipeleft',function(){
/* $('p').on('swiperight',function(){
$(this).hide();
})*/
//滑动开始
//$(document).on('scrollstart',function(){
//滑动停止
$(document).on('scrollstop',function(){
alert('停止了滑动');
})
})
</script>
</head>
<body>
<!--Page的使用:页面如何构建-->
<div data-role="page">
<!--设定页面的，头部，主体，以及脚部-->
<!--
data-position="fixed":起到固定的作用，想要让它消失，只需要点击下就可以了
-->
<div data-role="header" data-position="fixed">
<h1>my head</h1>
</div>
<div data-role="content">
<!--<p>点击我进行隐藏</p>-->
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
<p>滑动我进行隐藏</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
6.jQuery Mobile Widgets(1)
1）页面切换
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<!--设置设备适配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>my head</h1>
</div>
<div role="main">
<!--点击跳转到pagetwo-->
<a href="#pagetwo" data-transition="flip">跳转到 pagetwo</a>
<!--如何将第二个页面当成对话框的形式显示-->
<a href="#pagetwo" data-rel="dialog">jump pagetwo</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>my head</h1>
</div>
<div role="main">
<!--点击跳转到pageone-->
<!--data-transition:指定你想要的跳转效果-->
<a href="#pageone" data-transition="flip">跳转到 pageone</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
2）Button
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置设备适配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>my head</h1>
</div>
<div data-role="content">
<button>按钮</button>
<input type="button" value="button"/>
<a href="#" class="ui-btn ui-shadow">按钮</a>
<!--删除按钮
ui-btn:按钮样式
ui-icon-delete:删除样式
ui-btn-icon-notext:不现实文本
ui-corner-all:边角
-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>
<!--在一排的按钮-->
<a href="#" class="ui-btn ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-btn-inline">按钮2</a>
<a href="#" class="ui-btn ui-btn-inline">按钮3</a>
<a href="#" class="ui-btn ui-btn-inline">按钮4</a>
<!--让按钮之间没有空隙-->
<!--
data-role="controlgroup"
data-type="horizontal"
-->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮2</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮3</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮4</a>
</div>
<!--更换按钮的主题-->
<a href="#" class="ui-btn ui-btn-a">hello</a>
<a href="#" class="ui-btn ui-btn-b">hello</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
3）Checkboxradio
4）Collapsible
5）Controlgroup
网友评论