慕课网视频教程地址：
jQuery版本需要1.8以上版本的支持
html5没有必要加type="text/javascript"
基本的页面框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>
<body>
| here is the jQM code |
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.23.js"></script>
| here is the js code |
</body>
</html>
HTML5 data-*属性用于通过jQuery Mobile为移动设备创建交互外观
<div data-role="page">
<div data-role="header">
<h1> <h1>
</div>
<div role="mian" class="ui-content">
<p> <p>
</div>
<div data-role="footer">
<h1> <h1>
</div>
</div>
HERE IS THE JQM CODE
|
<div data-role="page">
<div data-role="header">
<h1> </h1>
</div>
<div data-role="main" class="ui-content">
<p>我是页面</p>
</div>
<div data-role="footer">
<h1> </h1>
</div>
</div>
|
在jQuery Mobile中，可以在单一HTML文件中创建多个页面
需要通过唯一的id来分隔每张页面，并使用href属性来连接彼此
|
<div data-role="page" id="index">
<div data-role="header">
<h1> </h1>
</div>
<div data-role="main" class="ui-content">
<p>我是页面1</p>
<p><a href="#index2">index2</a></p>
</div>
<div data-role="footer">
<h1> </h1>
</div>
</div>
<div data-role="page" id="index2">
<div data-role="header">
<h1> </h1>
</div>
<div data-role="main" class="ui-content">
<p>我是页面2</p>
<p><a href="#index">index</a></p>
</div>
<div data-role="footer">
<h1> </h1>
</div>
</div>
|
jQuery Mobile
拥有一系列如何从一页过渡到下一页的效果，过渡效果可以应用于任意链接
data-transition="slide"
| <p><a href="#index2" data-transition="slide"> index2 </a> </p> |
data-transition的属性值
slide： 默认值，从右到左滑动的页面效果
slideup： 向上滑动的动画效果
slidedown： 向下滑动的动画效果
pop: 以弹出的效果打开页面
fade: 渐变褪色的动画效果
flip: 旧页飞出，新页飞入的动画效果
jQuery Mobile拥有很多的页面事件
Page Initialization
页面创建前pagebeforecreate ，
页面创建时 pagecreate ，
页面初始化之后pageinit
|
<script>
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate");
});
$(document).on("pagecreate",function(){
alert("pagecreate");
});
$(document).on("pageinit",function(){
alert("pageinit");
});
</script>
|
Page Load/Unload-当外部页面加载时，卸载时或遭遇失败时（pagebeforeload ， 加载成功，并已经加入到dom中pageload）
Page Transition 在页面过度之前和之后（在过渡动画之前pagebeforeshow , 在过渡动画完成之后pageshow . 过渡页面开始前pagebeforehide . 过渡动画完成后 pagehide）
|
$(document).on("pagebeforehide","#index",function(){
alert("pagebeforecreate");
});
$(document).on("pagehide","#index",function(){
alert("pagehide");
});
$(document).on("pagebeforeshow","#index2",function(){
alert("pagebeforeshow");
});
$(document).on("pageshow","#index2",function(){
alert("pageshow");
});
|
区别一下pageinit和pageshow
pageinit是只在初始化的时候一次
pageshow是每次进入页面都执行
jQuery Mobile按钮
通过给a button 或者 input元素添加样式（或者增加data-role="button"）,可以创建按钮
<a class="ui-btn">我是按钮</a>
<input type="submit" value="我也是按钮">
这两种比较，前一种样式不丰富，通过这些可以设置样式
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-inline 并排显示
ui-btn-a 皮肤
ui-btn-b 皮肤
例子：
<a class="ui-btn">按钮1</a>
<a class="ui-btn">按钮2</a>
并排显示：
<a class="ui-btn ui-btn-inline">按钮1</a>
<a class="ui-btn ui-btn-inline">按钮2</a>
两种样式：
<a class="ui-btn ui-btn-a">按钮1</a>
<a class="ui-btn ui-btn-b">按钮2</a>
添加圆角和阴影:
<a class="ui-btn ui-btn-a ui-corner-all ui-shadow">按钮1</a>
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow">按钮2</a>
jQuery Mobile 导航栏
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部
导航栏中的链接会自动转换为按钮，使用data-role="navbar"属性来定义导航栏
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
</ul>
</div>
如果导航栏一行中超过5个，导航栏就会换行显示。因为移动端的屏幕显示问题，5个就已经很多了。
如何设置固定样式
data-position="fixed"
<div data-role="header" data-position="fixed">
<div data-role="footer" data-position="fixed">
如何添加图标
有很多内置的图表，参考官方文档和样式，也可以写出自己的icon
在超链接中加入data-icon="camera"
例如：<li><a href="#" data-icon="camera">导航</a></li>
jQueryMobile列表
jQuery Mobile中的列表视图是标准的HTML列表：
有序列表<ol>和无序列表<ul>
如需创建列表，需向<ol>或<ul>元素添加data-role="listview"
如需使这些项目可以点击，在每个列表项<li>中规定链接,链接显示的就是一个按钮
<div role="main" class="ui-content">
<ul
data-role="listview">
<li>
<a href="#">无序列表项1</a></li>
<li><a href="#">无序列表项2</a></li>
<li><a href="#">无序列表项3</a></li>
</ul>
</div>
列表不要贴边显示，要与屏幕边有一定的间距
data-inset="true"
<ul
data-role="listview" data-inset="true">
jQuery Mobile 可以实现格式比较复杂的列表：
class="ui-li-aside"内容显示到侧边的位置
<li><a href="#">
<h2>G1次</h2>
<p> 北京-上海 </p>
<p>用时：4,48</p>
<p
class="ui-li-aside">09:00:00</p>
</a></li>
jQuery Mobile查询表单（使用HTML原生表单即可）
<form>
<label>发车站</label>
<input type="text">
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单自适应 ui-field-contain 480px宽屏幕 窄屏幕之分界线
<form>
<div class="ui-field-contain">
<label>发车站</label>
<input type="text">
</div>
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单的id必须唯一
扫一扫
2024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
