WebApp之JQuery Mobile实现火车列表信息查询_html-js-css

概述一、项目源代码如下：&lt!-- --&gt&lt!DOCTYPE html&gt&lthtml&gt&lthead&gt &ltmeta charset="utf-8"&gt &lttitle&gt列车时刻表查询&lt/title&gt &ltmeta name="viewport" content="width=device-width

1、项目源代码以下：

<!-- --><!DOCTYPE HTML><HTML><head>    <Meta charset="utf⑻">    <Title>列车时刻表查询</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <link rel="stylesheet" href="CSS/jquery.mobile⑴.4.3.CSS"/></head><body><!-- 第1个页面  开始--><div data-role="page" ID="index">    <div data-role="header" data-position="fixed" >        <h1>列车时刻表查询</h1>    </div>    <div role="main" class="ui-content">        <div class="ui-fIEld-contain">            <label>发车站:</label>            <input type="text" name="text-basic" ID="search-begin" value="">        </div>        <div class="ui-fIEld-contain">            <label>终点站:</label>            <input type="text" name="text-basic" ID="search-end" value="">        </div>        <div class="ui-fIEld-contain">            <label>车次:</label>            <input type="text" name="text-basic" ID="search-no" value="">        </div>        <input type="button" value="搜索" ID="search-submit">        <ul data-role="ListvIEw" data-inset="true" ID="List">        </ul>    </div>    <div data-role="footer"  data-position="fixed">        <div data-role="navbar">            <ul>                <li><a href="#" data-icon="grID" class="ui-btn-active">查询</a></li>                <li><a href="#" data-icon="star">收藏</a></li>                <li><a href="#" data-icon="gear">设置</a></li>            </ul>        </div>    </div></div><!-- 第1个页面 结束--><!-- 第2个页面  开始--><div data-role="page" ID="detail">    <div data-role="header" data-position="fixed">        <h1>列车时刻表查询</h1>    </div>    <div role="main" class="ui-content">        <h2></h2>        <table data-role="table" ID="movIE-table" data-mode="reflow" class="ui-responsive">            <thead>            <tr>                <th data-priority="1">站名</th>                <th data-priority="persist">到站时间</th>                <th data-priority="persist">动身时间</th>            </tr>            </thead>            <tbody>            </tbody>        </table>        <a href="#" class="ui-btn ui-corner-all" data-rel="back">返回</a>    </div>    <div data-role="footer">        <div data-role="navbar">            <ul>                <li><a href="#" data-icon="grID" class="ui-btn-active">查询</a></li>                <li><a href="#" data-icon="star">收藏</a></li>                <li><a href="#" data-icon="gear">设置</a></li>            </ul>        </div>    </div></div><!-- 第1个页面 结束--><script src="Js/jquery⑴.11.1.Js"></script><script src="Js/jquery.mobile⑴.4.3.Js"></script><script>    var urlPre = "http://www.corsproxy.com/"; //AJAX的跨域中转    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.button("option","Disabled",true); //将搜索按钮点击以后设置为不可用，避免屡次点击            $.mobile.loading("show"); //设置加载框，1个加载旋转按钮            var _data = {}; //网络要求的参数            var _url = url1; //网络要求的url            if (!$("#search-no").val()) { //如果车次没有填 则下两项应当填了             //StartStation、ArriveStation、TrainCode是接口要求的参数                _data.StartStation = $("#search-begin").val();                _data.ArriveStation = $("#search-end").val();            } else {                _data.TrainCode = $("#search-no").val();                _url = url2;            }            //发起get要求urlPre + _url            $.get("http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationname?UserID=",_data,function (data) { //回调方法                    //alert("############################################！");                        $("#List").HTML("");                        var List = $("#List");                        var timetables = $(data).find("Timetable"); //找到xml数据中的项                        var _arr = []; //寄存所有的车次                        timetables.each(function (index,obj) {                            var i = index;                            if (i > 10) return false; //只载入前10条                            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 >' + that.find("StartTime").text() + ' 开</p>' +                                    '</a></li>');                        });                        if (_arr.length > 0) {                            List.HTML(_arr.join(""));                            List.ListvIEw("refresh");//@R_678_6419@                        }                        $.mobile.loading("hIDe"); //隐藏加载按钮                        searchbutton.button("option",false); //设置按钮可以点击了                    });                         } else {            alert("请输入发车站和终点站或输入车次！");        }    };    var isAJAX=false//是不是正在加载数据    //获得详情    var getInfoByTrainCode = function () {        $.mobile.loading("show");        var trainCode = $(this).attr("data-no");        if(isAJAX) return;        isAJAX=true        $.post(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);  //为动态生成的List设置事件    };    $(document).on("pageshow","#index",function () {        if (isbind) return        isbind = 1;        bindEvent();    });</script></body></HTML>