달력

102022  이전 다음

  •  
  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  

'Navigation'에 해당되는 글 1건

  1. 2007.11.06 네비게이션 스크립트 코드2 - JAVASCRIPT
기존 코드를 약간 손을 봤다.
기존 코드에 스타일 부분을 스크립트 내부에 넣었다.

<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript">
<!--

var g_strTotalPage = 200;
var g_currentPage = 1;
var g_viewpageCount = 10;
var g_bType = false; // ture is IE or false is Other

// 화면에 표시할 prev 와 next 문구
var g_prevView = "◀PREV";
var g_nextView = "NEXT▶";

// 이번트 발생시 리턴하는 값
var g_callFuntion = "viewContent";

// 스타일 관련 셋팅 부분 CSS 로 적용해도 된다.
var g_spanStyle         = "font-size:11px; font-family:굴림,바탕,Georgia,Verdana,Lucida,sans-serif; margin-left:3px; color:#A7AFB1;cursor:normal;text-decoration:none;font-weight:normal;";
var g_spanSelectStyle     = "font-size:11px; font-family:굴림,바탕,Georgia,Verdana,Lucida,sans-serif; margin-left:3px; color:#F2773A;cursor:normal;text-decoration:none;font-weight:bold;";
var g_spanOverStyle     = "font-size:11px; font-family:굴림,바탕,Georgia,Verdana,Lucida,sans-serif; margin-left:3px; color:#F2773A;cursor:pointer;text-decoration:underline;;font-weight:normal;";

function startNav(_startPage)
{
    var bInfo = navigator.userAgent;
    if(bInfo.indexOf("MSIE") > -1){
        g_bType = true;
    }
  
    Setnav(g_currentPage);
}

/******************************************************************
* 페이동 이동 유틸을 만든다.
******************************************************************/
function Setnav(_currentPage)
{
    if(g_bType){
        while(mainNav.children.length != 0){
            var oChild=mainNav.children(0);  
            oChild.detachEvent("onclick", MovePage);
            mainNav.removeChild(oChild);
        }
    }else{
        while(mainNav.hasChildNodes()){
            var oChild = mainNav.firstChild;
            oChild.removeEventListener("click" , MovePage, false)
            mainNav.removeChild(oChild);
        }
    }
        
    var prepage = parseInt((_currentPage - 1)/g_viewpageCount) * g_viewpageCount;
    var nextpage = ((parseInt((_currentPage - 1)/g_viewpageCount)) * g_viewpageCount) + g_viewpageCount + 1;

    if(_currentPage > g_viewpageCount){
        var oSpan = document.createElement("SPAN");
        oSpan.style.cssText = g_spanStyle;
        if(g_bType){
            oSpan.attachEvent("onclick", MovePage);
            oSpan.attachEvent("onmouseover", MouseOver);
            oSpan.attachEvent("onmouseout", MouseOut);
        }else{
            oSpan.addEventListener("click", MovePage, false);
            oSpan.addEventListener("mouseover", MouseOver, false);
            oSpan.addEventListener("mouseout", MouseOut, false);
        }
        oSpan.id = "page" + prepage;
        oSpan.innerHTML = g_prevView;
        mainNav.appendChild(oSpan);
      
        var oSpan = document.createElement("SPAN");
        oSpan.style.cssText = g_spanStyle;
        oSpan.innerHTML = "|";
        mainNav.appendChild(oSpan);
    }
   
    for(var i=(1 + prepage);i<(g_viewpageCount + 1 + prepage);i++){
        var oSpan = document.createElement("SPAN");
        if(_currentPage == i){
            oSpan.style.cssText = g_spanSelectStyle;
            oSpan.innerHTML = i;
            mainNav.appendChild(oSpan);
        }else{
            oSpan.style.cssText = g_spanStyle;
            if(g_bType){
                oSpan.attachEvent("onclick", MovePage);
                oSpan.attachEvent("onmouseover", MouseOver);
                oSpan.attachEvent("onmouseout", MouseOut);
            }else{
                oSpan.addEventListener("click", MovePage, false);
                oSpan.addEventListener("mouseover", MouseOver, false);
                   oSpan.addEventListener("mouseout", MouseOut, false);
            }
            oSpan.id = "page" + i;
            oSpan.innerHTML = i;
            mainNav.appendChild(oSpan);
        }
      
        if(i == g_strTotalPage){
             break;
        }
      
        var oSpan = document.createElement("SPAN");
        oSpan.style.cssText = g_spanStyle;
        oSpan.innerHTML = "|";
        mainNav.appendChild(oSpan);
    }
  
    if(nextpage <= g_strTotalPage){
        var oSpan = document.createElement("SPAN");
        oSpan.style.cssText = g_spanStyle;
        if(g_bType){
            oSpan.attachEvent("onclick", MovePage);
            oSpan.attachEvent("onmouseover", MouseOver);
            oSpan.attachEvent("onmouseout", MouseOut);
        }else{
            oSpan.addEventListener("click", MovePage, false);
            oSpan.addEventListener("mouseover", MouseOver, false);
            oSpan.addEventListener("mouseout", MouseOut, false);
        }
        oSpan.id = "page" + nextpage;
        oSpan.innerHTML = g_nextView;
        mainNav.appendChild(oSpan);
    }
  
    if(_currentPage != g_currentPage){
        // 특정 메서드를 콜해서 페이지 전환을 합니다.
        g_currentPage = _currentPage;
    }
  
    eval(g_callFuntion + "(" + g_currentPage + ")");
   
}

function MovePage()
{
    if(g_bType){
        var page = event.srcElement.id;
        var movepage = page.substring(4,page.length);
    }else{
        var page = this.getAttribute("id");
        var movepage = page.substring(4,page.length);
    }
  
    Setnav(movepage);
      
}

function MouseOver()
{
    if(g_bType){
        event.srcElement.style.cssText = g_spanOverStyle;
    }else{
        this.style.cssText = g_spanOverStyle;
    }
}

function MouseOut()
{
    if(g_bType){
        event.srcElement.style.cssText = g_spanStyle;
    }else{
        this.style.cssText = g_spanStyle;
    }
}


function viewContent(_page)
{
    // 이곳에서 페이지에 의해서 내용을 표시 한다.
    viewPageDisplay.innerHTML = _page + "내용출력";
}

-->
</script>

</head>
<body>
<div id="viewPageDisplay">
</div>
<div id="mainNav">
<script type="text/javascript">
startNav(g_currentPage);
</script>
</div>
</body>
</html>

'프로그램메모 > JAVASCRIPT' 카테고리의 다른 글

네비게이션 스크립트 코드 - JAVASCRIPT  (0) 2007.06.21
Posted by 곰아리

댓글을 달아 주세요