Carousel

모바일 2011. 7. 5. 17:03
출처 : http://blog.iolo.pe.kr/491


웹에서 아이폰스러운 Carousel 구현하기


페 이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.

이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.

백문이불여일견! 코드를 살펴보자!
$(document).ready(function() {
var iscroll = new iScroll('wrapper', {
snap: 'li',
momentum: false,
hScrollbar: false,
vScrollbar: false,
onScrollEnd: function() {
$('#indicator li').each(function(i, node) {
if(i === iscroll.currPageX) {
$(node).addClass('active');
} else {
$(node).removeClass('active');
}
});
}
});
iscroll.scrollToPage(0);
});

#wrapper {
width:200px;/*=page_width*/
height:200px;/*=page_height*/
margin:0;
padding:0;
overflow:none;
background-color:#fff;
}

#scroller {
position:relative;
top:0;
left:0;
width:600px;/*=number_of_page*page_width*/
height:200px;
float:left;
}

#scroller ul {
list-style:none;
position:relative;
display:block;
margin:0;
padding:0;
top:0;
left:0;
width:100%;
height:100%;
}

#scroller li {
display:block;
float:left;
width:200px;
height:200px;
}
/* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */

 <div id="wrapper">
   <div id="scroller">
     <ul>
       <li><div>1st page!</div></li>
       <li><div>2nd page!</div></li>
       <li><div>3rd page!</div></li>
     </ul>
   </div>
 </div>
 <div id="indicator">
   <ul>
     <li><span>1</span></li>
     <li><span>2</span></li>
     <li><span>3</span></li>
   </ul>
 </div>


백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)
http://jsbin.com/epeci5


이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.

모 바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.

참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html



 /************************************************************************/

http://cubiq.org/iscroll-4


hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.
hScrollbar, set this to false to prevent the horizontal scrollbar to appear.
vScrollbar, same as above for vertical scrollbar.
fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
fadeScrollbar, set to false to have the scrollbars just disappear without the fade effect.
hideScrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true.
bounce, enable/disable bouncing outside of the boundaries. Default: true.
momentum, enable/disable inertia. Default: true. Useful if you want to save resources.
lockDirection, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false.


/*****************************************/

JQuery 모바일 같은데 제대로 안됐다. 시간날때 다시 시도.


https://github.com/blackdynamo/jQuery-Mobile-Carousel
 
: