Mobile Web에서의 스와이프를 위한 SwipeView 활용

티스토리 뷰

프로그래밍/Web

Mobile Web에서의 스와이프를 위한 SwipeView 활용

루키~ 2012. 2. 1. 08:26

포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다.
협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요.

이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다.
오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요..

http://cubiq.org/swipeview
cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다.

먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠.

이미지 갤러리에 대한 데모 페이지는 다음과 같습니다.
http://cubiq.org/dropbox/SwipeView/demo/gallery/

이미지 이외의 컨텐츠를 포함할 수도 있다고 하는데요.
텍스트로 구성된 컨텐츠에 대한 예제는 다음 데모 페이지를 살펴보면 됩니다.
http://cubiq.org/dropbox/SwipeView/demo/ereader/

제공하는 소스를 다운로드해서 살펴보면 src 폴더에는 swipeview.js 파일만 하나 있습니다.
이 파일을 기존 HTML에 추가하고 스와이프가 필요한 컨텐츠를 적용하면 스와이프가 이루어지게 됩니다.
demo 폴더를 살펴보면 위 예제 페이지들의 소스가 포함되어 있어 쉽게 적용할 수 있을 겁니다.
해당 사이트에서도 소스를 받을 수 있지만 혹시 몰라서 여기에도 업로드 해봅니다.

cubiq-SwipeView-94b3b3d.zip

iOS 4.x 이상, 안드로이드 2.3 이상에서 동작하며, 일반 웹브라우저도 webkit 기반에서는 동작한다고 되어 있습니다.
실제 적용해 보니 아이폰에서는 정말 부드럽게 동작하지만 안드로이드에서는 약간 delay가 있어 보였습니다.
그래도 다른 소스보다는 무난히 동작하는 것 같네요~

또한 모바일 환경을 고려하여 Silder와 Viewport로 나누어 Viewport는 한 화면만 보여주고
Slider에 앞뒤를 포함해 3개의 페이지만을 보관하는 형태로 구성되어 있다고 합니다. (빠르게 스와이프하는 것도 고려해 설계 되어 있다고 하네요)
메모리의 제한을 고려한 설계로 모바일 개발에서는 많이 사용하는 형태이기도 합니다.

소스들을 살펴보니 swipeview.js 파일을 포함하고 난 후,
new SwipeView()를 통해 swipe 객체를 생성하고
해당 객체에 스와이프할 데이터들을 로드하고 난 후
onFlip 메소드를 통해서 스와이프를 처리하게 됩니다.

해당 소스를 살펴보고 직접 적용해 보면 쉽게 이해가 될 것 같습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>SwipeView</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../../src/swipeview.js"></script>
</head>

<body>
	<h1>Three Laws of Robotics</h1>
	<div id="wrapper"></div>

<p>The Three Laws of Robotics (often shortened to The Three Laws or Three Laws) are a set of rules devised by the science fiction author Isaac Asimov and later added to. The rules are introduced in his 1942 short story "Runaround", although they were foreshadowed in a few earlier stories.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

carousel = new SwipeView('#wrapper', {
	numberOfPages: slides.length,
	hastyPageFlip: true
});

// Load initial data
for (i=0; i<3; i++) {
	page = i==0 ? slides.length-1 : i-1;

el = document.createElement('span');
	el.innerHTML = slides[page];
	carousel.masterPages[i].appendChild(el)
}

carousel.onFlip(function () {
	var el,
		upcoming,
		i;

for (i=0; i<3; i++) {
		upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;

if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
			el = carousel.masterPages[i].querySelector('span');
			el.innerHTML = slides[upcoming];
		}
	}
});

</script>

</body>
</html>

'프로그래밍 > Web' 카테고리의 다른 글

웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0)	2012.03.07
N-Screen을 지원하는 미디어 쿼리에 대하여 (0)	2012.02.15
CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0)	2012.01.20
GIS 지도 좌표계에 대한 정리~ (0)	2011.12.14
모바일 웹 사이트 제작을 위한 표준~ (0)	2011.11.28

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
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

글 보관함

루키의 보석함

티스토리 뷰

Mobile Web에서의 스와이프를 위한 SwipeView 활용

'프로그래밍 > Web' 카테고리의 다른 글

티스토리툴바