jquery mobile 学习总结
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>index.html</title><!--初始化显示,可视窗宽度与设备宽度一致;不允许缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">
<script src="js/jquery-1.11.1.js"></script><!--注意顺序:css-jq-jq mobile,jq必须是1.8版本以后-->
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
$(document).on("pageinit","#index",function(){
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//点击请求之后,显示正在加载的图标
$.ajax({
type:"get",
url:"http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?TrainCode=G1&UserID=",
success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功之后将图标隐藏
}
});
});
});
</script>
</head>
<body> <!-- //data属性用于创建外观
在一个html中可以创建多个页面,通过id分隔每个页面,用href属性链接彼此。-->
<!--data-transition="";设置过渡效果,属性值:slide:右到左(默认);slideup:向上滑动;slidedown:向下滑动;none:没有效果 -->
<div data-role="page" id="index" data-transition="slide"> <!-- index代表首页,默认显示 -->
<div data-role="header" >
<h1>我是标题1</h1>
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="camera">首页</a></li>
<li><a href="###" data-icon="carat-l">搜索</a></li>
<li><a href="###" data-icon="carat-r">查询</a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content" >
<!--<p><a href="#index2">我是内容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###">
<h3>G次</h3>
<p>南宁-广州</p>
<p class="ui-li-aside">9:00开</p>
</a></li>
<li><a href="###">项目2</a></li>
<li><a href="###">项目3</a></li>
<li><a href="###">项目4</a></li>
</ul>
<form action="###">
<div class="ui-field-contain">
<label for="start">发车站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>-->
<div data-role="footer">
<h1>我是页脚1</h1>
<div data-role="navbar">
<ul>
<li><a href="javascript:void(0)">查询</a></li>
<li><a href="javascript:void(0)">收藏</a></li>
<li><a href="javascript:void(0)">设置</a></li>
</ul>
</div>
</div>
<input type="button" value="点我加载" id="ajaxBtn">
</div>
<div data-role="page" id="index2">
<div data-role="header" > <!-- index代表首页,默认显示 -->
<h1>我是标题2</h1>
</div>
<div role="mail" class="ui-content" >
<p><a href="#index">我是内容2</a></p>
</div>
<div data-role="footer">
<h1>我是页脚2</h1>
</div>
</div>
</body>
</html>
一、jquery mobile页面事件:
页面初始化事件:
pageboforecreate: 页面即将初始化的时候
pagecreate 页面已经创建,但是还没有加载元素之前
pageinit 页面完成了所有dom的加载之后
页面加载事件:
pageboforeload 页面加载请求之前
pageload 加载成功,并插入到dom中
页面过渡事件:page transition (假如从页面a过渡到页面b,那么执行顺序为2 4 3 1)
pageboforeshow:2在过渡动画开始之前
pageshow 4 :过渡动画完成之后
pageboforehide:1
pagehide:3
区别:
pageinit:页面初始化时,只执行一次
pageshow:页面显示的时候每次都会执行
二、按钮:
创建按钮:
如果是a button input则添加class="ui-btn"
如果是其它元素,则添加data-role="button"
<a class="ui-btn ui-btn-inline ui-btn-a">点击</a>
<input type="submit" value="按钮"> input已经默认是按钮,并且已经默认有圆角和阴影,其它则没有。
按钮样式:
ui-corner-all圆角
ui-shadow 阴影
ui-btn-inline 并排显示
ui-btn-a 换皮肤
ui-btn-b 换皮肤
三、导航栏(导航栏有一组水平排列的链接构成,通常位于页眉或者页脚)
1、使用data-role="navbar",导航栏中的链接会自动转换为按钮。
2、在页眉和页脚中使用data-position="fixed",导航栏就会固定在上部和下部,不随滚动滚动。
3、导航栏如果5个以内就会显示在同一排,查过5个,就会分成多。
4、给导航栏增加图标:data-icon="",默认在文字上方,具体样式可参考官方文档。
<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="carat-l">首页</a></li>
<li><a href="###" data-icon="carat-r">搜索</a></li>
<li><a href="###" data-icon="camera">查询</a></li>
</ul>
</div>
</div>
四、列表
只需要在ul、ol中使用data-role="listview",就会自动变成有样式的列表,如果使用data-inset="true",四周就会自动增加外边距。
添加class="ui-li-aside",就会显示到右上角。
<div role="main" class="ui-content" >
<p><a href="#index2">我是内容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###"><p class="ui-li-aside">9:00开</p></a></li>
<li><a href="###">项目2</a></li>
<li><a href="###">项目3</a></li>
<li><a href="###">项目4</a></li>
</ul>
</div>
五、表单
1、每个input都要有一个label,一个name和一个id。
2、为每一个input增加class="ui-field-contain",就可以让表单自适应。
<form action="###" methor="post" id="myForm">
<div class="ui-field-contain">
<label for="start">发车站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>
六、表格
回流表格: <table data-role="table" data-mode="reflow" class="ui-responsive" ></table>
再添加一个class="table-stroke",就会自动增加下划线。
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>
七、事件
jq-mobile中可以使用jq中任何标准的jq事件,此外还有一些专门为移动浏览定制的事件。
触摸事件:
touch(用户在触摸屏幕时发生)
tap(用户在短暂敲击某个元素时触发)
taphold(用户在敲击某个元素并保持一秒以上时触发,即长按)
swipe:在某个元素上水平滑动超过30px时触发
滚动事件:上下滚动时 scrollstart(开始滚动页面时)scrollstop(停止滚动时)
方向事件:垂直或水平旋转
页面事件:页面被显示、隐藏、创建、加载或卸载时
pageinit(初始化完成)
pageload(加载完成)
pageshow(显示完成)
注意:在jq中使用$(document).ready(function(){});
在jq mobile中使用$(document).on("pageinit","#page",function(){});
表示页面已经初始化并完善样式设置后发生
八、ajax
跨域问题:如果可以修改后台的话,返回格式为:jsonp;并添加参数:callback=xxx;服务器返回xxx(...);
如果没办法修改后台,可以使用其他的跨域中转如:http://crossorigin.me/和http://atcors.herokuapp.com/;
<input type="button" value="点我加载" id="ajaxBtn">
<script>
$(document).on("pageinit","#index",function(){//参数1:初始化完成后,参数2:某个页面的id;参数3:回调函数
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//点击请求之后,显示正在加载的图标
$.ajax({
type:"get",
url:"http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?TrainCode=G1&UserID=",
success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功之后将图标隐藏
}
});
});
});
</script>