WebApp之JQuery Mobile实现火车列表信息查询

一、项目源代码如下:

<!-- --><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列车时刻表查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>

<body>
<!-- 第一个页面  开始-->
<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>
<!-- 第一个页面 结束-->

<!-- 第二个页面  开始-->
<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>
<!-- 第一个页面 结束-->

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.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"); //设置加载框,一个加载旋转按钮

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

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

其中包含JQuery Mobile的支持js和css

二、项目演示效果如下:

三、项目源代码下载:

这里写链接内容

时间: 2024-10-06 00:21:48

WebApp之JQuery Mobile实现火车列表信息查询的相关文章

Jquery mobile 中在列表项上使用单选按钮

? 无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/ ? ? ? ? ? ? ? ? 触类旁通,终于实现了在li上增加单选按钮组 ? @model QGateMobile.Areas.WG32.Models.SystemConfigModel @{ ????ViewBag.Title = "系统配置"; } @section Header { [email protected]("后退", "Ind

python 3.6 tkinter+urllib+json 火车车次信息查询

--------blogs:  陈月白    http://www.cnblogs.com/chenyuebai    -------- 一.概述 妹子工作时需要大量地查询火车车次至南京的信息,包括该车次到达站(南京站or南京南站).到达时间.出发时间等,然后根据这些信息做下一步工作. 版本结束,趁着间歇期,帮她弄了个简易的批量查询工具,粉色的按钮是给她用的~哈哈哈! (?*?*?) 大概80行代码,主要是: 界面读取待查询车次 - - - - 调用车次信息接口- - - - 解析返回数据 -

jQuery Mobile 列表

一.jQuery Mobile 列表视图:jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). 1.创建列表 向 <ol> 或 <ul> 元素添加 data-role="listview". 如需使这些项目可点击,请在每个列表项(<li>)中规定链接: <div data-role="page" id="pageone"

对于JQuery Mobile的介绍

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序.jQuery 适用于所有流行的智能手机和平板电脑:jQuery Mobile 构建于 jQuery 库之上,这使其更易学习.它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局.jQuery Mobile 将“写得更少.做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致. jQuery Mobile 主题,jQuery

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M

jQuery Mobile移动开发

1.在<head>元素中包含JavaScript文件是传统的方法.然而,根据Yahoo!"80%的最终用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,例如样式表,图片,脚本等.减少这些资产的数量明显很重要,在HTML文件的最后包含JavaScript也变得更加常见.这是因为脚本阻止并行下载,也就是说其他资产在每个脚本单独下载完之前无法下载.为了确保脚本放在正确的位置,在</html>结束标记之前包含它. 2.注意:创建自定义 data- 属性的唯一

jquery mobile自定义webapp开发实例(一)——前言篇

用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比较老的版本,用户体验流畅度确实还存在很大的问题,但在我写这一系列的webapp开发实例后,将会解决大部分问题 下面是以后准备写到的一些点: 1:谈谈关于jquery mobile 一些常见问题的解决.(常见问题的解决查看) 2:jquery mobile实现多页面跳转(不是官网上那样把所以的page在一个.html文件内,而是每个page

(五)Jquery Mobile列表

Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset="true" 增加列表的上下左右的距离       3.带小图标的列表      设置class="ui-li-icon"显示图标为中间      效果:       4.带大图的列表            效果:      5.带分割的列表           效果: