[jQuery] jQuery - 바다의 여인

jQuery 트리를 사용하여 부서별 조직도를 구현합니다. 웹 프로그래밍에서는 트리와 같은 데이터 구조를 표현하는 경우가 많습니다. 첫 번째 HTML에서 트리를 나타내는 요소를 만듭니다.

<울 ID=“tree_menu”>

……

울>

트리를 나타내는 요소는 프로젝트에 따라 동적으로 구성됩니다. 관련 JavaScript를 추가하고 ID가 “tree_menu”인 요소를 초기 상태(열기/닫기)가 있는 트리로 표현합니다.

▣ tree.html (utf-8)

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Tree menu</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jtree.js"></script>
<link rel="stylesheet" type="text/css" href="css/jtree.css" />
</head>
 
<body>
<ul id="tree_menu">
        <li>전체</a>
        <ul>
               <li>부서 1
               <ul>
                       <li>팀 1-1</li>
               </ul>
               </li>
               <li>부서 2
               <ul>
                       <li>팀 2-1</li>
                       <li>팀 2-2</li>
               </ul>
               </li>
               <li>부서 3
               <ul>
                       <li>팀 3-1</li>
                       <li>팀 3-2</li>
                       <li>팀 3-3</li>
               </ul>
               <li>부서 4
               <ul>
                       <li>팀 4-1</li>
                       <li>팀 4-2</li>
                       <li>팀 4-3</li>
                       <li>팀 4-4</li>
               </ul>
               </li>
        </ul>
        </li>
</ul>
</body>
</html>

▣ jtree.css (utf-8)

@charset "utf-8";
 
ul#tree_menu,ul#tree_menu * {
        margin: 0;
        padding: 0;
        list-style: none;
        border: none;
        overflow: hidden;
        text-decoration: none;
        color: #555;
}
 
ul#tree_menu a:hover {
        text-decoration: underline;
}
 
ul#tree_menu ul {
        padding: 0 0 0 0px;
        zoom: 1;
}
 
ul#tree_menu li {
        position: relative;
        background: url(../images/tree_bg.gif) no-repeat 7px top;
        padding: 0 0 0 20px;
        font-size: 13px;
        line-height: 18px;
        zoom: 1;
}
 
ul#tree_menu li.end {
        background-image: url(../images/tree_end.gif);
}
 
ul#tree_menu li a.control {
        position: absolute;
        left: 0px;
        top: 1px;
        display: block;
        width: 9px;
        height: 9px;
        padding: 3px;
}

▣ jtree.js (utf-8)

jQuery(function($) {
    var tree_menu = $('#tree_menu');
    var icon_open = 'images/tree_open.gif';
    var icon_close="images/tree_close.gif";
    
    tree_menu.find('li:has("ul")')
      .prepend('<a href="#" class="control"><img src="' + icon_close + '" /></a> ');
    tree_menu.find('li:last-child').addClass('end');
    
    $('.control').click(function() {
        var temp_el = $(this).parent().find('>ul');
        if (temp_el.css('display') == 'none') {
            temp_el.slideDown(100);
            $(this).find('img').attr('src', icon_close);
            return false;
        }
        else {
            temp_el.slideUp(100);
            $(this).find('img').attr('src', icon_open);
            return false;
        }
    });
    
    function tree_init(status) {
        if (status == 'close') {
            tree_menu.find('ul').hide();
            $('a.control').find('img').attr('src', icon_open);
        }
        else if (status == 'open') {
            tree_menu.find('ul').show();
            $('a.control').find('img').attr('src', icon_close);
        }
    }
    
    // tree_init('close');
    tree_init('open');
});

▣ 결과 화면