基于jQuery Mobile的Web APP开发-列车时刻表

jQuery Mobile 是创建移动WEB应用程序的框架，使用广泛。
web app就是一个针对移动设备的网站。

jQuery Mobile简介

jQuery Mobile(JQM/jQMobile):是jQuery在手机上和平板设备上的版本，是创建移动Web App的框架。它提供了一整套UI组件，提供了丰富的官方文档，还提供了很多针对移动端浏览器的事件，比如触摸、滑动、页面跳转等。

jQuery Mobile页面

基本的页面框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css" />
    <title>列车时刻表</title>
</head>
<body>
<script src="js/jquery-1.11.1.js"></script> 
<script src="js/jquery.mobile-1.4.3.js"></script>   
</body>
</html>

通常，一个页面应该拥有标题栏，内容，页脚三个部分。
HTML5 data-属性用于通过jQuery Mobile为移动设备创建交互外观。
HTML5 data-属性。一个页面：data-role:page 标题：data-role:header 内容：role:main class=ui-content 页脚：data-role:footer（HTML5的属性值可以省略引号。注意内容的属性是role而不是data-role）

<div data-role="page">
    <div data-role="header">
        <h1>我收标题</h1>
    </div>
    <div role="main" class="ui-content">
        <p>我是内容</p>
    </div>
    <div data-role="footer">
        <h1>我收页脚</h1>
    </div>
</div>

在jQuery Mobile中，可以在单一HTML中创建多个页面。通过唯一的id来分割每张页面，并使用href属性来连接彼此。
页可以通过js来实现：
$.mobile.changePage("#detail");

过渡效果
jQuery Mobile拥有一系列关于如何从一页过渡到下一页的效果。过渡效果可应用于任意链接，如data-transition="slide"
data-transition的属性值：

slide:默认值，从右到左滑动
slideup:向上滑动
slidedown:向下滑动
popo:弹出
fade:渐变褪色
flip:旧页飞出，新页飞入

页面事件
jQuery Mobile拥有很多页面事件
1、page Initialization(页面初始化) - 在页面创建前(触发pagebeforcreate事件)，当页面创建时(触发pagecreate事件)，以及在页面初始化之后(触发pageinit事件，初始化一次)
2、page load/Unload - 当外部页面加载时、卸载时或遭遇失败时(pagebeforeload，pageload)
3、page Transition - 在页面过渡之前或之后
去的页面过度动画开始之前 pagebeforeshow，
去的页面过度动画完成之后 pageshow(每次进入页面都执行)，
来的页面过度动画开始之前 pagebeforehide，
来的页面过度动画完成之后 pagehide

jQuery Mobile组件

jQuery Mobile按钮

通过给a、button或input元素添加样式class="ui-btn"(或者添加data-role=”button”),来创建按钮。
<a href="#" class="ui-btn">按钮</a>
<button class="ui-btn">我也是按钮</button>
<input type="submit" value="我是按钮" >

JQM提供的button样式类，可以通过添加这些类，改变按钮显示的样式：

ui-btn-inline: 在一行显示
ui-btn-a: 按钮为白色样式
ui-btn-b: 按钮为黑色样式
ui-corner-all: 按钮为圆角
ui-shadow: 添加阴影效果

jQuery Mobile禁用按钮方法：
禁用button
$('#home-button').button("disable");
如果要恢复可用，则设置为：
$('#home-button').button("enable");

jQuery Mobile导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部；
导航栏中的链接会自动转换为按钮；
使用data-role=”navbar”属性来定义导航栏;

<div data-role="navbar">
    <ul>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
    </ul>
</div>

使用data-position="fixed",固定元素,给头部和尾部加上该属性后将会固定在页面指定的位置不会随着主题内容的变化而滚动

使用data-icon属性可以给导航栏的按钮增加图标

<li><a href="#" data-icon="camera">123</a></li>

jQuery Mobile列表

jQuery Moile中的列表视图是标准的HTML列表：有序列表(ol)和无序列表(ul)
如需创建列表，需向ol/ul元素添加data-role="listview";
如需使这些列表项目可点击，在每个列表项li中规定链接即可。有链接的列表会有默认的向右箭头。
data-inset="true"不贴边显示列表，有margin，是内部列表.
ui-li-aside位置在右上角

<ul data-role="listview" data-inset="true">
    <li><a href="#" >
        <h2>G1次</h2>
        <p>北京南 - 上海东</p>
        <p>用时：4:50</p>
        <p class="ui-li-aside">09:20开</p>
    </a></li>
    <li><a href="#">123</a></li>
    <li><a href="#">123</a></li>
</ul>

QueryMobile listview动态刷新
$("#list").listview("refresh");

jQuery Mobile表单

JQM对原生的HTML表单进行了处理。
如果表单的一个条目（如提示语和输入框）需要自适应，添加class=ui-field-contain即可。
表单的ID必须唯一，注意一个页面中包含多个页面时，也要唯一.

<form action="">
    <div class="ui-field-contain">
        <label for="">发车站</label>
        <input type="text">
    </div>
    <div class="ui-field-contain">
        <label for="">到车站</label>
        <input type="text">
    </div>
    <div class="ui-field-contain">
        <label for="">车次</label>
        <input type="text">
    </div>
</form>

jQuery Mobile表格

JQM为表格提供回流表格模式：宽屏下，是一个普通表格；窄屏下，是一个表单式表格
回流表格模式 - reflow table mode
data-role="table" data-mode="reflow" class="ui-responsive"
表格增加下滑线class="table-stroke"

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
    ...

jQuery Mobile事件

在jQuery Mobile中可以使用任何标准的jQuery事件；
jQuery Mobile还提供若干为移动浏览定制的事件：

触摸事件-当用户触摸屏幕时触发(敲击和滑动)
滚动事件
方向事件-当设备垂直或水平旋转时触发
页面事件-当页面被显示、隐藏、创建、加载或卸载时触发。
Touch事件在用户触摸屏幕（页面）的时候触发
tap事件在用户敲击某个元素时触发
taphold事件在用户敲击某个元素并保持1秒时被触发
swipe事件在用户在某个元素上水平滑动超过30px时被触发
scrollstart事件在用户开始滚动页面时被触发
scrollstop事件在用户停止滚动页面是被触发

jQuery Mobile事件加载
jQuery中：

1
2
3

$(document).ready(function(){
//此处是jQuery事件……
});

在jQuery Mobile中：
推荐使用pageinit事件（在页面已初始化并完善样式设置后发生）
$(document).on("pageinit","#page",function(){……

jQuery Mobile Ajax

jQuery Mobile使用Ajax和在jQuery中一致。

Ajax跨域

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许JS代码进行跨域操作，因此会出现警告信息。
一般jQuery解决跨域是通过jsonp的方式，添加callback=xxx,服务器返回xxx(…)

通过CORS(跨域资源共享) Proxy对请求进行转发，就可以实现跨域访问。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin属性为true来进行的。

直接通过前端方法来实现跨域：
一个方便的方法：www.corsproxy.com。在地址后加上url,如url地址为www.xxx.com/service,则修改为www.corsproxy.com/www.xxx.com/service即可。

var urlPre = "http://cors.itxti.net/?"; //跨域中转
var url1 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=&TrainCode=G1"
$.get(urlPre+url1,{TrainCode:G1010},function(data){
    alert(data);
    })

火车时刻表 WEB 服务查询：http://ws.webxml.com.cn/WebServices/TrainTimeWebService.asmx

页面逻辑连通

var urlPre = "http://cors.itxti.net/?"; //跨域中转
var url1 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=";
var url2 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=";
var url3 = "www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=";
var isbind=0;
// 获取车次列表
var getTrainList = function(){
    if ($("#search-no").val()||($("#search-begin").val()&&$("#search-end").val())) {
        var searchButton=$(this);
        // searchButton.attr("disabled",true);
        searchButton.button("option","disabled",true);
        $.mobile.loading("show");
        var _data={};
        var _url=url1;
        if (!$("#search-no").val()) {
            _data.StartStation=$("#search-begin").val();
            _data.ArriveStation=$("#search-end").val();
        }else{
            _data.TrainCode=$("#search-no").val();
            _url=url2;
        }
        $.get(urlPre+_url,_data,function(data){
            $("#list").html("");
            var list=$("#list");
            var timeTables=$(data).find("TimeTable");
            var _arr=[];
            timeTables.each(function(index,obj){
                var i=index;
                if (i>10) return false;
                var that=$(this);
                if (that.find("FirstStation").text()=="数据没有被发现") {
                    alert("数据没有被发现！");
                    return false;
                }
                _arr.push('<li><a href="#" data-no="'+
                    that.find("TrainCode").text()+'">'+
                    '<h2>'+that.find("TrainCode").text()+'次</h2>'+
                    '<p>'+that.find("FirstStation").text()+' - '+that.find("LastStation").text()+'</p>'+
                    '<p>用时：'+that.find("UseDate").text()+'</p>'+
                    '<p class="ui-li-aside">'+that.find("StartTime").text()+' 开</p>'+
                    '</a></li>'
                    );
            });
            if (_arr.length>0) {
                list.html(_arr.join(""));
                list.listview("refresh");
            }
            $.mobile.loading("hide");
            searchButton.button("option","disabled",false);
        });

    }else{
        alert("请输入发车站和终点站，或者输入车次！");
    }
}
//查看车次详细信息
var isAjax=false;
var getInfoByTrainCode=function(){
    $.mobile.loading("show");
    var trainCode=$(this).attr("data-no");
    if (isAjax) return;
    isAjax=true;

    $.get(urlPre + url3,{TrainCode:trainCode},function(data){
        isAjax=false;
        $("detail").find(".ui-content h2").html(trainCode+"次");
        var tbody=$("#detail").find(".ui-content tbody");
        tbody.html("");
        $(data).find("TrainDetailInfo").each(function(index,obj){
            var tr=$("<tr></tr>");
            var that=$(this);
            tr.html('<td>'+that.find("TrainStation").text()+'</td>'+
                '<td>'+that.find("ArriveTime").text()+'</td>'+
                '<td>'+that.find("StartTime").text()+'</td>');
            tbody.append(tr);
        });
        $.mobile.loading("hide");
        $.mobile.changePage("#detail");
    });
};
//绑定事件
var bindEvent= function(){
    $("#search-submit").on("click",getTrainList);
    $("#list").on("click","a",getInfoByTrainCode);
}

$(document).on("pageshow","#index",function(){
    if (isbind) return;
    isbind=1;
    bindEvent();
});

Demo下载：

在线视频
 在线浏览