【WebApp】jquerymobileで作成したHTML 5 Web App
11817 ワード
前言
0.jquery mobileとは?
jQuery MobileはモバイルWebアプリケーションを作成するフレームワークです.すべての流行のスマートフォンとタブレットに適しています.
1.どんな項目ですか.
天気照会とバス情報照会の便民サービスAppLinkを提供しております
本文
0.慣例による上図
1.コードを見て、コメントは爆発まで詳しく、happy.php
0.jquery mobileとは?
jQuery MobileはモバイルWebアプリケーションを作成するフレームワークです.すべての流行のスマートフォンとタブレットに適しています.
1.どんな項目ですか.
天気照会とバス情報照会の便民サービスAppLinkを提供しております
本文
0.慣例による上図
1.コードを見て、コメントは爆発まで詳しく、happy.php
<style type="text/css">
#index,#bus {
font-family: " ";
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1> </h1>
</div>
<div data-role="content">
<div class="ui-field-contain">
<label> </label>
<p id="tips" style="color: red;" hidden="hidden"> </p>
<input type="text" id="keyword"/>
</div>
<a id="btnSearch" data-role="button" data-icon="search" data-iconpos="right"> </a>
<div>
<ul id="result" data-role="listview" data-inset="true">
</ul>
<br/>
<table id="table" class="ui-responsive table-stroke" data-role="table">
</table>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#index" id="index" class="ui-btn-active" data-icon="home"> </a>
</li>
<li>
<a href="#bus" id="bus" data-icon="star"> </a>
</li>
<li>
<a href="#" id="share" data-icon="gear"> </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="bus">
<div data-role="header" data-position="fixed">
<h1> </h1>
</div>
<div data-role="content">
<div class="ui-field-contain">
<label> </label>
<p id="tip1" style="color: red;" hidden="hidden"> </p>
<input type="text" id="city"/><br/>
<label> </label>
<p id="tip2" style="color: red;" hidden="hidden"> </p>
<input type="text" id="road"/>
</div>
<a id="btnSearchBus" data-role="button" data-icon="search" data-iconpos="right"> </a>
<div>
<ul id="resultBus" data-role="listview" data-inset="true">
</ul>
<br/>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#index" id="index" data-icon="home"> </a>
</li>
<li>
<a href="#bus" id="bus" class="ui-btn-active" data-icon="star"> </a>
</li>
<li>
<a href="#" id="share" data-icon="gear"> </a>
</li>
</ul>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript">
// ip
var client_ip = '<?php echo $_SERVER['REMOTE_ADDR'] ?>';
//
//var client_ip = '59.172.105.58';
//cors -> http://blog.csdn.net/xiaoping0915/article/details/57557206
var cors_url = 'http://proxy.e12e.com/?';
// ip
var ip_url = 'http://ip.taobao.com/service/getIpInfo.php?ip=';
//
var m_url = 'http://op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=';
//
var bus_url = 'http://op.juhe.cn/189/bus/busline?dtype=&key=1198ca7b9b559f7536b5b824c7fae885&city=';
//
var client_city ;
// index
$(document).on("pagebeforecreate","#index", function() {
$.getJSON(cors_url + ip_url + client_ip, function(data, status) {
// ip
client_city = data.data.city;
$('#keyword').val(data.data.city);
$('#city').val(client_city);
getCityWeather(data.data.city);
});
});
// index
$(document).on('pageinit', "#index", function() {
// input
function sw(){
var $key = $('#keyword').val();
var $tips = $('#tips');
if($key === '') {
$tips.fadeIn();
return;
}
$tips.fadeOut();
//
$.mobile.loading("show");
//
getCityWeather($key);
}
//
$('#btnSearch').on('click', function() {
sw();
});
$(this).on('keypress',function(even){
if(even.keyCode === 13){
sw();
};
});
});
// bus
$(document).on('pageinit','#bus',function(){
// input
function sbus(){
var $city = $('#city').val();
var $road = $('#road').val();
//var $
var $tip1 = $('#tip1');
var $tip2 = $('#tip2');
if($city === '') {
$tip1.fadeIn();
return;
}else if($road === ''){
$tip2.fadeIn();
return;
}
$tip1.fadeOut();
$tip2.fadeOut();
$.mobile.loading("show");
//
getCityBus($city,$road);
}
//
$('#btnSearchBus').on('click', function() {
sbus();
});
$(this).on('keypress',function(even){
if(even.keyCode === 13){
sbus();
};
});
});
//
function getCityWeather(cityName) {
// list table
var $list = $('#result');
$list.html('');
var $table = $('#table');
$table.html('');
//
$.getJSON(cors_url + m_url + cityName, function(data, status) {
//
$.mobile.loading("hide");
//JSON .
if(data.error_code != 0) {
// error_code 0
alert(data.reason);
return;
}
//
var $res = '<li><h1>' + data.result.data.realtime.city_name + ' ' + data.result.data.pubdate + ' ' + data.result.data.pubtime + ' </h1></li>' +
'<li> ' + data.result.data.realtime.weather.info + '</li>' +
'<li> ' + data.result.data.realtime.weather.temperature + '℃</li>' +
'<li> ' + data.result.data.realtime.weather.humidity + 'RH</li>' +
'<li> ' + data.result.data.realtime.wind.direct + ' ' + data.result.data.realtime.wind.power + '</li>' +
'<li><h3>PM2.5</h3></li>' +
'<li> ' + data.result.data.pm25.pm25.pm25 + ' ' + data.result.data.pm25.pm25.level + ' ' + data.result.data.pm25.pm25.quality + '</li>' +
'<li> ' + data.result.data.pm25.pm25.des + '</li>';
var $tbl = '<thead>' +
'<tr>'+
'<th data-priority="6"> </th>'+
'<th> </th>'+
'<th data-priority="1"> </th>'+
'<th data-priority="2"> </th>'+
'<th data-priority="3"> </th>'+
'</tr>'+
'</thead><tbody>' ;
// JsonArray
$(data.result.data.weather).each(function (index, obj) {
$tbl +='<tr>' +
'<td> '+obj.week+'</td>' +
'<td>'+obj.info.day[1]+'</td>'+
'<td>'+obj.info.day[2]+'℃</td>' +
'<td>'+obj.info.day[3]+'</td>' +
'<td>'+obj.info.day[4]+'</td>'+
'<tr/>';
});
$tbl+='</tbody>';
//
$list.append($res).listview("refresh");
$table.append($tbl).table('refresh');
});
}
//
function getCityBus(cName,roadNum){
// list
var $list = $('#resultBus');
$list.html('');
//
$.getJSON(cors_url + bus_url + cName + '&bus=' + roadNum,function(data, status){
//
$.mobile.loading("hide");
if(data.error_code != 0) {
alert(data.reason);
return;
}
//
var $res = '<li><h1>' + data.result[0].key_name + ' ' + data.result[0].terminal_name + '~' + data.result[0].front_name + '</h1></li>';
$(data.result[0].stationdes).each(function (index, obj) {
$res += '<li> ' + obj.stationNum + ' ： ' + obj.name + '</li>';
});
$list.append($res).listview("refresh");
});
}
</script>
</code></pre>
<span style="font-family:'Microsoft YaHei';">2. </span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';">（a） ？</span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';"><span/><span style="color:#ff0000;"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/></span></span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';">（b） ajax ？</span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';"><span/> cors <span style="color:#ff0000;">var cors_url = 'http://proxy.e12e.com/?'; </span> </span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';">（c） ， ？</span>
</div>
<div>
<span style="font-family:'Microsoft YaHei';"><span/><span style="color:#ff0000;"> script </span></span></div></div></div></div></div>