[JS] 웹 동적 분할 패널 (레이아웃) 만들기

만들 것

• 목차 패널 숨기기/펼치기 
• 문서 패널 하나만 넓게 보기
• 그림 패널 하나 새 창으로 열기
• 그림+ 문서 같이 보기 (컬럼 2분할)  - 가로/세로 누를때마다 변경
• 나눈 패널 위치 전환

 

$(document).ready(function() {   

  // page transition effect
  jQuery(function($) {

    jQuery.ajax({cache: false});
    $("body").css("display", "none");
    $("body").fadeIn(700);

    $("a.transition").click(function(event) {
      event.preventDefault();
      linkLocation = this.href;
      $("body").fadeOut(0, redirectPage);
    });

    function redirectPage() {
      window.location = linkLocation;
    }
  });  

});


function Panel(){ 
  
 
} 
 
Panel.prototype = {  

  // dynamic show Panel control
  loadPanelControl: function() { 
      
    // 0. default frame
    var defaultShow = $("#defaultShow").hide();
    var fullShow = $("#fullShow").hide();
    var horizonShow = $("#horizonShow").hide();
    var mul = $("#horizonShow, #fullShow, #defaultShow").hide();
    var submenu = $("#leftPanel").show(); 

    // 1. hide leftPanel
    $("#hideContent").click(function() {
      if (submenu.is(":visible")) {
        submenu.slideUp(); // hide
        return false;
      } else {
        submenu.slideDown();
      }
    });

    // 2. full frame & split panel
    $("#fullContent").click(function() { 
        mul.hide();
        fullShow.show();
        return false; 
    }); 

    // vertical
    $("#halfContent").click(function() {
      if (defaultShow.is(":visible")) {
        mul.hide();
        fullShow.show();
        return false;
      } else if (fullShow.is(":visible")) {
        mul.hide();
        defaultShow.show();
        return false;
      } else {
        mul.hide();
        defaultShow.show();
      }
    });
    
    // horizon
    var actPn1 = $(".active > #cp1");
    var actPn2 = $(".active > #cp2");
    $("#halfContent2").click(function() {    
      mul.hide(); 
      horizonShow.show(); 
      actPn2.load("cp2.html"); 
    });

    // 3. cross frame
    var count = 0; 
    $("#crossContent").click(function() { 
      count++;
      if (defaultShow.is(":visible")) {
        mul.hide();
    defaultShow.show(); 
        if (count % 2 == 1) {
          $("#cp2").after($("#cp1")).css("width","50%");
    } 
    else {
          $("#cp2").before($("#cp1")).css("width","50%");;
        }
    }else if (horizonShow.is(":visible")) {
        mul.hide();
        horizonShow.show();
    actPn1.css("top", " 0%");
        actPn2.css("top", "50%");
    if (count % 2 == 1) {               
          actPn1.css("top", "50%");
          actPn2.css("top", "0%");
        } else { 
          actPn1.css("top", "0%");
          actPn2.css("top", "50%");             
        }
      } else {
        alert("전환할 창이 없습니다.");
      }           
      
    }); 
  }

}

//쓰지 않는 다른 요소가 display:none임에도 불구하고 선택되는 문제 (id의 원 의미 생각)
      // var count = 0;
      // function crossClick() {
      //   count++;
      //   var a = document.getElementById("cp1");
      //   var b = document.getElementById("cp2");
      //   var current = document.getElementsByClassName("active");
      //   if (count % 2 == 1) {
      //     current.className = current.className.replace(" active", "");
      //     this.className += " active";
      //     b.parentNode.insertBefore(a, b.nextSibling);
      //     return false;
      //   } else {
      //     current.className = current.className.replace(" active", "");
      //     this.className += " active";
      //     b.parentNode.insertBefore(a, b);
      //   }
      // }
      
        // $("#defaultShow > #cp1").load("../templates/data_test.html");
        // $("#horizonShow > #cp1").load("../templates/data_test.html");
        //$("#fullShow > #cp1").replaceWith("");