미디어위키:Common.js: 두 판 사이의 차이

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
 
(같은 사용자의 중간 판 84개는 보이지 않습니다)
1번째 줄: 1번째 줄:
$(document).ready(function() {
$(document).ready(function() {
     // 기존의 .custom-toggle 클릭 이벤트 핸들러
     // .custom-toggle 클릭 이벤트 핸들러
     $('.custom-toggle').click(function() {
     $('.custom-toggle').click(function() {
         $(this).next('.custom-content').slideToggle();
         $(this).next('.custom-content').slideToggle();
     });
     });


     // .toggle-collapse 클릭 이벤트 핸들러
     // 페이지 로드 시 기본 상태 설정
     $('.toggle-collapse').click(function() {
     $('.custom-toggle').each(function() {
         var $this = $(this);
         var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
         var isCollapsed = $this.data('collapsed') === true;
         var isCollapsed = $this.data('collapsed') === true;
        var $currentRow = $this.closest('tr');
        // 사용자 정의 텍스트 확인
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;


for (let i = 0; i < rowsToToggle; i++) {
    $currentRow = $currentRow.next();
    if ($currentRow.length) {
         if (isCollapsed) {
         if (isCollapsed) {
             $currentRow.css({
             $this.next('.custom-content').hide();
                overflow: 'hidden',
                display: 'table-row',
                maxHeight: '0'
            }).animate({ maxHeight: '50px' }, 400); // 부드럽게 열림
         } else {
         } else {
             $currentRow.animate({ maxHeight: '0' }, 400, function() {
             $this.next('.custom-content').show();
                // 콜백 내부에서는 this를 직접 사용하여 컨텍스트를 명확히 함
                this.style.display = 'none'; // jQuery 없이 DOM API로 처리
            });
         }
         }
     }
     });
}


    // 접기 상태를 확인하고 초기화하는 코드
    $('.custom-toggle').each(function() {
        var $this = $(this);
        var collapsedState = $this.data('collapsed');


 
         // '유형'에 맞는 접기 상태 설정
 
         if (collapsedState !== undefined) {
         // 상태 토글
            if (collapsedState === true) {
         $this.data('collapsed', !isCollapsed);
                $this.next('.custom-content').hide();
        $this.text(isCollapsed ? collapseText : expandText);
            } else {
                $this.next('.custom-content').show();
            }
        }
     });
     });


     // 페이지 로드 시 기본 상태 설정
     // .toggle-collapse 클릭 이벤트 핸들러
     $('.toggle-collapse').each(function() {
     $('.toggle-collapse').click(function() {
         var $this = $(this);
         var $this = $(this);
         var rowsToToggle = parseInt($this.data('rows')) || 1;
         var rowsToToggle = parseInt($this.data('rows')) || 1;
         var isCollapsed = $this.data('collapsed') === true;
         var isCollapsed = $this.data('collapsed') === true;


         // 사용자 정의 텍스트 확인
         // 사용자 정의 텍스트 설정
         var expandText = $this.data('expand-text') || '펼치기';
         var expandText = $this.data('expand-text') || '펼치기';
         var collapseText = $this.data('collapse-text') || expandText;
         var collapseText = $this.data('collapse-text') || expandText;


         if (isCollapsed) {
         // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
            var $currentRow = $this.closest('tr');
        var $row = $this.closest('tr');
            for (let i = 0; i < rowsToToggle; i++) {
        for (var i = 0; i < rowsToToggle; i++) {
                $currentRow = $currentRow.next();
            $row = $row.next();
                if ($currentRow.length) {
            if ($row.length) {
                    $currentRow.css({
                $row.toggle(); // 슬라이드 없이 즉시 토글
                        display: 'none',
                        maxHeight: '0',
                        overflow: 'hidden'
                    }); // 즉시 숨김
                }
             }
             }
            $this.text(expandText);
        } else {
            $this.text(collapseText);
         }
         }
        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
     });
     });
});


 
     // .toggle-collapse 클릭 이벤트 핸들러
     // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
     $('.toggle-collapse').click(function() {
     $('nolinkstyle').each(function() {
         var $this = $(this);
         var $this = $(this);
         var content = $this.html();
         var rowsToToggle = parseInt($this.data('rows')) || 1;
         $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
         var isCollapsed = $this.data('collapsed') === true;
    });


        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;


    // Smooth toggle for rows with animations
        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
    $('.smooth-toggle').click(function() {
         var $row = $this.closest('tr');
        var $this = $(this);
         for (var i = 0; i < rowsToToggle; i++) {
         var $content = $this.closest('tr').next('.custom-content');
             $row = $row.next();
 
             if ($row.length) {
         if ($content.hasClass('expanded')) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
             $content.removeClass('expanded').css('max-height', '0');
            }
        } else {
             $content.addClass('expanded').css('max-height', '1000px');
         }
         }


         // Update button text
         // 상태 토글
         var expandText = $this.data('expand-text') || '펼치기';
         $this.data('collapsed', !isCollapsed);
         var collapseText = $this.data('collapse-text') || '접기';
         $this.text($this.data('collapsed') ? expandText : collapseText);
        $this.text($content.hasClass('expanded') ? collapseText : expandText);
     });
     });


     // Deprecated <nolinkstyle> handling is commented out.
     // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
    /*
     $('nolinkstyle').each(function() {
     $('nolinkstyle').each(function() {
         var $this = $(this);
         var $this = $(this);
104번째 줄: 86번째 줄:
         $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
         $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
     });
     });
    */
});

2024년 11월 29일 (금) 23:47 기준 최신판

$(document).ready(function() {
    // .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').slideToggle();
    });

    // 페이지 로드 시 기본 상태 설정
    $('.custom-toggle').each(function() {
        var $this = $(this);
        var isCollapsed = $this.data('collapsed') === true;

        if (isCollapsed) {
            $this.next('.custom-content').hide();
        } else {
            $this.next('.custom-content').show();
        }
    });

    // 접기 상태를 확인하고 초기화하는 코드
    $('.custom-toggle').each(function() {
        var $this = $(this);
        var collapsedState = $this.data('collapsed');

        // '유형'에 맞는 접기 상태 설정
        if (collapsedState !== undefined) {
            if (collapsedState === true) {
                $this.next('.custom-content').hide();
            } else {
                $this.next('.custom-content').show();
            }
        }
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
            }
        }

        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
            }
        }

        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
    });

    // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
    $('nolinkstyle').each(function() {
        var $this = $(this);
        var content = $this.html();
        $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
    });
});