Changeset 65

Timestamp:

Feb 22, 2009, 4:32:59 PM (16 years ago)

Author:

jazz

Message:

• 改寫成從 data/map-menu.json 讀取 map-menu 的選單設定

Location:

oceandb/jQuery_Prototype

Files:

• admin/map-menu.php (modified) (1 diff)
• css/index.css (moved) (moved from oceandb/jQuery_Prototype/index.css) (2 diffs)
• data/map-menu.json (modified) (1 diff)
• index.html (modified) (3 diffs)
• script/oceandb.js (modified) (2 diffs)

oceandb/jQuery_Prototype/admin/map-menu.php

@@ -11 +11 @@
     {
       $col= mysql_fetch_row($result);
-      echo "{ \"type_id\" : " . $col[0] . ", \"parent_id\" : " . $col[1] . ". \"type_name\" : \"" . $col[2] . "\" , \"owner_org\" : \"" . $col[3] . "\" },\n";
+      echo "{ \"type_id\" : " . $col[0] . ", \"parent_id\" : " . $col[1] . ", \"type_name\" : \"" . $col[2] . "\", \"owner_org\" : \"" . $col[3] . "\"},\n";
     }
     echo "]";

oceandb/jQuery_Prototype/css/index.css

@@ -5 +5 @@
 #header       { overflow: hidden; color: #FFE080; border-bottom: 1px solid; height: 24px; width: 100%; background-color: #03004D; padding: 5px; }
 #header a     { color: #FFC200; }
-#main-menu    { float: left;  margin-left:  5px; height: 100%; vertical-align: middle; }
-#title        { float: right; margin-right: 5px; font-size: 18px; }
+#main-menu    { float: left;  margin-left:   5px; height: 100%; vertical-align: middle; }
+#title        { float: right; margin-right: 15px; font-size: 18px; }
 
 /* main */
@@ -18 +18 @@
 #footer       { overflow: hidden; color: #FFE080; border-top: 1px solid; bottom: 0px; height: 24px; width: 100%; background-color: #03004D; padding: 5px; }
 #footer a     { color: #FFC200; }
-#copyright    { float: left;  margin-left:  5px; height: 100%; vertical-align: middle; }
-#logos        { float: right; margin-right: 5px; }
+#copyright    { float: left;  margin-left:   5px; height: 100%; vertical-align: middle; }
+#logos        { float: right; margin-right: 15px; }
 #logos img    { border: none; height: 28px; }

oceandb/jQuery_Prototype/data/map-menu.json

@@ -1 +1 @@
 [
-{ "type_id" : 5, "parent_id" : 1. "type_name" : "波浪" , "owner_org" : "中央氣象局" },
-{ "type_id" : 5, "parent_id" : 1. "type_name" : "波浪" , "owner_org" : "中央氣象局委託" },
-{ "type_id" : 5, "parent_id" : 1. "type_name" : "波浪" , "owner_org" : "交通部觀光局" },
-{ "type_id" : 5, "parent_id" : 1. "type_name" : "波浪" , "owner_org" : "港灣技術研究中心" },
-{ "type_id" : 5, "parent_id" : 1. "type_name" : "波浪" , "owner_org" : "經濟部水利署" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "中央氣象局" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "中央氣象局委託" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "內政部" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "基隆港務局" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "基隆港務局蘇澳" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "港灣技術研究中心" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "經濟部水利署" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "高雄港務局" },
-{ "type_id" : 6, "parent_id" : 1. "type_name" : "潮汐" , "owner_org" : "高雄港務局安平" },
-{ "type_id" : 7, "parent_id" : 1. "type_name" : "氣象" , "owner_org" : "中央氣象局" },
-{ "type_id" : 7, "parent_id" : 1. "type_name" : "氣象" , "owner_org" : "交通部觀光局" },
-{ "type_id" : 7, "parent_id" : 1. "type_name" : "氣象" , "owner_org" : "港灣技術研究中心" },
-{ "type_id" : 7, "parent_id" : 1. "type_name" : "氣象" , "owner_org" : "經濟部水利署" },
-{ "type_id" : 8, "parent_id" : 1. "type_name" : "海流" , "owner_org" : "港灣技術研究中心" },
-{ "type_id" : 9, "parent_id" : 2. "type_name" : "溫鹽" , "owner_org" : "國科會" },
-{ "type_id" : 10, "parent_id" : 2. "type_name" : "震測" , "owner_org" : "中央大學地球物理研究所" },
-{ "type_id" : 10, "parent_id" : 2. "type_name" : "震測" , "owner_org" : "修平技術學院工業工程與管理系" },
-{ "type_id" : 10, "parent_id" : 2. "type_name" : "震測" , "owner_org" : "台灣大學海洋研究所" },
-{ "type_id" : 10, "parent_id" : 2. "type_name" : "震測" , "owner_org" : "海洋大學" },
-{ "type_id" : 10, "parent_id" : 2. "type_name" : "震測" , "owner_org" : "海洋大學應用地球物理研究所" },
-{ "type_id" : 14, "parent_id" : 2. "type_name" : "海流" , "owner_org" : "NCOR" },
-{ "type_id" : 15, "parent_id" : 2. "type_name" : "水深" , "owner_org" : "NCOR" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "中央大學地球物理研究所" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "中央研究院地球科學研究所" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "中山大學海洋地質及化學研究所" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "修平技術學院工業工程與管理系" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學工程科學及海洋工程學系" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學海洋研究所" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "國家海洋科學研究中心" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學應用地球物理研究所" },
-{ "type_id" : 17, "parent_id" : 2. "type_name" : "Chirp Sonar" , "owner_org" : "海軍軍官學校海洋科學系" },
+{ "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "中央氣象局" },
+{ "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "中央氣象局委託" },
+{ "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "交通部觀光局" },
+{ "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "港灣技術研究中心" },
+{ "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "經濟部水利署" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "中央氣象局" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "中央氣象局委託" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "內政部" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "基隆港務局" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "基隆港務局蘇澳" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "港灣技術研究中心" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "經濟部水利署" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "高雄港務局" },
+{ "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "高雄港務局安平" },
+{ "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "中央氣象局" },
+{ "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "交通部觀光局" },
+{ "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "港灣技術研究中心" },
+{ "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "經濟部水利署" },
+{ "type_id" : 8, "parent_id" : 1, "type_name" : "海流" , "owner_org" : "港灣技術研究中心" },
+{ "type_id" : 9, "parent_id" : 2, "type_name" : "溫鹽" , "owner_org" : "國科會" },
+{ "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "中央大學地球物理研究所" },
+{ "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "修平技術學院工業工程與管理系" },
+{ "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "台灣大學海洋研究所" },
+{ "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "海洋大學" },
+{ "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "海洋大學應用地球物理研究所" },
+{ "type_id" : 14, "parent_id" : 2, "type_name" : "海流" , "owner_org" : "NCOR" },
+{ "type_id" : 15, "parent_id" : 2, "type_name" : "水深" , "owner_org" : "NCOR" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中央大學地球物理研究所" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中央研究院地球科學研究所" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中山大學海洋地質及化學研究所" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "修平技術學院工業工程與管理系" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學工程科學及海洋工程學系" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學海洋研究所" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "國家海洋科學研究中心" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學應用地球物理研究所" },
+{ "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海軍軍官學校海洋科學系" }
 ]

oceandb/jQuery_Prototype/index.html

@@ -7 +7 @@
 
     <title>台灣海洋資訊資料庫聯盟網 Taiwan Ocean Informatioan Database</title>
-    <link rel="stylesheet" type="text/css" href="index.css" />
+    <link rel="stylesheet" type="text/css" href="css/index.css" />
     <link rel="stylesheet" type="text/css" href="css/theme/ui.all.css" />
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAREq2HXjZzIdAyVORbKBYMhTfzQKfMm5eNRoty1ZKt0XEeQdtXxTxlSH6lZOV7UEfIym3ft5_EnXXDw" type="text/javascript"></script>
@@ -14 +14 @@
     <script src="script/oceandb.js" language="javascript"></script>
   </head>
-  <body onload="load()" onunload="GUnload()">
+  <body>
     <div id="header">
       <div id="main-menu"> 
@@ -25 +25 @@
     </div>
     <div id="main">
-      <div id="map-menu"><div id="loading"><img src="image/loading.gif"><br><br>正在讀取...</div></div>
+      <div id="map-menu"><div id="loading"><img src="image/loading.gif"><br/><br/>正在讀取...</div></div>
       <div id="map"></div>
     </div>

oceandb/jQuery_Prototype/script/oceandb.js

@@ -3 +3 @@
 $(document).ready(function() {
 
-  // 顯示 Loading 字樣
+  var PARENT_ID = [];   // 產生一個空的陣列
+  PARENT_ID[1] = "定點";
+  PARENT_ID[2] = "船測";
+
+  // 註冊 AJAX 非同步處理函式
+  // 從 data/map-menu.json 讀取資料來產生 map-menu 的 Accordion 選單
+  $.getJSON("data/map-menu.json", function(data){
+    // 讀取進來的 JSON 內容必須用 eval 函數才能變成 javascript 可以識別的陣列
+    var json = eval(data);
+    // 註: 因為 JSON 內容按 type_id 排序，
+    //     故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM
+    var type_id = -1;
+    $.each(json, function(i, item){
+      // 確認 type_id 是否存在，否則產生一個新的 DOM
+      if(item.type_id != type_id )
+      {      
+  $('#map-menu').append("<div><h3><a href='#'>" + item.type_name  
+            + " (" + PARENT_ID[item.parent_id] + ")</a>"
+            + "</h3><div><ul id='map-menu-" + item.type_id 
+            + "'></ul><br/></div></div>");
+  type_id = item.type_id;
+  $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>"
+           + "<font color='red'><b>=== 以下全選 ===</b></font>"
+           + "</input></li>");
+  var temp = $("#map-menu-" + item.type_id).find("input");
+  temp.click(function(){
+    // TODO: 加入全選處理函式
+    this.checked ? alert("map-menu-" + item.type_id + " is clicked!") : 
+       alert("map-menu-" + item.type_id + " is unclicked!");
+  });
+      }
+      // 根據 type_id 逐一加入 owner_org
+      $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>"
+         + item.owner_org + "</input></li>");
+
+      // TODO: 定義 checkbox checked 跟 unchecked 對應的處理函式
+    });
+
+    // 設定左側選單的 Accordion 風格
+    // 註: 這行的擺放位置很重要，放在迴圈外會造成 CSS 樣式(class)的問題
+    // 主因: getJSON 是非同步處理，得把動態產生 DOM 的相關設定擺在 callback 中
+    $('#map-menu').accordion({ header: "h3" });
+
+    // 完成從 JSON 讀入資料，因此把 loading 提示移除。
+    $('#loading').remove();
+  });
 
   // 設定地圖高度
   var map_height=document.documentElement.clientHeight - 68;
   $('#main').css( { height: map_height } );
-
-  // 設定左側選單的 Accordion 風格
-  $('#map-menu').accordion({ header: "h3" });
 
   // 設定點選 "MENU" 的行為
@@ -33 +75 @@
   $('#main').css( { height: map_height } );
 });
-
-function load() {
-  if (GBrowserIsCompatible()) {
-    var map = new GMap2(document.getElementById("map"));  // 取得 DOM 中,名稱為 map 的元件
-    map.addControl(new GLargeMapControl());               // 加入左上角比例尺規控制列
-    map.addControl(new GScaleControl());                  // 加入左下角比例尺狀態列
-    map.addControl(new GMapTypeControl());                // 加入右上角"地圖","衛星","混合地圖"按鈕
-    map.setCenter(new GLatLng(23.8,121), 7);              // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
-    map.setMapType(G_SATELLITE_MAP);                      // 設定預設底圖為"衛星"
-  }
-}