½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
Easy Tree - Query¿Í Bootstrap 3¸¦ Ȱ¿ëÇÑ ¸ÚÁø Æ®¸® ºä : happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > Easy Tree - Query¿Í Bootstrap 3¸¦ Ȱ¿ëÇÑ ¸ÚÁø Æ®¸® ºä »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
HTML
PHP
Api
CSS
2022
ASP
¸ÞÀϸµ
¼îÇθô
Ä«¿îÅÍ
jquery
mysql
¸ðµâ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Easy Tree - Query¿Í Bootstrap 3¸¦ Ȱ¿ëÇÑ ¸ÚÁø Æ®¸® ºä
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù JAVASCRIPT
´Ù¿î·Îµå Ƚ¼ö 9 ȸ
°£´Ü¼³¸í Easy Tree´Â jQuery¿Í Bootstrap 3À» À§ÇÑ ÈǸ¢ÇÏ°í °­·ÂÇÑ Æ®¸® ºä Ç÷¯±×ÀÎÀ¸·Î, ¾ÆÀÌÅÛ/³ëµå¸¦ ¼±ÅÃ, Ãß°¡, ÆíÁý ¶Ç´Â Á¦°ÅÇÏ¿© »ç¿ëÀÚ¸¸ÀÇ Æ®¸® ºä ±¸Á¶¸¦ ±¸ÃàÇÒ ¼ö ÀÖ½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ
 

Easy Tree´Â jQuery¿Í Bootstrap 3À» À§ÇÑ ÈǸ¢ÇÏ°í °­·ÂÇÑ Æ®¸® ºä Ç÷¯±×ÀÎÀÔ´Ï´Ù.
¾ÆÀÌÅÛ/³ëµå¸¦ ¼±ÅÃ, Ãß°¡, ÆíÁý ¶Ç´Â Á¦°ÅÇÏ¿© »ç¿ëÀÚ¸¸ÀÇ Æ®¸® ºä ±¸Á¶¸¦ ±¸ÃàÇÒ ¼ö ÀÖ½À´Ï´Ù.

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







# »ç¿ë¹æ¹ý


1. HEAD ¿¡ ¶óÀ̺귯¸® Ãß°¡ ÇÕ´Ï´Ù. 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/easyTree.css">
<script src="src/easyTree.js"></script>


2. ¾Æ·¡¿Í °°Àº »ùÇà Ʈ¸®ºä¸¦ ¸¸µì´Ï´Ù. 
<div class="easy-tree">
  <ul>
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3
      <ul>
        <li>Example 1</li>
        <li>Example 2
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
          </ul>

        </li>
        <li>Example 3</li>
        <li>Example 4</li>
      </ul>
    </li>
    <li>Example 0
      <ul>
        <li>Example 1</li>
        <li>Example 2</li>
        <li>Example 3</li>
        <li>Example 4
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>


3. Ç÷¯±×ÀÎÀ» ÃʱâÈ­ ¹× È£ÃâÇÕ´Ï´Ù.
<script>
  (function ($) {
    function init() {
      $('.easy-tree').EasyTree({
        selectable: true,
        deletable: false,
        editable: false,
        addable: false,
        i18n: {
        ...
        }
      });
    }
    init();
  })(jQuery)
</script>






# ¾Æ½¬¿îÁ¡

DRAG & DROP ±îÁö ÀÖ¾ú´Ù¸é ÁÁ¾ÒÀ» °Í °°½À´Ï´Ù. 
ÇÏÁö¸¸ ¾ø´õ¶óµµ ±¦ÂúÀº ±â´ÉÀÔ´Ï´Ù.




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