My Study/Java

탭 기능 만들기

728x90

탭 기능 설명 및 사용법 가이드

1. 메인 JSP

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/resources/pweb/mdi/mdi.css">
    <link rel="stylesheet" type="text/css" href="/resources/pweb/clipreport5/css/clipreport5.css">
    <link rel="stylesheet" type="text/css" href="/resources/pweb/clipreport5/css/eform.css">
    <link rel="stylesheet" type="text/css" href="/resources/pweb/clipreport5/css/UserConfig5.css">
    <link rel="stylesheet" type="text/css" href="/resources/pweb/clipreport5/css/font.css">
    <script type='text/javascript' src='/resources/pweb/clipreport5/js/jquery-1.11.1.js'></script>
    <script type='text/javascript' src='/resources/pweb/clipreport5/js/clipreport5.js?ver=1.0'></script>
    <script type='text/javascript' src='/resources/pweb/clipreport5/js/UserConfig5.js'></script>
</head>
<body>
    <div class="tabs">
    </div>
    <div class="mdiWrapper">
        <div class="content">

        </div>
    </div>
    <script src="/resources/pweb/mdi/mdi.js"></script>
</body>
</html>

베이스가 될 JSP 코드

사용할 때에 temp.jsp에 js, css 모두 import 후 temp.jsp를 include 한 뒤 사용하는게 좋음.

2. 메인JS

2-1. tabFunc

const tabList = new Array();

const tabFunc = (target) => {
    let link = target.attr('id');
    let name = target.text();
    if(name == '로그관리') name = '목록조회';
        if(tabList.length < 8) {
            if(tabList.indexOf(name) == -1) {
                // report를 실행해야 하는 탭
                if(name == '서식뷰어') {
                    tabList.push(name);
                    makeTab(name);
                    makeReport(name, link);
                    $.ajax({
                        url: '/mdi/resultKey',
                        type: "POST",
                        success: function(response) {
                            report = createReport("/clip/reportServer", response, document.getElementsByClassName(name + 'Div')[0]);
                            report.setStyle("close_button", "display:none");
                            report.view();
                        }
                    });
                } else {
                    tabList.push(name);
                    makeTab(name);
                    makeContent(name, link);
                }
            } else {
                $('.allTabs').removeClass('active');
                $('.allDiv').css('display', 'none');
                $('.' + name + 'Div').css('display', 'block');
                $('.' + name).addClass('active');
            }
        } else {
            alert('탭의 최대 개수는 8개 입니다. 사용하시지 않는 탭은 닫아주시길 바랍니다.');
        }
}

메뉴를 클릭했을 때 실행되는 함수.

탭의 개수가 8개가 초과하는지 판단에 따라 실행하는 로직이 다름.

또한 report를 띄워야 하는 메뉴에서는 report 함수를 실행할 ajax를 실행.

2-2. makeContent, makeReport

const makeContent = (name, link) => {
    $('.allDiv').css('display', 'none');
    let content = "<div class='allDiv "+ (name + 'Div') +"'></div>";
    $('.content').append(content);
    $('.' + name + 'Div').load('http://localhost:8080' + link);
}

const makeReport = (name, link) => {
    $('.allDiv').css('display', 'none');
    let content = "<div class='allDiv "+ (name + 'Div') +"'></div>";
    $('.content').append(content);
}

메뉴를 눌렀을 때 content 또는 report를 화면에 보여줌.

탭을 눌렀을 때 설정된 div 안쪽에 load하는 방식을 사용함.

2-3. makeTap, moveTab

const makeTab = (name) => {
    let tab = "<div class=\"" + name + " allTabs\"><div class='clickTab' onclick='moveTab($(this))'>" + name + "</div>" +
                    "<div class='btnDiv'><button onclick='closeBtn($(this))'>X</button></div>" +
                    "</div>";
    let content = "<div class='conDetail " + name + "content'></div>"
    $('.content').append(content);
    $('.tabs').append(tab);
    $('.allTabs').removeClass('active');
    $('.' + name).addClass('active');
    $('.allDiv').css('display', 'none');
    $('.' + name + 'Div').css('display', 'block');
}

const moveTab = (target) => {
    let name = target.text();
    $('.allTabs').removeClass('active');
    $('.' + name).addClass('active');
    $('.allDiv').css('display', 'none');
    $('.' + name + 'Div').css('display', 'block');
}

makeTap → 메뉴 클릭 시 탭을 만들기 위한 함수

moveTab → 탭 클릭 시 탭 화면으로 이동하는 함수

2-4. closeBtn

const closeBtn = (btn) => {
    let num = btn.parent().parent().attr('class').indexOf(' ');
    let tab = btn.parent().parent().attr('class').substring(0, num);
    if(tab == '로그관리') tab = '목록조회';
    console.log(tab);
    $('.' + tab).remove();
    $('.' + tab).removeClass('active');
    $('.' + tab + 'Div').css('display', 'none');
    let index = tabList.indexOf(tab);
    tabList.splice(index, 1);
    active(tab);
}

탭 닫기 버튼을 눌렀을 때 실행되는 함수

현재 닫기를 누른 탭과 내용을 화면에서 지움

2-5. active

const active = (name) => {
    if($('.active').length != 0) {

    } else {
        $('.' + tabList[tabList.length - 1]).addClass('active');
        $('.' + tabList[tabList.length - 1] + 'Div').css('display', 'block');
    }
}

현재 활성화 된 탭 감지 및 활성화 된 탭 변경

3. 탭 클릭 시 보여줄 JSP들

탭 내에서 ajax를 쏠 때 url을 설정하기 전 현재 페이지에서 url을 가져와서 사용하는게 아닌 보내줘야 할 url을 정확히 입력함

ex)

function deleteList() {
    
       var url = "/code/deleteMulti";
       var tableId = "code";
       var pkId = "codeId";

       comm.ajax.deleteList(url, tableId, pkId);

}

728x90

저작자표시

'My Study > Java' 카테고리의 다른 글

Google Analytics (GA) (0)	2024.02.05
GA (Google Analytics)란? (1)	2024.02.05
Scheduler 만들 수 있는 Quartz 정리 (0)	2024.01.22
Springboot 3.0 이상에서 Spring security 사용 (0)	2024.01.17
신입 개발자의 기록 [12/06] Apache와 Tomcat을 사용해 war 배포 (1)	2023.12.06

Contents

새소식

인기 검색어