想给jquery.subwayMap-0.5.0.js 插件添加超链接
凘水无邪 2016-03-07 09:56:13 现在只能给a标签添加,想实现点击站点走链接
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>地铁线路测试</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.subwayMap-0.5.0.js" type="text/javascript"></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>
<!--
data-columns="12" 列
data-rows="10" 行
data-cellSize="40"数据大小:宽度和高度的每个单元像素(40在本例中,导致在一个网格,480px宽400像素高)
data-legendId="legend"的数据legendid:ID的HTML元素的地图图例将追加(“传奇”这个例子)
的数据textclass:CSS类使用文本标签的地图(“文本”这个例子)
(DIV)数据网格:真或假,显示或隐藏网格是有用的在地图的构建。默认值为假(“真实”这个例子)
(DIV)的数据gridnumbers:真或假,显示或隐藏数据网格。只适用于数据网格=“true”(“真实”这个例子)
(DIV)数据宽度:宽度为每一行像素。默认值为10像素。(8在这个例子)
(UL)数据颜色:颜色的线在标准的CSS RGB表示法(# ff4db2这个例子)
(UL)数据标签:标签的线将被显示在图例(“jQuery插件”这个例子)
(李)数据坐标:X,Y坐标对其中线应画在其最后的位置(或起始位置如果是第一个李元)
-->
<body>
<FORM>
<div class="subway-map" data-columns="120" data-rows="100" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="true" data-lineWidth="8">
<ul data-color="#ff4db2" data-label="地铁1号线">
<li data-coords="9,49" data-labelPos="N" onclick="javascript:document.getElementById('01').click();"><a id="01" href="#####">苹果园</a></li>
<li data-coords="11,51" data-labelPos="S"><a>古城</a></li>
<li data-coords="12,51" data-labelPos="N"><a>八角游乐园</a></li>
<li data-coords="13,51" data-labelPos="S"><a>八宝山</a></li>
<li data-coords="14,51" data-labelPos="N"><a>玉泉路</a></li>
<li data-coords="15,51" data-labelPos="S"><a>五棵松</a></li>
<li data-coords="16,51" data-labelPos="S"><a>万寿路</a></li>
<li data-coords="17,51" data-labelPos="S" data-marker="interchange"><a>公主坟</a></li>
<li data-coords="18,51" data-labelPos="N"><a>军事博物馆</a></li>
<li data-coords="19,51" data-labelPos="S"><a>木樨地</a></li>
<li data-coords="20,51" data-labelPos="S"><a>南礼士路</a></li>
<li data-coords="21,51" data-labelPos="N"><a>复兴门</a></li>
<li data-coords="22,51" data-labelPos="S"data-marker="interchange"><a>西单</a></li>
<li data-coords="23,51" data-labelPos="N"><a>天安门西</a></li>
<li data-coords="24,51" data-labelPos="S"><a>天安门东</a></li>
<li data-coords="25,51" data-labelPos="N"><a>王府井</a></li>
<li data-coords="26,51" data-labelPos="S"data-marker="interchange"><a>东单</a></li>
<li data-coords="27,51" data-labelPos="N"><a>建国门</a></li>
<li data-coords="28,51" data-labelPos="N"><a>永安里</a></li>
<li data-coords="29,51" data-labelPos="S"><a>国贸</a></li>
<li data-coords="30,51" data-labelPos="N"><a>大望路</a></li>
<li data-coords="31,51" data-labelPos="S"><a>四惠</a></li>
<li data-coords="32,51" data-labelPos="N"><a>四惠东</a></li>
</ul>
<ul data-color="#00ff00" data-label="5号线" data-shiftCoords="0,0">
<li data-coords="26,35" data-labelPos="E"><a href="">天通苑北</a></li>
<li data-coords="26,36" data-labelPos="E"><a>天通苑</a></li>
<li data-coords="26,37" data-labelPos="E"><a>天通苑南</a></li>
<li data-coords="26,38" data-labelPos="E"><a>立水桥</a></li>
<li data-coords="26,39" data-labelPos="E"><a>立水桥南</a></li>
<li data-coords="26,40" data-labelPos="E"><a>北苑路北</a></li>
<li data-coords="26,41" data-labelPos="E"><a>大屯路东</a></li>
<li data-coords="26,42" data-labelPos="E"><a>惠新西街北口</a></li>
<li data-coords="26,43" data-labelPos="E"data-marker="interchange"><a>惠新西街南口</a></li>
<li data-coords="26,44" data-labelPos="E"><a>和平西桥</a></li>
<li data-coords="26,45" data-labelPos="E"><a>和平北里</a></li>
<li data-coords="26,46" data-labelPos="E"><a>雍和宫</a></li>
<li data-coords="26,47" data-labelPos="E"><a>北新桥</a></li>
<li data-coords="26,48" data-labelPos="E"><a>张自忠路</a></li>
<li data-coords="26,49" data-labelPos="E"><a>东四</a></li>
<li data-coords="26,50" data-labelPos="E"><a>崇文门</a></li>
<li data-coords="26,52" data-labelPos="E"><a>瓷器口</a></li>
<li data-coords="26,53" data-labelPos="E"><a>天坛东门</a></li>
<li data-coords="26,54" data-labelPos="E"><a>蒲黄榆</a></li>
<li data-coords="26,55" data-labelPos="E"><a>刘家窑</a></li>
<li data-coords="26,56" data-labelPos="E"data-marker="interchange"><a>宋家庄</a></li>
<li data-coords="26,57" data-labelPos="E"><a>肖村</a></li>
<li data-coords="27,58" data-labelPos="E" data-marker="@station"><a>小红门</a></li>
<li data-coords="28,59" data-labelPos="E" data-marker="@station"><a>旧宫</a></li>
<li data-coords="29,60" data-labelPos="E" data-marker="@station"><a>亦庄桥</a></li>
<li data-coords="30,61" data-labelPos="E" data-marker="@station"><a>亦庄文化园</a></li>
<li data-coords="31,62" data-labelPos="E" data-marker="@station"><a>万源街</a></li>
<li data-coords="32,63" data-labelPos="E" data-marker="@station"><a>荣京东街</a></li>
<li data-coords="33,64" data-labelPos="E" data-marker="@station"><a>荣昌东街</a></li>
<li data-coords="34,65" data-labelPos="E" data-marker="@station"><a>同济南路</a></li>
<li data-coords="35,66" data-labelPos="E" data-marker="@station"><a>经海路</a></li>
<li data-coords="36,67" data-labelPos="E" data-marker="@station"><a>次渠南</a></li>
<li data-coords="37,68" data-labelPos="E" data-marker="@station"><a>次渠</a></li>
<li data-coords="38,69" data-labelPos="E"><a>亦庄火车站</a></li>
</ul>
<ul data-color="#6eacf9" data-label="10号线" data-shiftCoords="0,0">
<li data-coords="29,50" data-labelPos="E"><a>金台夕照</a></li>
<li data-coords="29,49" data-labelPos="E"data-marker="interchange"><a>呼家楼</a></li>
<li data-coords="29,48" data-labelPos="E"><a>团结湖</a></li>
<li data-coords="29,47" data-labelPos="E"><a>农业展览馆</a></li>
<li data-coords="29,46" data-labelPos="E"><a>亮马桥</a></li>
<li data-coords="29,44" data-labelPos="E"data-marker="interchange"><a>三元桥</a></li>
<li data-coords="28,43" data-labelPos="N"><a>太阳宫</a></li>
<li data-coords="27,43" data-labelPos="S"><a>芍药居</a></li>
<li data-coords="24,43" data-labelPos="N"><a>安贞门</a></li>
<li data-coords="23,43" data-labelPos="N"><a>北土城</a></li>
<li data-coords="22,43" data-labelPos="S"><a>健德门</a></li>
<li data-coords="21,43" data-labelPos="N"><a>牡丹园</a></li>
<li data-coords="20,43" data-labelPos="S"><a>西土城</a></li>
<li data-coords="19,43" data-labelPos="N"><a>知春路</a></li>
<li data-coords="18,43" data-labelPos="S"><a>知春里</a></li>
<li data-coords="17,43" data-labelPos="N"><a>海淀黄庄</a></li>
<li data-coords="16,43" data-labelPos="S"><a>苏州街</a></li>
<li data-coords="15,44" data-dir="W"></li>
<li data-coords="15,45" data-labelPos="E" ><a>巴沟</a></li>
<li data-coords="15,46" data-labelPos="E"><a>火器营</a></li>
<li data-coords="15,47" data-labelPos="E"><a>长春桥</a></li>
<li data-coords="15,48" data-labelPos="E"><a>车道沟</a></li>
<li data-coords="15,49" data-labelPos="E"data-marker="interchange"><a>慈寿寺</a></li>
<li data-coords="16,50" data-labelPos="E" data-marker="@station"><a>西钓鱼台</a></li>
<li data-coords="17,51" data-labelPos="E"><a></a></li>
<li data-coords="17,52" data-labelPos="E"><a>莲花桥</a></li>
<li data-coords="17,53" data-labelPos="E"><a>六里桥</a></li>
<li data-coords="17,54" data-labelPos="E"><a>西局</a></li>
<li data-coords="17,55" data-labelPos="E"><a>泥洼</a></li>
<li data-coords="18,56" data-labelPos="N"data-dir="S"><a>丰台站</a></li>
<li data-coords="19,56" data-labelPos="S"><a></a></li>
<li data-coords="20,56" data-labelPos="N"><a></a></li>
<li data-coords="22,56" data-labelPos="S"data-marker="interchange"><a>角门西</a></li>
<li data-coords="22,56" data-labelPos="N"><a></a></li>
<li data-coords="23,56" data-labelPos="S"><a></a></li>
<li data-coords="24,56" data-labelPos="N"><a></a></li>
<li data-coords="25,56" data-labelPos="S"><a></a></li>
<li data-coords="26,56" data-labelPos="N"><a></a></li>
<li data-coords="27,56" data-labelPos="S"><a></a></li>
<li data-coords="28,56" data-labelPos="N" ><a>分钟寺</a></li>
<li data-coords="29,55" data-labelPos="E" data-dir="E"><a>十里河</a></li>
<li data-coords="29,54" data-labelPos="E"><a></a></li>
<li data-coords="29,53" data-labelPos="E"><a></a></li>
<li data-coords="29,52" data-labelPos="E"><a></a></li>
<li data-coords="29,51" data-labelPos="E"><a></a></li>
<li data-coords="29,50" data-labelPos="E"><a></a></li>
</ul>
</div>
<div id="legend"></div>
<script type="text/javascript">
$(".subway-map").subwayMap({ debug: true });
</script>