Search

'Layer'에 해당되는 글 1건

  1. 2009.12.16 [jQuery] jQuery를 이용한 팝업. div, layer

[jQuery] jQuery를 이용한 팝업. div, layer

프로그래밍/Web 2009. 12. 16. 10:20 Posted by galad
출처: http://whdrnr01.textcube.com/7?t=c&i=0

jQuery를 이용해서, div의 설정 변경을 통한 레이어 팝업.
ajax랑 함께 쓰면, ajax를 이용해서 데이터를 얻어온 후, div의 안에 원하는 형태로 데이터를 넣고 나서 보여주는 형식이 될 듯.

소스출처: http://yensdesign.com/tutorials/popupjquery/

/**
 * jQuery를 이용한 초기 설정
 */
$(document).ready(function() {
    // 마우스 오버 시 배경색 반전
    $(".catLabel1").hover(
        function() { // hover 시
            $(this).css({"background-color":"yellow", "font-weight":"bolder" });
        },
        function() { // out 시
            $(this).css({"background-color":"white", "font-weight":"normal" });
        }
    );

    $(".catLabel2").hover(
            function() { // hover 시
                $(this).css({"background-color":"yellow", "font-weight":"bolder" });
            },
            function() { // out 시
                $(this).css({"background-color":"white", "font-weight":"normal" });
            }
        );
   
    // 표준분류 선택 시 전시 카테고리 목록을 표시한다.
    $(".catLabel1").click(showAlert);
    $(".catLabel2").click(ajaxGetDpCatList);
   
    //CLOSING POPUP
    //Click the x event!
    /*$("#popupContactClose").click(function(){
        disablePopup();
    });*/
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });
});

/**
 * 표준 분류의 대분류 선택 시 경고 메시지
 */
function showAlert() {
    alert("표준 카테고리의 중분류를 선택해 주세요.");
}

/**
 * ajax로 전시 카테고리 목록 얻어오기
 */
function ajaxGetDpCatList() {
    //alert("ajax로 전체 전시 카테고리 정보 얻기");
    //alert($(this).attr("title"));
   
    var selectedCatId = $(this).attr("title");
    $("#selectedCatId").val(selectedCatId);
    //alert($("#selectedCatId").val());
   
    $.ajax({
        url: '${pageContext.request.contextPath}/categoryMapping/getDpCatList.omp',
        type: 'POST',
        dataType: 'json',
        timeout: 5000,
        error: function(){
            alert('전시 카테고리 정보를 얻는 중에 오류가 발생했습니다.');
        },
        success: function(data){
            //alert(data);
            //alert(data.dpCatList[0].key + " " + data.dpCatList[0].value);
            showDpCatList(data);
        }
    });
}

/**
 * 전시 카테고리 목록 표시
 */
function showDpCatList(data) {
    //alert($("#selectedCatId").val());
    //alert(data.dpCatList.length);

    var dpCatListPopup = document.getElementById("dpCatListPopup");

    // dpCatListPopup 의 내용을 비움. 안하면 계속 늘어남
    deleteNodes(dpCatListPopup, "span");
    deleteNodes(dpCatListPopup, "br");

    // 전시 카테고리 표시용 목록 만들기
    var list = data.dpCatList;
    for(var i = 0; i < list.length; i++) {
        var key = list[i].key;
        var label = list[i].value;

        var el = document.createElement("span");
        el.setAttribute("title", key);
        el.setAttribute("class", "dpCatLabel");
        //el.setAttribute("onclick", "alert('TEST');"); // DOESN'T WORK. onclick is not attribute.
        el.onclick=function(){alert("TEST");};
        var txt = document.createTextNode(label);
        el.appendChild(txt);

        dpCatListPopup.appendChild(el);
        dpCatListPopup.appendChild(document.createElement("br"));
    }

    setPopupPosition();
    loadPopup();
}

function deleteNodes(parentNode, tag) {
    var nodes = parentNode.getElementsByTagName(tag);
    var length = nodes.length;
   
    // 이건 nodes가 실시간으로 줄어들면서 length 자체가 줄어든다.
    // 따라서 아래의 for문에서 기존 nodes의 갯수만큼 루핑하면서 0번만 계속 지움.
    // i번을 삭제하면 stack overflow 남
    /*for(var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        parentNode.removeChild(node);
    }*/
   
    for(var i = 0; i < length; i++) {
        var node = nodes[0];
        parentNode.removeChild(node);
    }
}

//0 means disabled; 1 means enabled;
var popupStatus = 0;

/**
 * set popup position
 */
function setPopupPosition(){
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.scrollHeight; //clientHeight;
    var popupHeight = $("#dpCatListPopup").height();
    var popupWidth = $("#dpCatListPopup").width();
   
    //centering
    $("#dpCatListPopup").css({
        "position": "absolute",
        "top": 0, //windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });

    //only need force for IE6
    $("#backgroundPopup").css({
        "height": windowHeight
    });
   
}

function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#dpCatListPopup").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#dpCatListPopup").fadeOut("slow");
       
        popupStatus = 0;
    }
}

setPopupPosition() 으로 위치 설정.
loadPopup() 으로 보이기
disablePopup() 으로 숨기기

backgroundPopup 랑 dpCatListPopup 는 div의 id.
저작자표시 비영리 동일조건

'프로그래밍 > Web' 카테고리의 다른 글

[jQuery] jQuery를 이용한 ajax  (0) 2009.12.16
[javascript] HTML DOM 지우기  (0) 2009.12.16
[json] json 사용법  (0) 2009.12.15
[html] html 특수기호  (3) 2009.09.08
[servlet] servlet  (0) 2009.09.04
 

티스토리툴바