[SPRING] jquery-ui tabs 추가 삭제 기능 구현

tab 기능 추가삭제에 대해서 알아볼께요

tab 기능을 쓰려면 jquery-ui 라이브러리가 필요합니다.

<link href="<c:url value="/resources/jquery-ui/jquery-ui.css"/>" rel="stylesheet" type="text/css"/>
<link href="<c:url value="/resources/jqGrid/css/ui.jqgrid.css"/>" rel="stylesheet" type="text/css"/>
 
<script src="<c:url value="/resources/jqGrid/js/jquery-1.11.0.min.js"/>"></script>
<script src="<c:url value="/resources/jquery-ui/jquery-ui.js"/>"></script>
<script src="<c:url value="/resources/js/jquery.layout.js"/>"></script>
<script src="<c:url value="/resources/jqGrid/js/i18n/grid.locale-en.js"/>"></script>
<script src="<c:url value="/resources/jqGrid/js/jquery.jqGrid.min.js"/>"></script>

저는 추후에 jqgrid를 쓸 계획이라 같이 넣어주었습니다.

jquery-1.11.0 버전을 썼는데 버전마다 조금씩 다르더라구요.. 참고해주세요.

jsp body 부분입니다

<div id="doclist">
    <h2>트리메뉴</h2>
    <ul id="documents">
        <li><a href="#" id = "1" rel="read" title="This is the content of Document1">탭1</a></li>
        <li><a href="#" id = "2" rel="readPage2" title="This is the content of Document2">탭2</a></li>
        <li><a href="#" id = "3" rel="readPage3" title="This is the content of Document3">탭3</a></li>
        <li><a href="#" id = "4" rel="readPage4" title="This is the content of Document4">탭4</a></li>
        <li><a href="#" id = "5" rel="readPage5" title="This is the content of Document5">탭5</a></li>
    </ul>
</div>
<div id="tabs">
  <ul>
    <li><a href="#tabs-0">intro</a> <span class="ui-icon ui-icon-close" role="presentation">삭제</span></li>
  </ul>
  <div id="tabs-0">
    <p>탭 구현</p>
  </div>
</div>

트리메뉴 부분과 탭 부분입니다 탭은 하나만 생성시켜놓았습니다.

이어서 tabs 관련 스크립트입니다.

<script type="text/javascript">
    $(document).ready(function() {
        
        // 탭 li 선언
        var tabTemplate = "<li><a href='<%="#"%>{href}'><%="#"%>{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
        // 탭 선언
        var tabs = $( "#tabs" ).tabs();
        
        // documents의 a태그들 중 원하는 a태그 클릭 했을때 실행 
        $("#documents a").click(function() {
            // 현재 눌린 a 태그 가져오기
            var link = $(this);
            // tabs_id 선언
            var tabs_id = "tabs-" + $(link).attr("id");
            // find_id 선언
            var find_id = $("[id= " + tabs_id + "]").attr("id");
            // tab_id 선언
            var tab_id = "#" + tabs_id;
            // a태그에 해당하는 탭이 열려 있을 경우
            if(find_id == tabs_id){
                // 열려있는 탭으로 이동
                tabs.tabs("option","active", id2Index("#tabs",tab_id));
            // 아닐경우
            }else{
                // 탭을 추가
                addTab(link);
            }
        });
        
        // 선택한 documents a 태그의 해당하는 tab index 찾기
        function id2Index(tabsId, srcId){
            // index 값 -1로 설정
            var index = -1;
            // i 값 선언, tbH : 해당하는 탭의 a 태그 찾기
            var i = 0, tbH = $(tabsId).find("li a");
            // tbH 길이 선언
            var lntb = tbH.length;
            // lntb가 0보다 클경우
            if(lntb>0){
                for(i=0;i<lntb;i++){
                    o=tbH[i];
                    if(o.href.search(srcId)>0){
                        index = i;
                    }
                }
            }
            // index값 리턴
            return index;
        }
        
        // 해당 탭 지우기
        tabs.on( "click", "span.ui-icon-close", function() {
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            // 해당하는 탭 제거
            $( "#" + panelId ).remove();
            // 탭 refresh
            tabs.tabs( "refresh" );
          });
        // 탭 추가
        function addTab(link){
            // 탭 라벨 선언
            var label = $(link).text();
            // id 값을 tabs-? 로 선언
            var id = "tabs-" + $(link).attr("id");
            // rel : link의 속성 중 rel을 찾는다 (ajax로 탭에 보여줄 내용을 가져올 html의 주소가 들어간다)
            var rel = $(link).attr("rel");
            // li replace
            var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
            // tab내용 선언
            var tabContentHtml = "";
            // ajax 실행
            $.ajax({
                type : "POST",
                // controller로 갈 url
                url : rel,
                // tabContentHtml이 전역변수이기 떄문에 false값을 준다
                async:false,
                // 받아올 데이터타입은 html
                dataType : "html",
                success : function(data){
                    // tabContentHtml에 넘어온 data값을 준다 결국 jsp 파일을 html형식으로 tabContentHtml이 들어가는 것
                    tabContentHtml = data;
                }
            });
            // 탭의 ui-tabs-nav 찾아서 li를 append 시킨다
            tabs.find(".ui-tabs-nav").append(li);
            // 추가된 탭의 내용을 삽입
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            // 탭 새로고침
            tabs.tabs( "refresh" );
            // 생성 된 탭으로 바로 가게 한다.
            tabs.tabs( "option", "active", $("#tab_header").index());
        }
    });
        
</script>

주석을 최대한 달아놓았습니다. 이해가 안가시는 분들은 댓글 남겨주세요.

이렇게하면 동적 트리 생성,삭제가 완료됩니다.

java controller 부분입니다.

@RequestMapping(value = "read", produces = "text/json; charset=UTF-8")
    public String read(Model model) {
        return "tab_1";
    }

일단 하나만 예시로 스크립트에서 read가 읽혀오면 tab_1.jsp를 불러와서 tabContentHtml에 넣는 소스입니다.

다음 포스팅은 jqgrid 활용 방법을 소개하겠습니다.