달력

022012  이전 다음

  •  
  •  
  •  
  • 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
  •  
  •  
  •  

'프로그램메모'에 해당되는 글 2건

  1. 2007/11/06 네비게이션 스크립트 코드2 - JAVASCRIPT
  2. 2007/06/21 네비게이션 스크립트 코드 - JAVASCRIPT

네비게이션 스크립트 코드2 - JAVASCRIPT

프로그램메모 2007/11/06 15:52
기존 코드를 약간 손을 봤다.
기존 코드에 스타일 부분을 스크립트 내부에 넣었다.

<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>

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

네비게이션 스크립트 코드2 - JAVASCRIPT  (0) 2007/11/06
네비게이션 스크립트 코드 - JAVASCRIPT  (0) 2007/06/21
Posted by 곰아리
TAG JavaScript, Navigation, 네비게이션
트랙백0 | 댓글0

네비게이션 스크립트 코드 - JAVASCRIPT

프로그램메모 2007/06/21 13:53
페이지의 리프래쉬 없이 네비게이션을 쓸일이 있어서 만들었음.
스타이나 그런 부분은 사이트에 맞게 수정을 하면 됩니다.

원본은 http://bear.sage.kr/tt/bear/83 이걸 수정하였음.

테스트는 IE, Firefox 두가지의 브라우저에서 하였음.

<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">
<!--
#mainNav
{
    width                  : 100%;
    border                : 1px solid #D6D6D6;
    height                  : 45px;
    BACKGROUND-COLOR     : #F2F2F2;
    border-bottom-width     : 2px;
    border-left-width     : 0px;
    border-right-width     : 0px;
    margin-bottom         : 15px;
    text-align              : center;
    PADDING-top              : 12px;
}

SPAN
{
    font-size                : 12px;
    font-family          : 굴림,바탕,Georgia,Verdana,Lucida,sans-serif;
    border                  : none;
    margin-left          : 2px;
    color                  : #000000;
}

.navselect
{
    color                  : #F2773A;
}

.navshow
{
    cursor                  : pointer;
}

-->
</style>
<script type="text/javascript">
<!--
/****************************************************************/
/*                              http://lovesage.tistory.com                         */
/*                                      lovesage@gmail.com                         */
/*                                                                 - 곰아리 -             */
/*                                                그냥 알아서 쓰시면 됩니다.       */
/*                                                출처만 밝혀 주시면 됩니다.       */
/****************************************************************/
var g_strTotalPage = 200;
var g_currentPage = 1;
var g_viewpageCount = 5;
var g_bType = false; // ture is IE or false is Other

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");
        if(g_bType){
            oSpan.attachEvent("onclick", MovePage);
        }else{
            oSpan.addEventListener("click", MovePage, false);
        }
        oSpan.id = "page" + prepage;
        oSpan.className = "navshow";
        oSpan.innerHTML = "&lt;&lt;";
        mainNav.appendChild(oSpan);
       
        var oSpan = document.createElement("SPAN");
        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.className = "navselect";
            oSpan.innerHTML = i;
            mainNav.appendChild(oSpan);
        }else{
            if(g_bType){
                oSpan.attachEvent("onclick", MovePage);
            }else{
                oSpan.addEventListener("click", MovePage, false);
            }
            oSpan.id = "page" + i;
            oSpan.className = "navshow";
            oSpan.innerHTML = i;
            mainNav.appendChild(oSpan);
        }
       
        if(i == g_strTotalPage){
             break;
        }
       
        var oSpan = document.createElement("SPAN");
        oSpan.innerHTML = "|";
        mainNav.appendChild(oSpan);
    }
   
    if(nextpage <= g_strTotalPage){
        var oSpan = document.createElement("SPAN");
        if(g_bType){
            oSpan.attachEvent("onclick", MovePage);
        }else{
            oSpan.addEventListener("click", MovePage, false);
        }
        oSpan.id = "page" + nextpage;
        oSpan.className = "navshow";
        oSpan.innerHTML = "&gt;&gt;";
        mainNav.appendChild(oSpan);
    }
   
    if(_currentPage != g_currentPage){
        // 특정 메서드를 콜해서 페이지 전환을 합니다.
        g_currentPage = _currentPage;
    }
   
    viewContent(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 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>

컴퍼넌트 형태로 나중에 다시 변경할 예정임.



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

네비게이션 스크립트 코드2 - JAVASCRIPT  (0) 2007/11/06
네비게이션 스크립트 코드 - JAVASCRIPT  (0) 2007/06/21
Posted by 곰아리
TAG JavaScript, 네비게이션, 비동기
트랙백0 | 댓글0