戻る

ソース

<!DOCTYPE html>
<html>
<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">
<script src="js/mobiscroll.full.min.js" type="text/javascript"></script>
<link href="css/mobiscroll.full.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#index").live("pagebeforecreate",function(){
	$('#select').scroller('destroy').scroller($.extend({preset:'select',inputClass:'i-txt'}, { theme: "jqm", mode: $('#mode').val(), display: "modal", beforeShow: show, onClose: hide }));
	
	function show(){}
	function hide(){}

	$('#select_dummy').textinput();
});

$("#index").live("pageshow",function(){

	$("#select").live("change",function(){
		var api = "http://vesta-tmp.sakura.ne.jp/xml-jsonp.php?callback=?";
		
		if(parseInt($("#select").val()) < 100000){
			var pref = "0" + $("#select").val();
		}
		else{
			var pref = $("#select").val();
		}
		
		$.getJSON(api,{
			xml:"jws.jalan.net/APICommon/OnsenSearch/V1/?key=aqr135c71ee600&pref=" + pref,
			key:"aqr135c71ee600"
		},function(data){
			var html = "";
			
			$.each(data.Onsen, function(i,item){
				
				html += "<ul data-role=\"listview\" data-inset=\"true\">";
				html += "<li data-role=\"list-divider\">" + item.OnsenName + "</li>";
				html += "<li><h1>" + item.OnsenAddress + "</h1></li>";
				html += "</ul>";
			});
			
			$("#spring").html(html);
			$("#spring ul").listview();
		});
	});
});
</script>
<style>

</style>
</head>
<body data-enhance="false">
<div data-role="page" id="index">
	<div data-role="header">
		<h1>じゃらんのAPIから全国の温泉を検索する</h1>
	</div>
	<div data-role="content">
	<label for="i">都道府県</label>
	<select name="都道府県" id="select" data-role="none">
		<option value="10000">北海道</option>
		<option value="20000">青森県</option>
		<option value="30000">岩手県</option>
		<option value="40000">宮城県</option>
		<option value="50000">秋田県</option>
		<option value="60000">山形県</option>
		<option value="70000">福島県</option>
		<option value="90000">群馬県</option>
		<option value="80000">栃木県</option>
		<option value="100000">茨城県</option>
		<option value="110000">埼玉県</option>
		<option value="120000">千葉県</option>
		<option value="130000">東京都</option>
		<option value="140000">神奈川県</option>
		<option value="160000">長野県</option>
		<option value="170000">新潟県</option>
		<option value="180000">富山県</option>
		<option value="190000">石川県</option>
		<option value="200000">福井県</option>
		<option value="210000">静岡県</option>
		<option value="220000">岐阜県</option>
		<option value="230000">愛知県</option>
		<option value="240000">三重県</option>
		<option value="250000">滋賀県</option>
		<option value="260000">京都府</option>
		<option value="270000">大阪府</option>
		<option value="280000">兵庫県</option>
		<option value="290000">奈良県</option>
		<option value="300000">和歌山県</option>
		<option value="310000">鳥取県</option>
		<option value="320000">島根県</option>
		<option value="330000">岡山県</option>
		<option value="340000">広島県</option>
		<option value="350000">山口県</option>
		<option value="360000">徳島県</option>
		<option value="370000">香川県</option>
		<option value="380000">愛媛県</option>
		<option value="390000">高知県</option>
		<option value="400000">福岡県</option>
		<option value="410000">佐賀県</option>
		<option value="420000">長崎県</option>
		<option value="430000">熊本県</option>
		<option value="440000">大分県</option>
		<option value="450000">宮崎県</option>
		<option value="460000">鹿児島県</option>
		<option value="470000">沖縄県</option>
	</select>
	<div id="spring"></div>
	</div>
	<div data-role="footer" data-position="fixed">
		<h4>Yohsuke Nakano</h4>
	</div>
</div>
</body>
</html>

inserted by FC2 system