HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）
来源：互联网 发布：linux 监听端口命令 编辑：程序博客网 时间：2024/05/16 01:14
深圳地鐵羅寶線和蛇口線示例：見上圖。
要求瀏覽器版本：browser does support HTML5 canvas element：Google Chrome V 8+;Mozilla Firefox V 3.6+;Opera V 11+;Apple Safari V 5+;Microsoft Internet Explorer V 9+。
javascript:
/*Copyright (c) 2010 Nik Kalyani nik@kalyani.com http://www.kalyani.comPermission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.*/(function ($) { var plugin = { defaults: { debug: false, grid: false }, options: { }, identity: function (type) { if (type === undefined) type = "name"; switch (type.toLowerCase()) { case "version": return "1.0.0"; break; default: return "subwayMap Plugin"; break; } }, _debug: function (s) { if (this.options.debug) this._log(s); }, _log: function () { if (window.console && window.console.log) window.console.log('[subwayMap] ' + Array.prototype.join.call(arguments, ' ')); }, _supportsCanvas: function () { var canvas = $("<canvas></canvas>"); if (canvas[0].getContext) return true; else return false; }, _getCanvasLayer: function (el, overlay) { this.layer++; var canvas = $("<canvas style='position:absolute;z-Index:" + ((overlay ? 2000 : 1000) + this.layer) + "' width='" + this.options.pixelWidth + "' height='" + this.options.pixelHeight + "'></canvas>"); el.append(canvas); return (canvas[0].getContext("2d")); }, _render: function (el) { this.layer = -1; var rows = el.attr("data-rows"); if (rows === undefined) rows = 10; else rows = parseInt(rows); var columns = el.attr("data-columns"); if (columns === undefined) columns = 10; else columns = parseInt(columns); var scale = el.attr("data-cellSize"); if (scale === undefined) scale = 100; else scale = parseInt(scale); var lineWidth = el.attr("data-lineWidth"); if (lineWidth === undefined) lineWidth = 10; else lineWidth = parseInt(lineWidth); var textClass = el.attr("data-textClass"); if (textClass === undefined) textClass = ""; var grid = el.attr("data-grid"); if ((grid === undefined) || (grid.toLowerCase() == "false")) grid = false; else grid = true; var legendId = el.attr("data-legendId"); if (legendId === undefined) legendId = ""; var gridNumbers = el.attr("data-gridNumbers"); if ((gridNumbers === undefined) || (gridNumbers.toLowerCase() == "false")) gridNumbers = false; else gridNumbers = true; var reverseMarkers = el.attr("data-reverseMarkers"); if ((reverseMarkers === undefined) || (reverseMarkers.toLowerCase() == "false")) reverseMarkers = false; else reverseMarkers = true; this.options.pixelWidth = columns * scale; this.options.pixelHeight = rows * scale; //el.css("width", this.options.pixelWidth); //el.css("height", this.options.pixelHeight); self = this; var lineLabels = []; var supportsCanvas = $("<canvas></canvas>")[0].getContext; if (supportsCanvas) { if (grid) this._drawGrid(el, scale, gridNumbers); $(el).children("ul").each(function (index) { var ul = $(this); var color = $(ul).attr("data-color"); if (color === undefined) color = "#000000"; var lineTextClass = $(ul).attr("data-textClass"); if (lineTextClass === undefined) lineTextClass = ""; var shiftCoords = $(ul).attr("data-shiftCoords"); if (shiftCoords === undefined) shiftCoords = ""; var shiftX = 0.00; var shiftY = 0.00; if (shiftCoords.indexOf(",") > -1) { shiftX = parseInt(shiftCoords.split(",")[0]) * lineWidth/scale; shiftY = parseInt(shiftCoords.split(",")[1]) * lineWidth/scale; } var lineLabel = $(ul).attr("data-label"); if (lineLabel === undefined) lineLabel = "Line " + index; lineLabels[lineLabels.length] = {label: lineLabel, color: color}; var nodes = []; $(ul).children("li").each(function () { var coords = $(this).attr("data-coords"); if (coords === undefined) coords = ""; var dir = $(this).attr("data-dir"); if (dir === undefined) dir = ""; var labelPos = $(this).attr("data-labelPos"); if (labelPos === undefined) labelPos = "s"; var marker = $(this).attr("data-marker"); if (marker == undefined) marker = ""; var markerInfo = $(this).attr("data-markerInfo"); if (markerInfo == undefined) markerInfo = ""; var anchor = $(this).children("a:first-child"); var label = $(this).text(); if (label === undefined) label = ""; var link = ""; var title = ""; if (anchor != undefined) { link = $(anchor).attr("href"); if (link === undefined) link = ""; title = $(anchor).attr("title"); if (title === undefined) title = ""; } self._debug("Coords=" + coords + "; Dir=" + dir + "; Link=" + link + "; Label=" + label + "; labelPos=" + labelPos + "; Marker=" + marker); var x = ""; var y = ""; if (coords.indexOf(",") > -1) { x = Number(coords.split(",")[0]) + (marker.indexOf("interchange") > -1 ? 0 : shiftX); y = Number(coords.split(",")[1]) + (marker.indexOf("interchange") > -1 ? 0 : shiftY); } nodes[nodes.length] = { x: x, y:y, direction: dir, marker: marker, markerInfo: markerInfo, link: link, title: title, label: label, labelPos: labelPos}; }); if (nodes.length > 0) self._drawLine(el, scale, rows, columns, color, (lineTextClass != "" ? lineTextClass : textClass), lineWidth, nodes, reverseMarkers); $(ul).remove(); }); if ((lineLabels.length > 0) && (legendId != "")) { var legend = $("#" + legendId); for(var line=0; line<lineLabels.length; line++) legend.append("<div><span style='float:left;width:100px;height:" + lineWidth + "px;background-color:" + lineLabels[line].color + "'></span>" + lineLabels[line].label + "</div>"); } } }, _drawLine: function (el, scale, rows, columns, color, textClass, width, nodes, reverseMarkers) { var ctx = this._getCanvasLayer(el, false); ctx.beginPath(); ctx.moveTo(nodes[0].x * scale, nodes[0].y * scale); var markers = []; var lineNodes = []; for(var node = 0; node < nodes.length; node++) { if (nodes[node].marker.indexOf("@") != 0) lineNodes[lineNodes.length] = nodes[node]; } for (var lineNode = 0; lineNode < lineNodes.length; lineNode++) { if (lineNode < (lineNodes.length - 1)) { var nextNode = lineNodes[lineNode + 1]; var currNode = lineNodes[lineNode]; // Correction for edges so lines are not running off campus var xCorr = 0; var yCorr = 0; if (nextNode.x == 0) xCorr = width / 2; if (nextNode.x == columns) xCorr = -1 * width / 2; if (nextNode.y == 0) yCorr = width / 2; if (nextNode.y == rows) yCorr = -1 * width / 2; var xVal = 0; var yVal = 0; var direction = ""; var xDiff = Math.round(Math.abs(currNode.x - nextNode.x)); var yDiff = Math.round(Math.abs(currNode.y - nextNode.y)); if ((xDiff == 0) || (yDiff == 0)) { // Horizontal or Vertical ctx.lineTo((nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr); } else if ((xDiff == 1) && (yDiff == 1)) { // 90 degree turn if (nextNode.direction != "") direction = nextNode.direction.toLowerCase(); switch (direction) { case "s": xVal = 0; yVal = scale; break; case "e": xVal = scale; yVal = 0; break; case "w": xVal = -1 * scale; yVal = 0; break; default: xVal = 0; yVal = -1 * scale; break; } ctx.quadraticCurveTo((currNode.x * scale) + xVal, (currNode.y * scale) + yVal, (nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr); } else if (xDiff == yDiff) { // Symmetric, angular with curves at both ends if (nextNode.x < currNode.x) { if (nextNode.y < currNode.y) direction = "nw"; else direction = "sw"; } else { if (nextNode.y < currNode.y) direction = "ne"; else direction = "se"; } var dirVal = 1; switch (direction) { case "nw": xVal = -1 * (scale / 2); yVal = 1; dirVal = 1; break; case "sw": xVal = -1 * (scale / 2); yVal = -1; dirVal = 1; break; case "se": xVal = (scale / 2); yVal = -1; dirVal = -1; break; case "ne": xVal = (scale / 2); yVal = 1; dirVal = -1; break; } this._debug((currNode.x * scale) + xVal + ", " + (currNode.y * scale) + "; " + (nextNode.x + (dirVal * xDiff / 2)) * scale + ", " + (nextNode.y + (yVal * xDiff / 2)) * scale) ctx.bezierCurveTo( (currNode.x * scale) + xVal, (currNode.y * scale), (currNode.x * scale) + xVal, (currNode.y * scale), (nextNode.x + (dirVal * xDiff / 2)) * scale, (nextNode.y + (yVal * xDiff / 2)) * scale); ctx.bezierCurveTo( (nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale, (nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale, nextNode.x * scale, nextNode.y * scale); } else ctx.lineTo(nextNode.x * scale, nextNode.y * scale); } } ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke(); ctx = this._getCanvasLayer(el, true); for (var node = 0; node < nodes.length; node++) { this._drawMarker(el, ctx, scale, color, textClass, width, nodes[node], reverseMarkers); } }, _drawMarker: function (el, ctx, scale, color, textClass, width, data, reverseMarkers) { if (data.label == "") return; if (data.marker == "") data.marker = "station"; // Scale coordinates for rendering var x = data.x * scale; var y = data.y * scale; // Keep it simple -- black on white, or white on black var fgColor = "#000000"; var bgColor = "#ffffff"; if (reverseMarkers) { fgColor = "#ffffff"; bgColor = "#000000"; } // Render station and interchange icons ctx.strokeStyle = fgColor; ctx.fillStyle = bgColor; ctx.beginPath(); switch(data.marker.toLowerCase()) { case "interchange": case "@interchange": ctx.lineWidth = width; if (data.markerInfo == "") ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true); else { var mDir = data.markerInfo.substr(0,1).toLowerCase(); var mSize = parseInt(data.markerInfo.substr(1,10)); if (((mDir == "v") || (mDir == "h")) && (mSize > 1)) { if (mDir == "v") { ctx.arc(x, y, width * 0.7,290 * Math.PI/180, 250 * Math.PI/180, false); ctx.arc(x, y-(width*mSize), width * 0.7,110 * Math.PI/180, 70 * Math.PI/180, false); } else { ctx.arc(x, y, width * 0.7,20 * Math.PI/180, 340 * Math.PI/180, false); ctx.arc(x+(width*mSize), y, width * 0.7,200 * Math.PI/180, 160 * Math.PI/180, false); } } else ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true); } break; case "station": case "@station": ctx.lineWidth = width/2; ctx.arc(x, y, width/2, 0, Math.PI * 2, true); break; } ctx.closePath(); ctx.stroke(); ctx.fill(); // Render text labels and hyperlinks var pos = ""; var offset = width + 4; var topOffset = 0; var centerOffset = "-50px"; switch(data.labelPos.toLowerCase()) { case "n": pos = "text-align: center; margin: 0 0 " + offset + "px " + centerOffset; topOffset = offset * 2; break; case "w": pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px"; topOffset = offset; break; case "e": pos = "text-align: left; margin:0 0 0 " + offset + "px"; topOffset = offset; break; case "s": pos = "text-align: center; margin:" + offset + "px 0 0 " + centerOffset; break; case "se": pos = "text-align: left; margin:" + offset + "px 0 0 " + offset + "px"; break; case "ne": pos = "text-align: left; padding-left: " + offset + "px; margin: 0 0 " + offset + "px 0"; topOffset = offset * 2; break; case "sw": //TODO pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px"; topOffset = offset; break; case "nw": //TODO pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px"; topOffset = offset; break; } var style = (textClass != "" ? "class='" + textClass + "' " : "") + "style='" + (textClass == "" ? "font-size:8pt;font-family:Verdana,Arial,Helvetica,Sans Serif;text-decoration:none;" : "") + "width:100px;" + (pos != "" ? pos : "") + ";position:absolute;top:" + (y + el.offset().top - (topOffset > 0 ? topOffset : 0)) + "px;left:" + (x + el.offset().left) + "px;z-index:3000;'"; if (data.link != "") $("<a " + style + " title='" + data.title.replace(/\\n/g,"<br />") + "' href='" + data.link + "' target='_new'>" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el); else $("<span " + style + ">" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el);; }, _drawGrid: function (el, scale, gridNumbers) { var ctx = this._getCanvasLayer(el, false); ctx.fillStyle = "#000"; ctx.beginPath(); var counter = 0; for (var x = 0.5; x < this.options.pixelWidth; x += scale) { if (gridNumbers) { ctx.moveTo(x, 0); ctx.fillText(counter++, x-15, 10); } ctx.moveTo(x, 0); ctx.lineTo(x, this.options.pixelHeight); } ctx.moveTo(this.options.pixelWidth - 0.5, 0); ctx.lineTo(this.options.pixelWidth - 0.5, this.options.pixelHeight); counter = 0; for (var y = 0.5; y < this.options.pixelHeight; y += scale) { if (gridNumbers) { ctx.moveTo(0, y); ctx.fillText(counter++, 0, y-15); } ctx.moveTo(0, y); ctx.lineTo(this.options.pixelWidth, y); } ctx.moveTo(0, this.options.pixelHeight - 0.5); ctx.lineTo(this.options.pixelWidth, this.options.pixelHeight - 0.5); ctx.strokeStyle = "#eee"; ctx.lineWidth = 1; ctx.stroke(); ctx.fill(); ctx.closePath(); }}var methods = { init: function (options) { plugin.options = $.extend({}, plugin.defaults, options); // iterate and reformat each matched element return this.each(function (index) { plugin.options = $.meta ? $.extend(plugin.options, $(this).data()) : plugin.options; plugin._debug("BEGIN: " + plugin.identity() + " for element " + index); plugin._render($(this)); plugin._debug("END: " + plugin.identity() + " for element " + index); }); }, drawLine: function (data) { plugin._drawLine(data.element, data.scale, data.rows, data.columns, data.color, data.width, data.nodes); },};$.fn.subwayMap = function (method) { // Method calling logic if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.tooltip'); }};})(jQuery);html5:
<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Subway Map</title> <meta name="author" content="Geovin Du,塗聚文"> <meta name="keyword" content="browser does support HTML5 canvas element：Google Chrome V 8+;Mozilla Firefox V 3.6+;Opera V 11+;Apple Safari V 5+;Microsoft Internet Explorer V 9+"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.subwayMap-0.5.0.js"></script> <style type="text/css"> body { font-family: Verdana; font-size: 8pt; } /* The main DIV for the map */ .subway-map { margin: 0; width: 500px; height:410px; background-color: white; } /* Text labels */ .text { text-decoration: none; color: black; } #legend { float: left; width: 250px; height:400px; } #legend div { height: 25px; } #legend span { margin: 5px 5px 5px 0; } .subway-map span { margin: 5px 5px 5px 0; } </style></head><body><div class="subway-map" data-columns="44" data-rows="40" data-cellSize="80" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="false" data-lineWidth="8"><ul data-color="#00ff00" data-label="羅寶線(1號線)"><li data-coords="4,6" data-marker="@interchange"><a href="http://www.dusystem.com/" target="_blank">機場東</a></li><li data-coords="4,6.5"><a href="http://www.dusystem.com/" target="_blank">後瑞</a></li> <!-- marker-only node, moved up by 0.10 --><li data-coords="4,7.3"><a href="http://www.dusystem.com/" target="_blank">固戍</a></li><li data-coords="4,8"><a href="http://www.dusystem.com/" target="_blank">西鄉</a></li><li data-coords="4,8.5" ><a href="http://www.dusystem.com/" target="_blank">坪洲</a></li><li data-coords="4,9.5" ><a href="http://www.dusystem.com/" target="_blank">寶體</a></li><li data-coords="4,10" data-marker="@station"><a href="http://www.dusystem.com/" target="_blank">寶安中心</a></li><li data-coords="4,10.5" ><a href="http://www.dusystem.com/" target="_blank">新安</a></li><li data-coords="4,11" data-dir="E" data-marker="station" data-labelPos="E"><a href="http://www.dusystem.com/" target="_blank">前海灣</a></li><li data-coords="4.5,11" ><a href="http://www.dusystem.com/" target="_blank">鯉魚門</a></li><li data-coords="5,11" ><a href="http://www.dusystem.com/" target="_blank">大新</a></li><li data-coords="5.5,11" ><a href="http://www.dusystem.com/" target="_blank">桃園</a></li><li data-coords="6,11" ><a href="http://www.dusystem.com/" target="_blank">深大</a></li><li data-coords="6.5,11" ><a href="http://www.dusystem.com/" target="_blank">高新園</a></li><li data-coords="7,11"><a href="http://www.dusystem.com/" target="_blank">白石洲</a></li><li data-coords="7.5,11" data-marker="station" data-markerInfo="h5"><a href="http://www.dusystem.com/" target="_blank">世界之窗</a></li><li data-coords="8,11" ><a href="http://www.dusystem.com/" target="_blank">華僑城</a></li><li data-coords="9,11" ><a href="http://www.dusystem.com/" target="_blank">僑城東</a></li><li data-coords="9.5,11" ><a href="http://www.dusystem.com/" target="_blank">竹子林</a></li><li data-coords="10.2,11" ><a href="http://www.dusystem.com/" target="_blank">車公廟</a></li><li data-coords="11,11" ><a href="http://www.dusystem.com/" target="_blank">香蜜湖</a></li><li data-coords="11.5,11" ><a href="http://www.dusystem.com/" target="_blank">購物公園</a></li><li data-coords="12.5,11" ><a href="http://www.dusystem.com/" target="_blank">會展中心</a></li><li data-coords="13.5,11" ><a href="http://www.dusystem.com/" target="_blank">崗廈</a></li><li data-coords="14.5,11" ><a href="http://www.dusystem.com/" target="_blank">華強路</a></li><li data-coords="15,11"><a href="http://www.dusystem.com/" target="_blank">科學</a></li><li data-coords="15.3,10.4" ><a href="http://www.dusystem.com/" target="_blank">館大劇院</a></li><li data-coords="15.6,9.8" ><a href="http://www.dusystem.com/" target="_blank">老街</a></li><li data-coords="15.6,12" ><a href="http://www.dusystem.com/" target="_blank">國貿</li><li data-coords="15.6,13" data-marker="interchange"><a href="http://www.dusystem.com/" target="_blank">羅湖</a></li></ul><ul data-color="#000000" data-label="蛇口線(3號線)"><li data-coords="4.1,16.5" data-marker="@interchange"><a href="http://www.dusystem.com/">赤灣</a></li><li data-coords="4.4,16"><a href="http://www.dusystem.com/">蛇口港</a></li><li data-coords="4.7,15.5"><a href="http://www.dusystem.com/">海上世界</a></li><li data-coords="5.0,15"><a href="http://www.dusystem.com/">水灣</a></li><li data-coords="5.3,14.5"><a href="http://www.dusystem.com/">東角頭</a></li><li data-coords="5.6,14"><a href="http://www.dusystem.com/">灣廈</a></li><li data-coords="5.9,13.5"><a href="http://www.dusystem.com/">海月</a></li><li data-coords="6.2,13"><a href="http://www.dusystem.com/">登良</a></li><li data-coords="6.5,12.5"><a href="http://www.dusystem.com/">後海</a></li><li data-coords="6.8,12"><a href="http://www.dusystem.com/">科苑</a></li><li data-coords="7.2,11.5"><a href="http://www.dusystem.com/">紅樹灣</a></li><li data-coords="7.5,11"><a href="http://www.dusystem.com/" target="_blank"></a></li><li data-coords="7.5,10.4"><a href="http://www.dusystem.com/">僑城北</a></li><li data-coords="8.5,10.4"><a href="http://www.dusystem.com/">深康</a></li><li data-coords="9,10.4"><a href="http://www.dusystem.com/">安托山</a></li><li data-coords="9.5,10.4"><a href="http://www.dusystem.com/">僑香</a></li><li data-coords="10,10.4"><a href="http://www.dusystem.com/">香蜜</a></li><li data-coords="10.5,10.4"><a href="http://www.dusystem.com/">香蜜北</a></li><li data-coords="11,10.4"><a href="http://www.dusystem.com/">景田</a></li><li data-coords="11.5,10.4"><a href="http://www.dusystem.com/">蓮花北</a></li><li data-coords="12,10.4"><a href="http://www.dusystem.com/">福田</a></li><li data-coords="12.5,10.4"><a href="http://www.dusystem.com/">市民中心</a></li><li data-coords="13,10.4"><a href="http://www.dusystem.com/">崗廈北</a></li><li data-coords="13.5,10.4"><a href="http://www.dusystem.com/">华强北</a></li><li data-coords="14,10.4"><a href="http://www.dusystem.com/">燕南</a></li><li data-coords="15.3,10.4"><a href="http://www.dusystem.com/"></a></li><li data-coords="15.8,10.4"><a href="http://www.dusystem.com/">湖貝</a></li><li data-coords="16.5,10.4"><a href="http://www.dusystem.com/">黃貝嶺</a></li><li data-coords="17,10.4" data-marker="interchange"><a href="http://www.dusystem.com/">新秀</a></li></ul></div> <div id="legend"></div> <script type="text/javascript"> $(".subway-map").subwayMap({ debug: true }); </script></body></html>html5 程序显示的深圳地铁罗宝线
- HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）
- HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）
- 1131. Subway Map (30)
- 1131. Subway Map 引用
- 1131. Subway Map (30)
- 1131. Subway Map (30)
- 1131. Subway Map (30)
- jquery map方法使用示例
- PAT 1131. Subway Map (30)
- 深圳地暖
- Using the jQuery Validate Plugin with HTML5 Data Attribute Rules
- [Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面
- jquery 插件（plugin）开发
- PAT 1131. Subway Map (30) -甲级
- 1131. Subway Map (30)[dfs剪枝+回溯]
- PAT 1131. Subway Map (30) DFS
- 【PAT】【Advanced Level】1131. Subway Map (30)
- PAT 甲级 1131. Subway Map (30)
- mysql and sqlalchemy
- JTable中右键选中行并弹出菜单
- HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）
- javascript页面特殊符号处理过滤
- IOS 多线程 NSThread
- HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）
- 客户端获取数据方法
- redhat 和 centos
- 结合Wireshark捕获分组深入理解TCP/IP协议栈之TCP协议
- 华军软件
- java的变量赋值与传递
- Linux rpm 命令参数使用详解［介绍和应用］
- Asp.net采用替换模版页的形式生成静态页
- xml解析新浪新闻_客户端_下拉刷新
