티스토리 뷰
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
- php
- 벤처
- 아이폰
- 구글
- 트위터
- AWS
- 창업
- 앱
- 네이버
- 게임
- 애플
- 소프트웨어
- 앱스토어
- 웹표준
- Apple
- 대학생
- 아이디어
- 스마트폰
- 공모전
- 경진대회
- 자바스크립트
- 안드로이드
- 어플리케이션
- android
- CSS
- iPhone
- JavaScript
- 모바일
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함