jQuery mobile初探

最新推荐文章于 2020-04-21 01:06:12 发布
在路上_等你
最新推荐文章于 2020-04-21 01:06:12 发布
阅读量1.1k
点赞数
分类专栏： jQuery
本文链接：https://blog.csdn.net/chenshuangwtt/article/details/43233963
版权
jQuery 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link  rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>
    <title> </title>
</head>
<script  src="http://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script  src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<body>

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>列车查询</h1>
    </div>
    <div data-role="main" class="ui-content">
      <!--  <a href="#" id="ajaxbtn" class="ui-btn">点我加载</a>
        <table data-role="table"  data-mode="reflow"  class="ui-responsive  table-stroke">
            <thead>
                <tr>
                    <th>第一列</th>
                    <th>第二列</th>
                    <th>第三列</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>11 </th>
                    <th>1234</th>
                    <th>6548</th>
                </tr>
                <tr>
                    <th>11 </th>
                    <th>1234</th>
                    <th>6548</th>
                </tr>
            </tbody>
        </table>-->
        <form>
            <div class="ui-field-contain">
              <label>发车站</label>
              <input type="text" id="search-begin" />
            </div>
            <div class="ui-field-contain">
              <label>到达站</label>
              <input type="text" id="search-end"  />
            </div>
            <div class="ui-field-contain">
              <label>车次</label>
              <input type="text" id="search-no" />
            </div>
        </form>
        <a href="#" id="search-submit" class="ui-btn">搜索</a>
        <ul data-role="listview" data-inset="true"  id="list">
            <!--<li><a href="#" >导航1</a></li>-->
            <!--<li><a href="#">-->
                <!--<h2>G1次</h2>-->
                <!--<p>xxx-xxx</p>-->
                <!--<p>xxx-xxx</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>-->
            <!--<li><a href="#" >导航4</a></li>-->
        </ul>
    </div>
    <div data-role="footer"  data-position="fixed">
       <div data-role="navbar">
          <ul>
              <li><a href="#" data-icon="camera">导航1</a></li>
              <li><a href="#" data-icon="carat-l">导航2</a></li>
              <li><a href="#" data-icon="carat-r">导航3</a></li>
              <li><a href="#" data-icon="carat-u">导航4</a></li>
              <li><a href="#" data-icon="carat-d">导航4</a></li>
          </ul>
       </div>
    </div>
</div>

<div data-role="page" id="detail">
    <div data-role="header">
        <h1>详情页面</h1>
    </div>
    <div data-role="main" class="ui-content">
        <p><h2></h2></p>
        <table data-role="table"  data-mode="reflow"  class="ui-responsive  table-stroke">
            <thead>
            <tr>
                <th>站名</th>
                <th>到站时间</th>
                <th>出发时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <a href="#index"  class="ui-btn">返回</a>
    <div data-role="footer">
        <h1></h1>
    </div>

</div>

<script>
//    $(document).on("pagebeforehide","#index",function(){
//       alert("pagebeforehide");
//    });
//    $(document).on("pagehide","#index",function(){
//        alert("pagehide");
//    });
//
//    $(document).on("pagebeforeshow","#index2",function(){
//        alert("pagebeforeshow");
//    });
//    $(document).on("pageshow","#index2",function(){
//        alert("pageshow");
//    });

var  urlPre="http://www.corsproxy.com/";  //跨域中转站
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 getTrainList=function(){
    if($("#search-no").val()||($("#search-begin").val()&&$("#search-end").val())){

        var searchButton=$(this);
        searchButton.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){
            $.mobile.loading("hide");
            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;
                }

                var _html='<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="ul-li-aside">'+that.find("StartTime").text()+'开</p>'+
                        '</a></li>';

                _arr.push(_html);
            });
              if(_arr.length>0){
                  list.html(_arr.join(""));
                 list.listview("refresh");
              }
            $.mobile.loading("hide");
            searchButton.disabled=false;
         });

    }else{
        alert("请输入发车站和终点站，或者车次");
    }
};


//点击查询具体车次信息
var isAjax=false;
var getInfoByTrainCode=function(){
    if(isAjax){
        return;
    }

    isAjax=true;
    $.mobile.loading("show");

    var trainCode=$(this).attr("data-no");
    $.get(urlPre+url3,{TrainCode:trainCode},function(data){
        $("#detail").find(".ui-content  h2").first().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);
            var _html='<td>'+that.find("TrainStation").text()+'</td>'+
                      '<td>'+that.find("ArriveTime").text()+'</td>'+
                      '<td>'+that.find("StartTime").text()+'</td>';
            tr.html(_html);
            tbody.append(tr);
        });
        $.mobile.loading("hide");
        $.mobile.changePage("#detail");
        isAjax=false;
    });
};

var bindEvent=function(){
    $("#search-submit").on("click",getTrainList);
    $("#list").on("click","a",getInfoByTrainCode);
};

    $(document).on("pageinit","#index",function(){
//        $("#ajaxbtn").on("click",function(){
//            $.mobile.loading("show");
//            $.get(url,{TrainCode:"G1"},function(data){
//                console.log(data);
//                $.mobile.loading("hide");
//            })
//        });
       bindEvent();
    });
</script>
</body>
</html>
可能调用远程的数据会出现一些问题....