jQuery mobile实现简单的web app
2017-03-14 本文已影响0人
Brighten_Sun
jquery mobile(JQM)
官网:http://jquerymobile.com/
jquery mobile需要依赖于jQuery 具体看官网下载下方会有提示需要什么版本以上的jQuery
如何编写一个基础的web app
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>我是标题</h1>
</div>
<div role="main" class="ui-content">
<p>我是内容</p>
</div>
<div data-role="footer">
<h2>我是底部</h2>
</div>
</div>
<script src="script/jquery-1.11.3.js"></script>
<script src="script/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
当需要多页面时,在body中编写为
<div data-role="page" id="index">
<div data-role="header">
<h1>我是标题</h1>
</div>
<div role="main" class="ui-content">
<p>我是内容</p>
<p><a href="#index2" title="">index2</a></p>
</div>
<div data-role="footer">
<h2>我是底部</h2>
</div>
</div>
<div data-role="page" id="index2">
<div data-role="header">
<h1>我是标题</h1>
</div>
<div role="main" class="ui-content">
<p>我是内容</p>
<p><a href="#index" title="">index</a></p>
</div>
<div data-role="footer">
<h2>我是底部</h2>
</div>
</div>
页面过渡效果:
这时简单的页面切换淡入淡出就已经做成了
如果你想让切换时的效果不同时可以在a标签中编写
<a href="#index" data-transition="slide" title="">index</a> 这时就是翻页效果
当然效果有什么多，比如: fade:默认值,渐变褪色的动画效果
slide:从右往左滑动的动画效果
slideup:向上滑动的动画效果
slidedown:向下滑动的动画效果
pop:以弹出的效果打开页面
flip:旧页飞出，新页飞入的动画效果
jquery mobile页面事件
页面初始页面
Page Initalization - 在页面创建前，当页面创建时，在页面初始化后
(pagebeforecreate, pagecreate, pageinit)
js编写:
$(document).on('pagebeforecreate',fn)
页面加载事件
Page Load/Unload - 当外部页面加载时，卸载时或遭遇失败时
(pagebeforeload, pageload)
页面过渡事件
Page Transition - 在页面过渡之前和之后
(pagebeforeshow, pageshow, pagebeforehide, pagehide)
js编写:
$(document).on('pagebeforeshow',id,fn) 在页面过渡时需要添加id
jquery mobile 创建按钮
通过给a、button或者input元素添加样式
(或者增加data-role="button"),可以创建按钮
<a href="#" class="ui-btn">按钮</a>
<button class="ui-btn">按钮</button>
data-role="button" 是优化过的哦
如果想自己设置按钮也是可以的，在class中添加
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-inline 按钮并排显示
ui-btn-a 按钮不同的样式(白色按钮)
ui-btn-b 按钮不同的样式(黑色按钮)
jquery mobile 创建导航栏
导航栏中的链接会自动转换为按钮
使用data-role="navbar"属性来定义导航栏
如果想让上下导航栏固定在上下
就在header和footer中添加data-position="fixed"属性就可以固定了
当按钮大于5个时 按钮会进行换行
如何添加导航栏图标
data-icon属性
jquery mobile 列表
如需创建列表，需向<ol>或<ul>元素添加data-role="listview"
如需使这些项目可点击，在每个列表项<li>中规定链接
ul中输入data-inset="true" 列表不会贴边显示
如果想让ui中的内容浮动到右上角 需要在内容元素中添加class="ui-li-aside"
<ul>
<li>
<a href="#" title="">
<h2>G1</h2>
<p>北京南 - 上海虹桥</p>
<p>用时:4:48</p>
<p class="ui-li-aside">09:00:00 开</p>
</a>
</li>
</ul>
jquery mobile 表单
使用原生的HTML即可
<form>
<label>发车站</label>
<input type="text" name="" >
<label>到达车站</label>
<input type="text" name="" >
<label>车次</label>
<input type="text" name="" >
</form>
如需自适应
宽屏幕为:480px以上
窄屏幕为:480px以下
编写代码为:class="ui-field-contain"
***要保证表单的ID为唯一的
jquery mobile 表格
reflow table mode 回流表格模式
编码样式
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
jquery mobile 事件
在jquery mobile 中可以使用任何标准的jQuery事件
jquery mobile 还提供若干为移动浏览定制的事件
触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载或卸载时触发
Touch事件在用户 触摸屏幕(页面)时 触发
tap事件在用户 敲击某个元素时 触发
taphold事件在用户 长按时 被触发
swipe事件在用户 在某个元素上水平滑动超过30px 时被触发
scrollstart事件在用户 开始滚动页面 时被触发
scrollstop事件在用户 停止滚动页面 时被触发......
事件中特别注意
在jQuery中:
$(document).ready(function(){
//此处是jQuery事件
})
在jquery mobile中:
$(document).on("pageinit","#page",function(){...})
建议用pageinit
jquery mobile Ajax
jquery mobile使用Ajax和在jQuery中一致
如果在请求时想显示转圈加载的样式
在点击按钮时Ajax获取前编写:$.mobile.loading("show");
获取后编写:$.mobile.loading("hide");
