제이쿼리를 이용한 슬라이드 팝업

브라우저 창 왼쪽에 레이어 팝업

아래의 형태로 왼쪽 버튼을 눌렀을 경우, 페이지가 오른쪽으로 슬라이드 형식으로 펼쳤다 접었다를 한다.

 

슬라이드는 제이쿼리  animate 를 이용해서 marginLeft  값만큼 노출된다.

Ajax를 이용하여 DB에 저장된  값을 불러들여, 팝업을 구성하도록 하엿다.

 DB에는 width, height, link, 팝업노출 순서, 시작날짜, 종료날짜로 구성되어 있으며,

시작날짜와 종료 날짜 사이의 기간이 되면 자동으로 팝업이 노출되도록 설정하였다.

 

아래 소스를  include하여 각 페이지마다 상시로 보이도록 하였다.

 

 

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<style>
#navigation1 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 100px;
    left: 0px;
    list-style: none;
    z-index:9999;
  
}
#navigation1 ul{
   float:left;
}

#navigation1 li{
   float:left;
  
}

#navigation1 li a {
    display: block;
   marginLeft:0px;
    background-repeat:no-repeat;
    background-position:center center;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
   
}

 

#navigation2 {
 clear:both;
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 0px;
    list-style: none;
    z-index:9999;
    
}
#navigation2 ul{
flot:left;

}

#navigation2 li{
float:left;

 
}

#navigation2 li a {
    
   marginLeft:0px;
    background-repeat:no-repeat;
    background-position:center center;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
   
}

 

</style>

<script type="text/javascript">

function fn_openPop(no,left){
 var plmOrder = no;
 var marginLeft =left+"px";
 
 
 if(plmOrder == '01'){
   var state =$('.banner1 a').css("marginLeft");
   
    if(state==marginLeft){
     $('.banner1 a').stop().animate({'marginLeft':'0px'},500); 
    }else{
     $('.banner1 a').stop().animate({'marginLeft':marginLeft},500); 
    
    }
 }else{
   var state =$('.banner2 a').css("marginLeft");
    
    if(state==marginLeft){
     $('.banner2 a').stop().animate({'marginLeft':'0px'},500); 
    }else{
     $('.banner2 a').stop().animate({'marginLeft':marginLeft},500); 
    
    }
  
 }
}

 

$(document).ready(function(){
 fn_popupInfo();
});

function fn_popupInfo(){
 var ul1Html = "";
 var ul2Html = "";
 
 $.ajax({
  type: "POST",
  url: "/popup/popupInfoAjax.do",
        dataType : 'json', 
        success : function(data){
        
         $.each(data.popupList, function(i,item){
          
          var plmOrder = item.plmOrder;
          var width = parseInt(item.width);
          var ulSize = parseInt(50+width);
          var marginLeft = eval(-width);
          var height = parseInt(item.height)+"px";
          var plmLink = item.plmLink
          
         
          if(plmOrder=='01'){
           $("#navigation1").css('height',height);
           ul1Html +="<ul>";
           ul1Html +="<li class='banner1'><a href=\"http://"+plmLink.replace(/\n/g, 'http://')+"\" target='_blank'>";
           ul1Html +="<img src='/images/main/images/visual/visual_banner_a.jpg'/></a></li>";
           ul1Html +="<li class='bannerBtn1'><a href=\"javascript:fn_openPop('"+plmOrder+"','"+marginLeft+"')\"><img src='/images/main/images/contents/btn_popup.gif'/></a></li>";
           ul1Html +="</ul>";
           
           $("#navigation1").empty();
                 $("#navigation1").html(ul1Html);
           
          }else if(plmOrder=='02'){
           
           var state=parseInt($("#navigation1").height());
           var top = parseInt(state +20+100)+"px";
           
           $("#navigation2").css('top',top);
           
           ul2Html +="<ul>";
           ul2Html +="<li class='banner2'><a href=\"http://"+plmLink.replace(/\n/g, 'http://')+"\" target='_blank'>";
           ul2Html +="<img src='/images/main/images/contents/"+item.imgName+".jpg'/></a></li>";
           ul2Html +="<li class='bannerBtn2'><a href=\"javascript:fn_openPop('"+plmOrder+"','"+marginLeft+"')\"><img src='/images/main/images/contents/btn_popup.gif'/></a></li>";
           ul2Html +="</ul>";           
           
           $("#navigation2").empty();
                 $("#navigation2").html(ul2Html);
          }
          
         });
     }
 
 
 });
}
</script>

<div id="navigation1">
     
   </div>

 

<div id="navigation2">
     
  </div>