TaipeiHotel_phpMySQL_2019/index.html at master · LuckyTiger66/TaipeiHotel_phpMySQL_2019 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>來去台北住一晚</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<style>
	.title{
		color: #736148;
		font-size: 11pt;
		font-weight: bold
	}
	.ui-page{
		background: #CFBF9E;
	}
</style>
<script language="Javascript">
	var regionTitle= new Array();  // 記錄分區的名稱
	var counter = new Array();     // 記錄分區的編號
	var regionData = new Array();  // 記錄分區中所有旅館的資料
    // 從指定的 url 網址取得可跨網域的 json 資料，完成後以 ShowData()函式處理
	$(document).ready(function() {
			$.ajax({
			type:"GET",
			url: "20191023-hotel-api.php",
			dataType: "json" ,
			success: ShowData,
			error: function(data){
				alert("網路或系統錯誤！");
			},
		});
	});

	$('#myListview').listview('refresh');
	function ShowData(data){
		for( var i=0 ,cnt=data.length ; i<cnt ; ++i ){
			// 從 json 資料取得區名
			var getRegion = data[i]["display_addr"].substring(0,data[i]["display_addr"].indexOf("區",0)+1);
			if( counter[getRegion] == undefined ){
				counter[getRegion] = regionData.length;  // 記錄分區的編號
				regionData.push(new Array());  // 新增陣列記錄一個分區中所有旅館的資料
				regionTitle[counter[getRegion]] = getRegion; // 記錄分區的名稱
			}
			// 將 data["d"][i] 的資料放入 regionData[n] 動態陣列中
			regionData[counter[getRegion]].push(data[i]);
		}
		$("#output").empty();
		// cntRegion 代表台北市有旅館共有幾區
		for( var i=0 ,cntRegion=regionData.length ; i<cntRegion ; ++i ){
			var pageTitle = ""; // 儲存 [名稱]
			var pageAddr="";    // 儲存 [地址]
			var pageTel="";     // 儲存 [電話]
			// subCnt 代表每一區的旅館數目
			for( var j=0,subCnt=regionData[i].length ; j<subCnt ; ++j ){
				pageTitle+=regionData[i][j]["name"]+"|"; // 組合 [名稱]
				pageAddr+=regionData[i][j]["display_addr"]+"|"; // 組合 [地址]
				pageTel+="聯絡電話："+regionData[i][j]["tel"]+"|"; // 組合 [電話]
			}
			// 在 ListView 中加上以旅館名稱當作超連結
			var strHtml= '<li class="title"><a href="#show" data-title="' + regionTitle[i] + '" ';
			    strHtml+= 'page-title="' + pageTitle + '" page-addr="' + pageAddr + '" page-tel="' + pageTel +'">';
			    strHtml+= '<div >'+regionTitle[i]+'旅館資料</div> <span class="ui-li-count">'+ regionData[i].length+'</span></a></li>';
			$("#output").append(strHtml);
			// data-title 、page-title、page-addr、pag-tel 傳遞 分區名稱、旅館名稱、地址、電話
			$("a", $("#output")).bind("click", function(e) {
				getItem($(this).attr("data-title"),$(this).attr("page-title"),$(this).attr("page-addr"),$(this).attr("page-tel"));
			});
		}
		$("#output").listview("refresh");

	}

	// 在 show 頁面顯示該區中所有旅館的 [旅館名稱、地址、連絡電話] 並建立超連結
	function getItem(regiontitle,pagetitle,pageaddr,pagetel) {
		$("#show h1").html(regiontitle+"旅館");  // 顯示分區 header 的標題
		$("#output2").empty();
		var Arytitle=pagetitle.split("|"); // 取得旅館的名稱
		var Aryaddr=pageaddr.split("|");   // 取得旅館的地址
		var Arytel=pagetel.split("|");     // 取得旅館的電話
		for( var i=0 ;i<Arytitle.length-1;i++){
			// 建立分區各旅館的資料和超連結
			var strHtml='<li><a href="#" data-addr="' + Aryaddr[i] + '"</a>';
				strHtml+='<div class="title"><h3>' + Arytitle[i]+ '</h3></div>';
				strHtml+='<div>' + Aryaddr[i]+ '</div>';
				strHtml+='<div>' + Arytel[i] +'</div></li>';
			$("#output2").append(strHtml) ;

		}
		// 按下超連結時以 data-addr 傳遞該旅館的地址用以顯示該旅館的地圖
		$("a",$("#output2")).bind("click", function(e) {
			SearchFor($(this).attr("data-addr"));  // 以地址搜尋旅館位置
		});
		$("#show").page() ;
		$("#output2").listview("refresh");
	}

	function SearchFor(addr) {
		window.open("http://maps.google.com/maps?hl=zh-TW&q=" + addr );
	}
</script>

</head>
<body>
<div data-role="page" id="home">
    <div data-position="fixed" data-role="header">
        <h1>來去台北住一晚</h1>
    </div>
    <div data-role="content">
        <div style="text-align:center;">
            <img src="images/taipeiHotelogo.png" width="320" height="198">
            <ul id="output" data-inset="true" data-role="listview" data-theme="c">
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="show" data-add-back-btn="true">
    <div data-position="fixed" data-role="header">
        <h1>&nbsp;</h1>
    </div>
    <div data-role="content">
        <div style="text-align:center;">
            <img src="images/taipeiHotelogo.png" width="320" height="198">
            <ul id="output2" data-inset="true" data-role="listview"  data-theme="d">
            </ul>
        </div>
    </div>
</div>
</body>
</html>