Skip to content
This repository has been archived by the owner on Jan 8, 2018. It is now read-only.

jindo.m.Flicking

Jump to bottom
Son Chan Uk edited this page Dec 26, 2016 · 2 revisions

eg.Flicking

JMC에서 제공했던 jindo.m.Flicking/SlideFlicking/PreviewFlicking은 egjs의 eg.Flicking으로 통합되었다.

상세한 가이드는 egjs.Flicking 공식 홈페이지를 참조하기 바란다. 이 페이지에서는 JMC의 플리킹 계열 컴포넌트에 익숙한 개발자를 대상으로, eg.Flicking으로 개발시 고려해야할 사항에 대해 설명하는 페이지다.

개발하기

eg.Flicking의 개발은 JMC와 마찬가지로, 마크업을 작성하고, 해당 마크업에 인스턴스를 생성하는 방식으로 개발한다.

1. 마크업 생성

플리킹을 적용할 마크업을 생성한다. eg.Flicking은 다음과 같이 실제 화면에 보여지는 view영역과 내부에 존재하는 패널영역으로 나뉜다. 기본적인 마크업은 다음과 같다.

<div id="mflick"> <!-- View 영역 -->
    <div> <!-- 패널 -->
        <p>Layer 0</p>
    </div>
    <div> <!-- 패널 -->
        <p>Layer 1</p>
    </div>
    <div> <!-- 패널 -->
        <p>Layer 2</p>
    </div>
</div>

2. 인스턴스 생성

첫번째 파라미터로, view의 CSS선택자나 엘리먼트를 지정하고, 두번째 파라미터로 옵션을 지정한다.

var flicking = new eg.Flicking("#mflick", {
         circular : true,
         threshold : 50
     }).on({
         beforeRestore : function(e) { ... },
         flickStart : function(e) { ... }
     );

고려할 사항

마크업

eg.Flicking은 기존 JMC 플리킹에서 사용하기 불편한 부분을 많은 부분에서 개선하였다.

플리킹 마크업 구조 단순화

기존 JMC의 Flicking/SlideFlicking/CoverFlicking/CubeFlicking은 View와 컨테이너, 패널로 구성되었으며, PreviewFlicking일 경우에는 View와 base, 컨테이너, 패널로 마크업을 구성해야만 했다. eg.Flicking은 View와 패널로만 마크업을 구성한다.

순환 플리킹시 마크업 제약 개선

명시적으로 순환 형태의 Flicking은 최소 3개의 패널을 가지고 있어야하고, 순환 형태의 PreviewFlicking은 최소 5개의 패널을 가져야한다는 제약조건을 제거하였다. eg.Flicking은 플리킹의 개수가 부족할 경우, 내부적으로 패널을 동적으로 생성한다.

옵션

previewPadding

eg.Flicking에서는 PreviewFlicking 컴포넌트가 통합되면서 previewPadding 옵션이 추가되었다. 이전과 다음 패널을 출력하는 프리뷰 형태에 사용되는 padding 값으로서, 배열 형태로 지정시 좌측(상단), 우측(하단) 순서로 지정할수 있다.

inputType

eg.Flicking에서는 모바일 환경뿐만 아니라, PC환경에서도 효과적으로 사용할수 있는 inputType이라는 옵션이 추가되었다. "mouse", "touch"의 입력 타입을 결정할 수 있다.

이 옵션을 통해 플리킹 동작이 touch로만 동작하도록 지정할수 있다.

예를 들어 inputType: ["touch"]를 지정할 경우, touch 이벤트를 지원하지 않는 PC에서는 플리킹을 API에 의해서만 동작할 수 있고, 마우스로는 동작할수 없다.

삭제된 옵션

eg.Flicking은 사용성 향상을 위해 기존 JMC에서 제공했던 많은 옵션 상당수를 제거하였다.

bActivateOnload,bUseHighlight, bUseDiagonalTouch, bUseMomentum, bAutoResize, bUseTimingFunction, nZIndex, sContentClass, nTotalContents, nBounceDuration, bFitContentSize

이 중에서 주목해야할 것은 bAutoResize, nTotalContents 옵션이 제거된 것이다.

  • bAutoResize는 eg에서 제공하는 rotate 이벤트를 활용하여 eg.Flicking.prototype.resize()를 개발자가 제어하도록 옵션을 제거하였다.
$(window).on("rotate",function(e){
     flicking.resize();
});
  • 플리킹은 판의 이동만을 담당하고, 컨텐츠에 대한 관리(nTotalContents)는 개발자가 제어하도록 하였다.

이벤트

사용성 개선을 위해, JMC의 플리킹에서 사용하는 이벤트를 정리하였다.

삭제된 이벤트

플리킹과 직접 관련 없는 touch 관련 이벤트와 회전과 관련있는 rotate 이벤트가 제거 되었다.

beforeTouchStart, touchStart, beforeTouchMove, touchMove, beforeTouchEnd, touchEnd, rotate

변경된 이벤트

  • beforeFlicking은 beforeFlickStart로 변경됨
  • flicking(afterFlicking)은 flickEnd로 변경됨

추가된 이벤트

플리킹 동작이 일어나는 매 순간을 확인하는 flick 이벤트가 추가되었다.

eg.Flicking에 통합되지 않은 JMC의 Flicking 계열 컴포넌트들은 어떻게 구현하나요?

eg.Flicking에 통합되지 않은 컴포넌트는 CoverFlicking과 CubeFlicking이 있다. 두 컴포넌트 모두 eg.MovableCoord를 이용하면 보다 쉽게 해당 기능을 구현할수 있다.

상세한 내역은 egjs의 eg.MovableCoord를 참조하기 바란다.

jindo.m.CoverFlicking

판을 덮는 Cover 형태의 플리킹이 가능한 컴포넌트이다. cover

해당 컴포넌트는 eg.MovableCoord를 이용하면 보다 쉽게 작성할수 있다.

jindo.m.CubeFlicking

큐브 형태의 플리킹이 가능한 컴포넌트이다. cube

Clone this wiki locally