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>
<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> 

<div data-role="page" id="index" data-transition="slide"> 
<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>

</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="",默认在文字上方，具体样式可参考官方文档。

四、列表
只需要在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",就会自动增加下划线。

七、事件
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>

jquery mobile 学习总结的更多相关文章

jQuery Mobile 学习
jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021
jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
Jquery Mobile 学习笔记(一)
1.模拟器,IOS:XCODE GENYMOTION ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...
Jquery mobile 学习笔记
最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...
Android+Jquery Mobile学习系列(9)-总结和代码分享
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...
Android+Jquery Mobile学习系列(6)-个人信息设置
本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...
Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...
Android+Jquery Mobile学习系列-目录
最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以 ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
jQuery Mobile学习日记（二）
首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3 ...

随机推荐

Alarm(硬件时钟) init
http://blog.csdn.net/angle_birds/article/details/17302297 Alarm就是一个硬件时钟,前面我们已经知道它提供了一个定时器,用于把设备从睡眠状态 ...
C4D to Unity3D插件C2U Tool开源发布！简化你的工作流
Unity早期有对.c4d文件进行支持,但缩放问题,不支持顶点色,以及目标机器必须安装C4D等都极为蛋疼,这是这款工具开发的初衷之一.C2U工具解决了传统FBX导出的诸多问题,以及脚本链接,Shade ...
JAVA学习随笔-.class
类名.class是获得这个类所对应的Class实例.从面向对象的角度上来看,类也是对象,它们是类这个类对象,听起来有些抽象,但是在java中的实现就是所有的加载进来的类在虚拟机中都是一个java.la ...
WinMain函数详解(转载)
略加增添与修改! 工具:VC++6.0 系统:win7 64位在Windows应用程序中,我们可以认为 WinMain() 函数是程序的入口,WinMain()的原型如下: int WI ...
reactjs入门到实战（十）----one-first_app
index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- ...
2016年11月2日星期三 --出埃及记 Exodus 19:18
2016年11月2日星期三 --出埃及记 Exodus 19:18 Mount Sinai was covered with smoke, because the LORD descended on ...
利用JAVA Service Wrapper把JAVA程序做成windows服务
今天做了一个读取数据入库的程序.由于读取的数据每天都更新,于是就想把程序做成一个服务,每天定时执行.研究了一下,发现有几种方式可以做.下面我主要记录一下JAVA Service Wrapper方式. ...
flume+hadoop
摘自:http://www.kankanews.com/ICkengine/archives/130646.shtml
动态加载JS
<script> Date.prototype.format = function(format) { var o = { , //month "d+" : this. ...
java中判断从数据库中取出的字段是否为空
方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低.1:if(s == null || s.equals(""));方法二: 比较字符串长度, 效率高, 是我知道的最好一 ...

jquery mobile 学习总结

jquery mobile 学习总结的更多相关文章

随机推荐

热门专题