- Timestamp:
- Feb 22, 2009, 4:32:59 PM (15 years ago)
- Location:
- oceandb/jQuery_Prototype
- Files:
-
- 4 edited
- 1 moved
-
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)
Legend:
- Unmodified
- Added
- Removed
-
oceandb/jQuery_Prototype/admin/map-menu.php
r62 r65 11 11 { 12 12 $col= mysql_fetch_row($result); 13 echo "{ \"type_id\" : " . $col[0] . ", \"parent_id\" : " . $col[1] . " . \"type_name\" : \"" . $col[2] . "\" , \"owner_org\" : \"" . $col[3] . "\"},\n";13 echo "{ \"type_id\" : " . $col[0] . ", \"parent_id\" : " . $col[1] . ", \"type_name\" : \"" . $col[2] . "\", \"owner_org\" : \"" . $col[3] . "\"},\n"; 14 14 } 15 15 echo "]"; -
oceandb/jQuery_Prototype/css/index.css
r62 r65 5 5 #header { overflow: hidden; color: #FFE080; border-bottom: 1px solid; height: 24px; width: 100%; background-color: #03004D; padding: 5px; } 6 6 #header a { color: #FFC200; } 7 #main-menu { float: left; margin-left: 5px; height: 100%; vertical-align: middle; }8 #title { float: right; margin-right: 5px; font-size: 18px; }7 #main-menu { float: left; margin-left: 5px; height: 100%; vertical-align: middle; } 8 #title { float: right; margin-right: 15px; font-size: 18px; } 9 9 10 10 /* main */ … … 18 18 #footer { overflow: hidden; color: #FFE080; border-top: 1px solid; bottom: 0px; height: 24px; width: 100%; background-color: #03004D; padding: 5px; } 19 19 #footer a { color: #FFC200; } 20 #copyright { float: left; margin-left: 5px; height: 100%; vertical-align: middle; }21 #logos { float: right; margin-right: 5px; }20 #copyright { float: left; margin-left: 5px; height: 100%; vertical-align: middle; } 21 #logos { float: right; margin-right: 15px; } 22 22 #logos img { border: none; height: 28px; } -
oceandb/jQuery_Prototype/data/map-menu.json
r62 r65 1 1 [ 2 { "type_id" : 5, "parent_id" : 1 ."type_name" : "波浪" , "owner_org" : "中央氣象局" },3 { "type_id" : 5, "parent_id" : 1 ."type_name" : "波浪" , "owner_org" : "中央氣象局委託" },4 { "type_id" : 5, "parent_id" : 1 ."type_name" : "波浪" , "owner_org" : "交通部觀光局" },5 { "type_id" : 5, "parent_id" : 1 ."type_name" : "波浪" , "owner_org" : "港灣技術研究中心" },6 { "type_id" : 5, "parent_id" : 1 ."type_name" : "波浪" , "owner_org" : "經濟部水利署" },7 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "中央氣象局" },8 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "中央氣象局委託" },9 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "內政部" },10 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "基隆港務局" },11 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "基隆港務局蘇澳" },12 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "港灣技術研究中心" },13 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "經濟部水利署" },14 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "高雄港務局" },15 { "type_id" : 6, "parent_id" : 1 ."type_name" : "潮汐" , "owner_org" : "高雄港務局安平" },16 { "type_id" : 7, "parent_id" : 1 ."type_name" : "氣象" , "owner_org" : "中央氣象局" },17 { "type_id" : 7, "parent_id" : 1 ."type_name" : "氣象" , "owner_org" : "交通部觀光局" },18 { "type_id" : 7, "parent_id" : 1 ."type_name" : "氣象" , "owner_org" : "港灣技術研究中心" },19 { "type_id" : 7, "parent_id" : 1 ."type_name" : "氣象" , "owner_org" : "經濟部水利署" },20 { "type_id" : 8, "parent_id" : 1 ."type_name" : "海流" , "owner_org" : "港灣技術研究中心" },21 { "type_id" : 9, "parent_id" : 2 ."type_name" : "溫鹽" , "owner_org" : "國科會" },22 { "type_id" : 10, "parent_id" : 2 ."type_name" : "震測" , "owner_org" : "中央大學地球物理研究所" },23 { "type_id" : 10, "parent_id" : 2 ."type_name" : "震測" , "owner_org" : "修平技術學院工業工程與管理系" },24 { "type_id" : 10, "parent_id" : 2 ."type_name" : "震測" , "owner_org" : "台灣大學海洋研究所" },25 { "type_id" : 10, "parent_id" : 2 ."type_name" : "震測" , "owner_org" : "海洋大學" },26 { "type_id" : 10, "parent_id" : 2 ."type_name" : "震測" , "owner_org" : "海洋大學應用地球物理研究所" },27 { "type_id" : 14, "parent_id" : 2 ."type_name" : "海流" , "owner_org" : "NCOR" },28 { "type_id" : 15, "parent_id" : 2 ."type_name" : "水深" , "owner_org" : "NCOR" },29 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "中央大學地球物理研究所" },30 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "中央研究院地球科學研究所" },31 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "中山大學海洋地質及化學研究所" },32 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "修平技術學院工業工程與管理系" },33 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "台灣大學工程科學及海洋工程學系" },34 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "台灣大學海洋研究所" },35 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "國家海洋科學研究中心" },36 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "海洋大學" },37 { "type_id" : 17, "parent_id" : 2 ."type_name" : "Chirp Sonar" , "owner_org" : "海洋大學應用地球物理研究所" },38 { "type_id" : 17, "parent_id" : 2 . "type_name" : "Chirp Sonar" , "owner_org" : "海軍軍官學校海洋科學系" },2 { "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "中央氣象局" }, 3 { "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "中央氣象局委託" }, 4 { "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "交通部觀光局" }, 5 { "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "港灣技術研究中心" }, 6 { "type_id" : 5, "parent_id" : 1, "type_name" : "波浪" , "owner_org" : "經濟部水利署" }, 7 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "中央氣象局" }, 8 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "中央氣象局委託" }, 9 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "內政部" }, 10 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "基隆港務局" }, 11 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "基隆港務局蘇澳" }, 12 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "港灣技術研究中心" }, 13 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "經濟部水利署" }, 14 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "高雄港務局" }, 15 { "type_id" : 6, "parent_id" : 1, "type_name" : "潮汐" , "owner_org" : "高雄港務局安平" }, 16 { "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "中央氣象局" }, 17 { "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "交通部觀光局" }, 18 { "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "港灣技術研究中心" }, 19 { "type_id" : 7, "parent_id" : 1, "type_name" : "氣象" , "owner_org" : "經濟部水利署" }, 20 { "type_id" : 8, "parent_id" : 1, "type_name" : "海流" , "owner_org" : "港灣技術研究中心" }, 21 { "type_id" : 9, "parent_id" : 2, "type_name" : "溫鹽" , "owner_org" : "國科會" }, 22 { "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "中央大學地球物理研究所" }, 23 { "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "修平技術學院工業工程與管理系" }, 24 { "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "台灣大學海洋研究所" }, 25 { "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "海洋大學" }, 26 { "type_id" : 10, "parent_id" : 2, "type_name" : "震測" , "owner_org" : "海洋大學應用地球物理研究所" }, 27 { "type_id" : 14, "parent_id" : 2, "type_name" : "海流" , "owner_org" : "NCOR" }, 28 { "type_id" : 15, "parent_id" : 2, "type_name" : "水深" , "owner_org" : "NCOR" }, 29 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中央大學地球物理研究所" }, 30 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中央研究院地球科學研究所" }, 31 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "中山大學海洋地質及化學研究所" }, 32 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "修平技術學院工業工程與管理系" }, 33 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學工程科學及海洋工程學系" }, 34 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "台灣大學海洋研究所" }, 35 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "國家海洋科學研究中心" }, 36 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學" }, 37 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海洋大學應用地球物理研究所" }, 38 { "type_id" : 17, "parent_id" : 2, "type_name" : "Chirp Sonar" , "owner_org" : "海軍軍官學校海洋科學系" } 39 39 ] -
oceandb/jQuery_Prototype/index.html
r63 r65 7 7 8 8 <title>台灣海洋資訊資料庫聯盟網 Taiwan Ocean Informatioan Database</title> 9 <link rel="stylesheet" type="text/css" href=" index.css" />9 <link rel="stylesheet" type="text/css" href="css/index.css" /> 10 10 <link rel="stylesheet" type="text/css" href="css/theme/ui.all.css" /> 11 11 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAREq2HXjZzIdAyVORbKBYMhTfzQKfMm5eNRoty1ZKt0XEeQdtXxTxlSH6lZOV7UEfIym3ft5_EnXXDw" type="text/javascript"></script> … … 14 14 <script src="script/oceandb.js" language="javascript"></script> 15 15 </head> 16 <body onload="load()" onunload="GUnload()">16 <body> 17 17 <div id="header"> 18 18 <div id="main-menu"> … … 25 25 </div> 26 26 <div id="main"> 27 <div id="map-menu"><div id="loading"><img src="image/loading.gif"><br ><br>正在讀取...</div></div>27 <div id="map-menu"><div id="loading"><img src="image/loading.gif"><br/><br/>正在讀取...</div></div> 28 28 <div id="map"></div> 29 29 </div> -
oceandb/jQuery_Prototype/script/oceandb.js
r60 r65 3 3 $(document).ready(function() { 4 4 5 // 顯示 Loading 字樣 5 var PARENT_ID = []; // 產生一個空的陣列 6 PARENT_ID[1] = "定點"; 7 PARENT_ID[2] = "船測"; 8 9 // 註冊 AJAX 非同步處理函式 10 // 從 data/map-menu.json 讀取資料來產生 map-menu 的 Accordion 選單 11 $.getJSON("data/map-menu.json", function(data){ 12 // 讀取進來的 JSON 內容必須用 eval 函數才能變成 javascript 可以識別的陣列 13 var json = eval(data); 14 // 註: 因為 JSON 內容按 type_id 排序， 15 // 故用 type_id 來判斷第一次出現的 type_id 產生新的 DOM 16 var type_id = -1; 17 $.each(json, function(i, item){ 18 // 確認 type_id 是否存在，否則產生一個新的 DOM 19 if(item.type_id != type_id ) 20 { 21 $('#map-menu').append("<div><h3><a href='#'>" + item.type_name 22 + " (" + PARENT_ID[item.parent_id] + ")</a>" 23 + "</h3><div><ul id='map-menu-" + item.type_id 24 + "'></ul><br/></div></div>"); 25 type_id = item.type_id; 26 $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>" 27 + "<font color='red'><b>=== 以下全選 ===</b></font>" 28 + "</input></li>"); 29 var temp = $("#map-menu-" + item.type_id).find("input"); 30 temp.click(function(){ 31 // TODO: 加入全選處理函式 32 this.checked ? alert("map-menu-" + item.type_id + " is clicked!") : 33 alert("map-menu-" + item.type_id + " is unclicked!"); 34 }); 35 } 36 // 根據 type_id 逐一加入 owner_org 37 $("#map-menu-" + item.type_id).append("<li><input type='checkbox'>" 38 + item.owner_org + "</input></li>"); 39 40 // TODO: 定義 checkbox checked 跟 unchecked 對應的處理函式 41 }); 42 43 // 設定左側選單的 Accordion 風格 44 // 註: 這行的擺放位置很重要，放在迴圈外會造成 CSS 樣式(class)的問題 45 // 主因: getJSON 是非同步處理，得把動態產生 DOM 的相關設定擺在 callback 中 46 $('#map-menu').accordion({ header: "h3" }); 47 48 // 完成從 JSON 讀入資料，因此把 loading 提示移除。 49 $('#loading').remove(); 50 }); 6 51 7 52 // 設定地圖高度 8 53 var map_height=document.documentElement.clientHeight - 68; 9 54 $('#main').css( { height: map_height } ); 10 11 // 設定左側選單的 Accordion 風格12 $('#map-menu').accordion({ header: "h3" });13 55 14 56 // 設定點選 "MENU" 的行為 … … 33 75 $('#main').css( { height: map_height } ); 34 76 }); 35 36 function load() {37 if (GBrowserIsCompatible()) {38 var map = new GMap2(document.getElementById("map")); // 取得 DOM 中,名稱為 map 的元件39 map.addControl(new GLargeMapControl()); // 加入左上角比例尺規控制列40 map.addControl(new GScaleControl()); // 加入左下角比例尺狀態列41 map.addControl(new GMapTypeControl()); // 加入右上角"地圖","衛星","混合地圖"按鈕42 map.setCenter(new GLatLng(23.8,121), 7); // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)43 map.setMapType(G_SATELLITE_MAP); // 設定預設底圖為"衛星"44 }45 }
Note: See TracChangeset
for help on using the changeset viewer.
