½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > Áöµµ > Javascript ¸¦ ÀÌ¿ëÇÏ¿© ÁöÇÏö ³ë¼±µµ(subway map)¸¦ ¸¸µé¾î º¸¼¼¿ä. »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Javascript ¸¦ ÀÌ¿ëÇÏ¿© ÁöÇÏö ³ë¼±µµ(subway map)¸¦ ¸¸µé¾î º¸¼¼¿ä.
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù Áöµµ
´Ù¿î·Îµå Ƚ¼ö 174 ȸ
°£´Ü¼³¸í jquery ¸¦ ÀÌ¿ëÇÏ¿© ÁöÇÏö ³ë¼±µµ¸¦ ±×¸± ¼ö ÀÖ½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

ÁöÇÏö ³ë¼±µµ¸¦ Ç¥ÇöÇÏ´Â jQeury Ç÷¯±×ÀÎ ÀÔ´Ï´Ù.

MIT ¶óÀ̼¾½º ÀÔ´Ï´Ù.




»ç¿ë¹ýÀº »ý°¢º¸´Ù ½ÉÇÃÇÏÁö¸¸ ¸Ê¿¡ ¿ä¼Ò¸¦ ¹èÁ¤ÇÏ´Â ÀÛ¾÷Àº ÇѶ¡ ÇѶ¡ÀÇ ³ë·ÂÀÌ ÇÊ¿äÇϰڳ׿ä ^^;


<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 Æ÷ÀÎÆ®¸¦ ÁöÁ¤.

 


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 85883168 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.