ÁöÇÏö ³ë¼±µµ¸¦ Ç¥ÇöÇÏ´Â jQeury Ç÷¯±×ÀÎ ÀÔ´Ï´Ù.
MIT ¶óÀ̼¾½º ÀÔ´Ï´Ù.
![](/program/wys2/file_attach/2020/03/13/1584066270-54.jpg)
»ç¿ë¹ýÀº »ý°¢º¸´Ù ½ÉÇÃÇÏÁö¸¸ ¸Ê¿¡ ¿ä¼Ò¸¦ ¹èÁ¤ÇÏ´Â ÀÛ¾÷Àº ÇѶ¡ ÇѶ¡ÀÇ ³ë·ÂÀÌ ÇÊ¿äÇϰڳ׿ä ^^;
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js type="text/javascript" src="jquery.subwayMap-0.5.3.js"></script>
"></script>
<script
<div class="subway-map" data-columns="12" data-rows="15" data-cellSize="50" data-legendId="legend" data-textClass="text" data-gridNumbers="true"
data-grid="false" data-lineWidth="8"> <ul data-color="#36AEFF" data-label="jQuery Widgets"> <li data-coords="2,2" data-marker="interchange">Accordion</li> <li data-coords="2,3" data-marker="interchange">Accordion</li> <li data-coords="4,2">Auto\ncomplete</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="#FF7936 " data-label="jQuery Interactions" data-shiftCoords="0,-1" data-outline="true" data-dotted="true"> <li data-coords="2,6"></li> <li data-coords="2,5.9" data-marker="@interchange"> </li> <li data-coords="5,6" data-marker="@station" data-labelPos="N"><a href="http://jqueryui.com/demos/selectable/">Selectable</a></li> <li data-coords="6,6"></li> <li data-coords="7,3" data-marker="@station" data-labelPos="W"><a href="http://jqueryui.com/demos/resizeable/">Resizeable</a></li> <li data-coords="7,5" data-dir="E" data-marker="station" data-labelPos="E"><a href="http://jqueryui.com/demos/droppable/">Droppable</a></li> <li data-coords="7,1" data-marker="interchange" data-labelPos="W"><a href="http://jqueryui.com/demos/draggable/">Draggable</a></li> </ul>
</div> <div id="legend"></div>
<script type="text/javascript"> $(".subway-map").subwayMap({ debug: true }); </script>
¾Æ·¡ÀÇ ¼Ó¼ºÀ» Âü°íÇÏ¿© ¼öÁ¤Çϼż »ç¿ëÇÏ½Ã¸é µË´Ï´Ù.
data-columns
µ¥ÀÌÅÍ ¿À» ¶æ ÇÕ´Ï´Ù.
data-rows
µ¥ÀÌÅÍ ÇàÀ» ¶æ ÇÕ´Ï´Ù.
data-cellSize
°¢ ¼¿ÀÇ ³Êºñ¿Í ³ôÀ̸¦ ¶æÇÕ´Ï´Ù. ( ¼¿Àº Á¤»ç°¢ÇüÀÔ´Ï´Ù. )
data-legendId
Áöµµ ¹ü·Ê¿¡ Ãß°¡µÉ HTML ¿ä¼ÒÀÇ ID¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ¾î¿ä.
data-textClass
Áöµµ¿¡¼ ÅؽºÆ® ·¹ÀÌºí¿¡ »ç¿ëµÉ CALSS ¸¦ ÁöÁ¤Çϼ¼¿ä.
data-gridNumbers
±×¸®µå¿¡ ¼ýÀÚ¸¦ Ç¥½ÃÇϰųª ¼û±â·Á¸é TRUE, FASLE ·Î ¼³Á¤Çϼ¼¿ä.
data-grid
¸Ê¿¡ À¯¿ëÇÑ ±×¸®µå¸¦ Ç¥½ÃÇϰųª ¼û±â·Á¸é TRUE ·Î ¼³Á¤Çϼ¼¿ä.
data-lineWidth
°¢ ÁÙÀÇ ³Êºñ¸¦ ¼³Á¤Çϼ¼¿ä.
data-color
¼±ÀÇ »ö»ó
data-coords
¿ªÀÇ À§Ä¡¸¦ ¼³Á¤Çϸç X,Y Æ÷ÀÎÆ®¸¦ ÁöÁ¤.
|