【设计体验之旅——jQuery就是牛！】第一部 35个高级jQuery插件使用体验持续更新（一）

Subway Map Visualization jQuery Plugin （铁路线路图）

【下载地址】---》subwayMap Plugin 0.5.0.zip 

【应用范围】

       一、铁路、公路、飞机等线路图的设计，图形化显示；

       二、电子电路设计图；

       三、社交群显示、网络图、办公路线等等；

       四、你的想象有多么丰富就有多少应用~~~

【使用体验】

首先，像其余的jQuery插件同样添加jQuery库和插件的Js库。

<script src="res/newjs/jquery-1.2.6.js" type="text/javascript"></script>
<script src="res/newjs/index_new.js?v=20101208"  type="text/javascript"></script>

而后定义咱们的画布DIV

<div id = “subway_canvas”></div>

使用jquery选择器让咱们的铁路图生效~

$(“#subway_canvas”) .subwayMap({ debug: true });

参数说明：debug：[true|false] 调试模式  打开时能够在JS控制台显示调试信息；

 

 

下面看看线路节点是怎么设置的：

经过Demo能够知道，这是典型的导航型插件，经过UL和LI标签订义节点。而<canvas>则能够设置背景等信息,<canvas>是使用网格布局；而不一样的地图能够在一个网格上重叠，只要使用不一样的UL标签标识就OK。看一看都有哪些信息能够设置：

Canvas参数说明：

(DIV)data-columns：<canvas>的网格列数；

(DIV)data-rows：<canvas>的网格行数；

(DIV)data-cellSize:每一个网格的大小，大小为像素;整个<canvas>的大小=data_colums*data-cellSize-data_rows*data-cellSize；

(DIV)data-legendId:地图的图例位置，输入的是一个<div>的id；

(DIV)data-textClass:地图节点的文字样式；

(DIV)data-gridNumbers：是否显示网格的行列数；

(DIV)data-grid:是否显示网格;

(DIV)data-lineWidth:地图路线的宽度,像素值;

 

 

了解了这些，咱们就能够开始咱们的地图绘制了，

先画一个点吧：

<ul data-color="#ff4db2" data-label="jQuery Widgets">         

<li data-coords="2,2" data-labelPos="N"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>

<li data-coords="2,2" data-labelPos="S"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>   

</ul>

Canvas参数说明：

(UL)data-color:表示该线路的颜色；

(UL)data-label:该线路惟一的ID标识，也是图例显示的名称；

(LI)data-coords:该点的坐标，能够为浮点数；

(LI)data-labelPos:该点名称的显示位置,能够为N, E, S, W, NE, NW, SE, SW，默认为S；

 

 

这样我就能够很简单的画出了一条直线和两个点~~下面作一个比较完整的路线：

        <ul data-color="#ff4db2" data-label="jQuery Widgets" data-shiftCoords="0,1">

        <li data-coords="2,2" data-marker="interchange"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>

        <li data-coords="4,2"><a href="http://jqueryui.com/demos/autocomplete/">Auto\ncomplete</a></li>

        <li data-coords="5,3" data-dir="E"></li>

        <li data-coords="5,7" data-marker="@station" data-labelPos="W">Slider</li> <!-- marker-only node -->

        <li data-coords="6,4" data-dir="S" data-marker="interchange" data-markerInfo="h5">Date\npicker</li>

        <li data-coords="7,4"></li>

        <li data-coords="7.15,8" data-marker="@station" data-labelPos="E">Dialog</li>  <!-- marker-only node, moved to the right by 0.15 -->

        <li data-coords="8,3" data-dir="E"></li>

        <li data-coords="8,2"></li>

        <li data-coords="9,1" data-dir="N"></li>

        <li data-coords="10,2" data-dir="E" data-marker="interchange" data-labelPos="E">Button</li>

        <li data-coords="10,5"></li>

        <li data-coords="9,6" data-dir="S" data-marker="station">Progress\nbar</li>

        <li data-coords="6,9"></li>

        <li data-coords="5,8" data-dir="W"></li>

        <li data-coords="5,7"></li>

        <li data-coords="4,6" data-dir="N"></li>

        <li data-coords="2,6">Tabs</li>

        </ul>

Canvas参数说明：

(UL)data-shiftCoords:地图路线偏离原来的位置的大小，是一个x,y值对，能够为负数，正数表明向右向下移动；

(li)data-marker:地图上的地点表示，能够为”station” 和” interchange”，若是表示的地点不在连续的线路上，可使用”@station”或者”@interchange”表示；

(li)data-dir:为了实现地图的圆滑的效果，可使用拐角效果，该属性值能够为N,S,W,W表示拐角的方向；

(li)data-markerInfo:地图标志信息，表示地图的上的链接点，能够是两个不一样的路线，也能够是同一条路线，属性值为[v|h]+数值，v表示垂直方向，h表示水平方向，数值为像素，表示延伸的长度；

 

 

最后写一个比较完整的地图：

<ul data-color="#ff4db2" data-label="jQuery Widgets">

<li data-coords="2,2" data-marker="interchange"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>

<li data-coords="4,2"><a href="http://jqueryui.com/demos/autocomplete/">Auto\ncomplete</a></li>

<li data-coords="5,3" data-dir="E"></li>

<li data-coords="5,7" data-marker="@station" data-labelPos="W">Slider</li> <!-- marker-only node -->

<li data-coords="6,4" data-dir="S" data-marker="interchange" data-markerInfo="h5">Date\npicker</li>

<li data-coords="7,4"></li>

<li data-coords="7.15,8" data-marker="@station" data-labelPos="E">Dialog</li>  <!-- marker-only node, moved to the right by 0.15 -->

<li data-coords="8,3" data-dir="E"></li>

<li data-coords="8,2"></li>

<li data-coords="9,1" data-dir="N"></li>

<li data-coords="10,2" data-dir="E" data-marker="interchange" data-labelPos="E">Button</li>

<li data-coords="10,5"></li>

<li data-coords="9,6" data-dir="S" data-marker="station">Progress\nbar</li>

<li data-coords="6,9"></li>

<li data-coords="5,8" data-dir="W"></li>

<li data-coords="5,7"></li>

<li data-coords="4,6" data-dir="N"></li>

<li data-coords="2,6">Tabs</li>

</ul>

 

<ul data-color="#00ff00" data-label="jQuery Interactions" data-shiftCoords="0,-1">

<li data-coords="2,6"></li>

<li data-coords="2,5.9" data-marker="@interchange"> </li> <!-- marker-only node, moved up by 0.10 -->

<li data-coords="5,6" data-marker="@station" data-labelPos="N">Selectable</li>

<li data-coords="6,6"></li>

<li data-coords="7,3" data-marker="@station" data-labelPos="W">Resizeable</li>

<li data-coords="7,5" data-dir="E" data-marker="station" data-labelPos="E">Droppable</li>

<li data-coords="7,1" data-marker="interchange" data-labelPos="W">Draggable</li>

</ul>

 

【体验心得】

一个GreatTool，实现的效果很好，若是可以经过模版技术从后台直接读取存储好的数据，自动生成坐标点，或者经过Json数据设置坐标，那就更好；另外，能够经过设计反向程序，把设计图转化成数据存储在数据库中，会很是棒。一个高级的jQuery插件，可是使用方法十分简单。