master

分支 (1)

管理

管理

master

subwayMap
/
subwayMap.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Subway Map</title>
    <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;
    }
    #main{
        width: 500px;
        margin:0 auto;
    }
    /* 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 id="main">
        <div class="subway-map" data-columns="12" data-rows="10" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="true" data-lineWidth="8">
            <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/">
                        <a href="http://jqueryui.com/demos/autocomplete/">Auto\ncomplete</a>
                    </a>
                </li>
                <li data-coords="5,3" data-dir="E"></li>
                <li data-coords="5,5" data-label=""><a href="#">self</a></li>
                <li data-coords="6,6" data-dir="S"></li>
            </ul>
        </div>
        <div id="legend"></div>
    </div>


    <script type="text/javascript">
        $(".subway-map").subwayMap({ debug: true });

    </script>
</body>
</html>