jQuery mobile初探

来源：互联网发布：华泰证券交易软件编辑：程序博客网时间：2024/05/29 15:34
<!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>
可能调用远程的数据会出现一些问题....
0 0