개발일기 [Django, JQuery]

금일은 클라이언트 측에서 TAB형식의 브라우저 화면을 원한다고 해서 여러가지 라이브러리를 찾아보다가 결국 마땅한 모듈이 존재하지 않길래 직접 만들어봤다! 생각보다 동적생성을 하면서 show/hide 를 하는 형식으로 하다보니 여러가지 문제점이 발생했지만 data태그를 사용해서 어느정도 해결을 해보았다 하지만 tab형식 자체는 백단에서 많은 양의 데이터가 오게 된다면 tab이 중복으로 존재할 시 show/hide로 인해서 데이터가 중첩이 되어 렌더링이 많이 느린 느낌을 받았다. 이것 또한 해결을 얼른 해야겠다.!

개발 스크립트 [JQuery]

$('.nav__link').click(function () {

    let val = $(this).data('value')
    const sub_tab = $('.tab_menu')

    $('.print-tab').children('div').each(function (index, item) {
        $(item).hide()
    })
    let submenulink = $(this).data('link')
    if (document.getElementById('tab' + val)) {
        let tab = document.getElementById('tab' + val)
        tab.click()
    } else {
        let submenutxt = $(this).text()
        const menu = $('.print-tab-menu')
        menu.append('<li class="tab_menu plu_tab active" id="' + 'tab' + val + '" data-tab="' + val + '" style="font-size: small; position: relative; z-index: 1"><a></a></li>')
        let submenu = menu.children().last()
        submenu.children('a').text(submenutxt)
        submenu.children('a').append('<a class="icon_tab"><i style="color: #818181; margin-left: 10px;" class="fa-solid fa-xmark"></i></a>')
        $('.print-tab').append('<div class="info_con" data-id="' + val + '" style="margin-top: 10px; padding: 1%"></div>')
        $.ajax({
            url: submenulink,
            success: function (result) {
                $('.print-tab').children('div').last().addClass('subCon')
                $('.print-tab').children('div').last().html(result)

            }
        });
        sub_tab.each(function (index, item) {
            $(item).removeClass('active')
        })
    }
});

$(document).on('click', ".tab_menu", function () {
    const sub_tab = $('.tab_menu')
    const con = $('.subCon')
    sub_tab.each(function (index, item) {
        $(item).removeClass('active')
    })
    $(this).addClass('active')
    let tab = $(this).data('tab')
    con.each(function () {
        let subconId = $(this).data('id')
        if (subconId === tab) {
            $(this).show()
            $(this).find('.re_rayout').click()
        } else {
            $(this).hide()
        }
    })
});


$(document).on('click', "#remove_all", function () {
    let msg = confirm('열려있는 모든 메뉴탭을 삭제하시겠습니까?')

    if ($('.tab_menu').length === 1) {
        alert('열려있는 메뉴탭이 없습니다.')
    } else if (msg) {
        $('.plu_tab').remove()
        $('.info_con').remove()
        $('.tab_menu').click()
    }

});

$(document).on('click', ".icon_tab", function (event) {
    event.stopPropagation();
    let par = $(this).parents('li')
    let tab = $(this).parents('li').data('tab')
    const con = $('.subCon')
    con.each(function () {
        let subconId = $(this).data('id')
        if (subconId === tab) {
            $(this).remove()
            par.remove()
        }
    })
    $('.tab_menu').click()
});