티스토리 뷰

카테고리 없음

특정 갯수의 리스트만 출력하고 버튼 클릭시 이전 또는 다음 목록 보여주기 스크립트

나를찾는아이 2007. 11. 1. 13:08
728x90
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>리스트토글</title>
<script type="text/javascript">
/* 초기화 initView(ul엘리먼트의 id, 최초 보여지는 li 엘리먼트 갯수, display 값) */
function initView(el_id, view_item_count, style)
{
    var menu = document.getElementById(el_id);
    var menu_list = menu.getElementsByTagName('li');
    var menu_count = menu_list.length;
    style = (typeof(style) != 'undefined') ? style : 'block';

    for(var i=0;i<menu_count;i++){
        if(i<view_item_count) menu_list[i].style.display = style;
        else menu_list[i].style.display = 'none';
    }
}

/* 목록 이동 moveList(이동시킬방향 prev 또는 next, 이동시킬 ul 엘리먼트의 id, 보여질 목록 갯수, 이동시킬 갯수, display 값) */
function moveList(direction, el_id, view_item_count, scroll_count, style)
{
    var menu = document.getElementById(el_id);
    var menu_list = menu.getElementsByTagName('li');
    var menu_count = menu_list.length;
    var start_no = 0;

    style = (typeof(style) != 'undefined') ? style : 'block';

    // 현재 보여지고 있는 엘리먼트의 시작을 확인
    for(var i=0;i<menu_count;i++){
        if(menu_list[i].style.display == style){
            start_no = i;
            break;
        }
    }
   
    // 방향에 따른 이동
    if(direction == 'next'){
        if(menu_list[menu_count-1].style.display == style) return false;
        else{
            for(var i=0;i<menu_count;i++){
                if(i>=start_no + scroll_count && i<start_no + scroll_count + view_item_count){
                    menu_list[i].style.display = style;
                }else{
                    menu_list[i].style.display = 'none';
                }
            }
        }
    }else if(direction == 'prev'){
        if(menu_list[0].style.display == style) return false;
        else{
            for(var i=0;i<menu_count;i++){
                if(i>=start_no - scroll_count && i<start_no - scroll_count + view_item_count){
                    menu_list[i].style.display = style;
                }else{
                    menu_list[i].style.display = 'none';
                }
            }
        }
    }
}
</script>
<style type="text/css">
ul#best1 li {display:inline;}
</style>
</head>
<body>

<ul id="best">
    <li>아이템1</li>
    <li>아이템2</li>
    <li>아이템3</li>
    <li>아이템4</li>
    <li>아이템5</li>
    <li>아이템6</li>
    <li>아이템7</li>
    <li>아이템8</li>
    <li>아이템9</li>
    <li>아이템10</li>
    <li>아이템11</li>
    <li>아이템12</li>
    <li>아이템13</li>
    <li>아이템14</li>
    <li>아이템15</li>
    <li>아이템16</li>
    <li>아이템17</li>
    <li>아이템18</li>
    <li>아이템19</li>
    <li>아이템20</li>
    <li>아이템21</li>
</ul>
<script type="text/javascript">
initView('best', 5);
</script>

<!-- 리스트를 컨트롤 할 엘리먼트 -->
<a href="#" onclick="moveList('prev', 'best', 5, 1);return false;">이전</a>
<a href="#" onclick="moveList('next', 'best', 5, 1);return false;">다음</a>

<ul id="best1">
    <li>아이템1</li>
    <li>아이템2</li>
    <li>아이템3</li>
    <li>아이템4</li>
    <li>아이템5</li>
    <li>아이템6</li>
    <li>아이템7</li>
    <li>아이템8</li>
    <li>아이템9</li>
    <li>아이템10</li>
    <li>아이템11</li>
    <li>아이템12</li>
    <li>아이템13</li>
    <li>아이템14</li>
    <li>아이템15</li>
    <li>아이템16</li>
    <li>아이템17</li>
    <li>아이템18</li>
    <li>아이템19</li>
    <li>아이템20</li>
    <li>아이템21</li>
</ul>
<script type="text/javascript">
initView('best1', 5, 'inline');
</script>

<!-- 리스트를 컨트롤 할 엘리먼트 -->
<a href="#" onclick="moveList('prev', 'best1', 5, 5, 'inline');return false;">이전</a>
<a href="#" onclick="moveList('next', 'best1', 5, 5, 'inline');return false;">다음</a>

</body>
</html>




사용법



초기화함수
initView('ul 엘리먼트 id', 최초출력할갯수, [출력방식 block or inline 등등 기본값 block])

모든 리스트를 출력하시고

위 함수로 초기화해주시면 출력할 갯수만큼만 보여지고 나머지는 display:none 상태가 됩니다.

선택적 인자로 세번째 인자에 출력방식값을 넣어주시면

li엘리먼트가 해당 방식으로 보여지게 됩니다. (기본값 block)



이동함수
moveList('방향 prev 또는 next', '컨트롤할 ul엘리먼트의 id', 보여줄갯수, 토글할갯수, [출력방식 기본값 block]);

이동함수를 다음버튼과 이전 버튼에 예제와 같이 onclick이벤트에 등록하시면 됩니다.



덧. 제가 올리는 모든 스크립트는 항상 javascript 표준을 준수하고 크로스브라우징을 고려합니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함