<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"W>
<script src="js/mobiscroll.full.min.js"></script>
<link href="css/mobiscroll.full.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).bind("pagebeforeshow",function(){
$('#hiduke').val('').scroller('destroy').scroller($.extend("date", { theme: "ios", mode: "scroller" }));
$('#trigger').click(function() {
$('#hiduke').scroller('show');
return false;
});
$('#clear').click(function() {
$('#hiduke').val('');
return false;
});
$('#hiduke').bind("change",function(){
var date = $('#hiduke').val().replace(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/, "$3$1$2");;
var api = "http://vesta-tmp.sakura.ne.jp/json-jsonp.php?json=denki.cuppat.net/data/" + date + ".json&callback=?";
$.ajax({
url:api,
dataType:'jsonp',
success: function(data){
$("h2").text("更新: " + data.updated);
$("h3").text("ピーク: " + data.capability);
$("ul").html("");
$.each(data.hours, function(i,item){
$("ul").append("<li><h2>" + item + "</h2></li>").listview("refresh");
});
}
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>東京電力・電力状況 (日付を選択)</h1>
</div>
<div data-role="content">
<form id="hidukeform">
<div data-role="fieldcontain" class="inline">
<label for="hiduke">日付を選択：</label>
<input type="text" name="hiduke" id="hiduke">
<div data-role="controlgroup" data-type="horizontal" id="buttons">
<a href="#" id="trigger" data-role="button" data-icon="grid">選択</a>
<a href="#" id="clear" data-role="button" data-icon="delete">クリア</a>
</div>
</div>
</form>
<h2></h2>
<h3></h3>
<ul data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>Yohsuke Nakano</h4>
</div>
</div>
</body>
</html>