Class: Flicking | egjs::Flicking

new eg.Flicking(element, options)

Create an instance of the eg.Flicking class. Create a flicking UI that sweeps a side-by-side panel with mouse move or touch move input and moves to the next or previous panel.

eg.Flicking 클래스의 인스턴스를 생성한다. 나란히 배치한 패널을 마우스 이동(move) 혹은 터치 이동(move) 입력을 받아 쓸어 넘겨 다음 패널이나 이전 패널로 이동하는 UI를 만든다.

element

Type: HTMLElement | String

A base element for the eg.Flicking module. When specifying a value as a String type, you must specify a css selector string to select the element.

eg.Flicking 모듈을 사용할 기준 요소. String타입으로 값 지정시 요소를 선택하기 위한 css 선택자 문자열을 지정해야 한다.
options optional

Type: Object

The option object of the eg.Flicking module

eg.Flicking 모듈의 옵션 객체
- hwAccelerable (default: true) optional
  
  Type: Boolean
  
  Force hardware compositing.
  
  하드웨어 가속 사용 여부.
- prefix (default: "eg-flick") optional
  
  Type: String
  
  A prefix for class names of the panel elements.
  
  패널 요소의 클래스 이름 접두사.
- deceleration (default: 0.0006) optional
  
  Type: Number
  
  Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time.
  
  사용자의 동작으로 가속도가 적용된 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.
- horizontal (default: true) optional
  
  Type: Boolean
  
  Direction of the panel movement. (true: horizontal, false: vertical)
  
  패널 이동 방향. (true 가로방향, false 세로방향)
- circular (default: false) optional
  
  Type: Boolean
  
  Whether to let the first panel flick right to the end panel (let the left panel flick from the end panel to move to the first panel). (The term 'circulation')
  
  첫 패널에서 우 액션 입력하여 끝 패널로 이동하게 할지와 끝 패널에서 우 액션 입력하여 첫 패널로 이동할하게 할지 여부. (통칭 '순환')
- previewPadding (default: [0,0]) optional
  
  Type: Number | String | Array
  
  The preview size value(if no unit is given, defaults to px) for the previous or next panel.
  - If the direction is set to "horizontal", the preview section will be displayed on the left and right of the panel.
  - If the direction is set to "vertical", it will be displayed on the top and bottom of the panel.
  
  이전 패널과 다음 패널을 미리 보는 영역의 크기 값(단위가 지정되지 않는 경우, px로 지정).
  패널 이동 방향이 가로 방향이면 패널 좌우에, 세로 방향이면 패널 상하에 미리 보는 영역이 나타난다.
- bounce (default: [10,10]) optional
  
  Type: Number | Array
  
  The size value(unit: pixel) of the bounce area. If circular=false, the panel can be moved by this value when inputting a right gesture in the first panel or inputting a left gesture in the end panel. When the input is completed while moving, it returns to its original position.
  
  바운스 영역의 크기값(단위: 픽셀). circular=false인 경우, 첫 패널에서 우 액션 입력시, 끝 패널에서 좌 액션 입력시 이 값 만큼만 패널이 이동할 수 있고 이동한 상태에서 입력을 마치면 원래 자리로 돌아온다.
- threshold (default: 40) optional
  
  Type: Number
  
  Movement threshold to destination panel(unit: pixel). A panel element must be dragged beyond the threshold to move to the destination panel.
  
  목적 패널로의 이동 임계값 (단위: 픽셀). 패널 요소를 임계값 이상으로 끌어다 놓아야만이 목적 패널로 이동한다.
- duration (default: 100) optional
  
  Type: Number
  
  Duration of the panel movement. (unit: ms)
  
  패널 이동 애니메이션 진행 시간.(단위: ms)
- panelEffect (default: x => 1 - Math.pow(1 - x, 3)) optional
  
  Type: function
  
  The easing function to apply to a panel moving animation. The default function is easeOutCubic.
  
  패널 이동 애니메이션에 적용할 easing함수. 기본값은 easeOutCubic이다.
- defaultIndex (default: 0) optional
  
  Type: Number
  
  The panel index number to specify when initializing the module. A zero-based integer.
  
  모듈 초기화시 지정할 패널 인덱스 번호. 0부터 시작하는 정수.
- inputType (default: ["touch,"mouse"]) optional
  
  Type: Array
  
  Types of input devices. (eg.Axes.PanInput Reference)
  - "touch": A touch input device.
  - "mouse": A mouse.
  
  입력 장치 종류. (eg.Axes.PanInput 참고)
  - "touch": 터치 입력 장치.
  - "mouse": 마우스.
- thresholdAngle (default: 45) optional
  
  Type: Number
  
  The threshold value that determines whether user input is horizontal or vertical. (0 ~ 90)
  
  사용자의 입력이 가로 방향인지 세로 방향인지 판단하는 기준 각도 (0 ~ 90)
- adaptiveHeight (default: false) optional
  
  Type: Boolean
  
  Whether the height of the container element reflects the height value of the panel after completing the movement.
  (Note: on Android 4.1.x stock browser, has rendering bug which not correctly render height value on panel with single node. To avoid just append another empty node at the end.)
  
  목적 패널로 이동한 후 그 패널의 높이값을 컨테이너 요소의 높이값에 반영할지 여부.
  (참고: Android 4.1.x 스톡 브라우저에서 단일 노드로 구성된 패널의 높이값 변경이 제대로 렌더링 되지 않는 버그가 있음. 비어있는 노드를 추가하면 해결이 가능하다.)
- zIndex (default: 2000) optional
  
  Type: Number
  
  z-index value for container element
  
  컨테이너 요소의 z-index 값
- useTranslate (default: true) optional
  
  Type: Boolean
  
  Use css translate method on panel moves. When set to 'false', it'll use top/left instead.
  
  패널 이동시 CSS translate 사용 여부. 'false'로 설정 시, top/left 속성을 사용

Throws:

Type	Description
Error	An Error occur when given base element doesn't exist or it hasn't proper DOM structure to be initialized. 주어진 기본 요소가 존재하지 않거나 초기화 할 적절한 DOM 구조가없는 경우 오류가 발생한다.

Examples

A common example.
일반적인 예.
<div id="flick">
    <div><p>panel 0</p></div>
    <div><p>panel 1</p></div>
    <div><p>panel 2</p></div>
</div>
// Examples to omit and omit optional options.
// 생략가능한 옵션은 생략하고 생성하는 예.
new eg.Flicking("#flick");

// An example of specifying and generating values for all optional parameters.
// 모든 옵션의 값을 지정하고 생성하는 예.
new eg.Flicking("#flick", {
    hwAccelerable: true,
    prefix: "eg-flick",
    deceleration: 0.0006,
    horizontal: true,
    circular: false,
    previewPadding: [10, "15%"], // also as "10px", 15 or "15%" can be applied.
    bounce: [10, 10],
    threshold: 40,
    duration: 100,
    panelEffect: x => 1 - Math.pow(1 - x, 3),
    defaultIndex: 0,
    inputType: ["touch", "mouse"],
    thresholdAngle: 45,
    adaptiveHeight: false
});

Example of constructor element parameter value specification.
생성자 element 파라미터 값 지정 예.
// An example of assigning HTMLElement to an element parameter.
// element 파라미터에 HTMLElement를 지정하는 예.
new eg.Flicking(document.getElementById("flick"));

// An example of assigning a jQuery object to an element parameter.
// element 파라미터에 jQuery객체를 지정하는 예.
new eg.Flicking($("#flick")[0]);

// An example of assigning a css selector string to an element parameter.
// element 파라미터에 css 선택자 문자열을 지정하는 예.
new eg.Flicking("#flick");

Panel element definition location example.
패널 요소 정의 위치 예.
<!--An example of defining a panel element as a child of a base element.-->
<!--패널 요소를 기준 요소의 자식으로 정의한 예.-->
<div id="flick">
    <div><p>panel 0</p></div>
    <div><p>panel 1</p></div>
    <div><p>panel 2</p></div>
</div>

<!--An example of defining a panel element as a child of a container element.-->
<!--패널 요소를 컨테이너 요소의 자식으로 정의한 예.-->
<div id="flick2">
    <div class="eg-flick-container">
        <div><p>panel 0</p></div>
        <div><p>panel 1</p></div>
        <div><p>panel 2</p></div>
    <div>
</div>

An example where only one panel is defined and created with a circular.
패널을 하나만 정의하고 순환으로 생성하는 예.
<div id="flick">
    <div><p>panel 0</p></div>
</div>
// If the number of defined panels is less than the minimum number required for the circulation operation, the necessary number of panel elements are generated.
// 정의된 패널의 수가 순환동작에 필요한 최소 개수보다 적으면 필요한 수만큼의 패널 요소가 생성된다.
new eg.Flicking("#flick", {
    circular: true
})

For error occurrence example. There is no panel element.
오류 발생 예. 패널 요소가 하나도 없는 경우.
<div id="flick"></div>
try{
    new eg.Flicking("#flick");
} catch(e) {
    // An error occurs because there are no child elements in the reference element.
    // 기준 요소안에 자식 요소가 하나도 없으므로 에러가 발생한다.
}

See:

Easing Functions Cheat Sheet http://easings.net/

이징 함수 Cheat Sheet http://easings.net/
If you want to try a different easing function, use the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing) or the jQuery UI easing library (https://jqueryui.com/easing).

다른 easing 함수를 사용하려면 jQuery easing 플러그인(http://gsgd.co.uk/sandbox/jquery/easing)이나, jQuery UI easing 라이브러리(https://jqueryui.com/easing)를 사용한다

Browser Support

Browser	Version
Desktop - Internet Explorer	10+
Desktop - Chrome	latest
Desktop - Firefox	latest
Desktop - Safari	latest
Desktop - Edge	latest
iOS	7+
Andorid	2.3+ (except 3.x)

Extends

eg.Component

Requires

Members

static,constanteg.Flicking.DIRECTION_ALLNumber

Constant value for all direction.

all 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_DOWNNumber

Constant value for down direction.

down 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_HORIZONTALNumber

Constant value for horizontal direction.

horizontal 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_LEFTNumber

Constant value for left direction.

left 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_NONENumber

Constant value for none direction.

none 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_RIGHTNumber

Constant value for right direction.

right 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_UPNumber

Constant value for up direction.

up 방향에 대한 상수 값.

Default Value:

static,constanteg.Flicking.DIRECTION_VERTICALNumber

Constant value for vertical direction.

vertical 방향에 대한 상수 값.

Default Value:

staticeg.Flicking.VERSIONString

Version info string

버전정보 문자열

Example

eg.Flicking.VERSION;  // ex) 2.2.0

staticeg.Flicking.VERSIONString

Version info string

버전정보 문자열

Example

eg.Flicking.VERSION;  // ex) 2.2.0

pluginsArray

A list of plugins used.

사용된 플러그인 목록

Properties:

Name	Type	Description
`plugins`	Array	An array of plugin instances 플러그인 인스턴스 배열

Example

const flick = new eg.Flicking( ... ).plugin([ ... ]);
flick.plugins; // [ ... ] - array of plugins

Methods

destroy() Flicking.js, line 1658

Returns the reference element and its children to the state they were in before the instance was created. Remove all attached event handlers. Specify null for all attributes of the instance (including inherited attributes).
If plugin isn't empty, also reset all plugins registered.

기준 요소와 그 하위 요소를 인스턴스 생성전의 상태로 되돌린다. 부착된 모든 이벤트 핸들러를 탈거한다. 인스턴스의 모든 속성(상속받은 속성포함)에 null을 지정한다.
플러그인이 비어있지 않다면, 플러그인도 모두 리셋한다.

Example

const flick = new eg.Flicking("#flick");
flick.destroy();
console.log(flick.moveTo); // null

disableInput(){eg.Flicking} Flicking.js, line 1547

The input from the input device is blocked so that the panel is not moved by the input device.

패널이 입력 장치에 의해 움직이지 않도록 입력 장치로부터의 입력을 막는다.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

See:

eg.Flicking#enableInput

eg.Flicking#enableInput

enableInput(){eg.Flicking} Flicking.js, line 1535

The input from the input device is not blocked so that the panel can be moved by the input device.

막았던 입력 장치로부터의 입력을 푼다.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

See:

eg.Flicking#disableInput

eg.Flicking#disableInput

getAllElements(){Array.<HTMLElement>} Flicking.js, line 1253

Returns a reference to all panel elements.

모든 패널 요소의 레퍼런스를 반환한다.

Returns:

Type	Description
Array.<HTMLElement>	Whole panel elements. 모든 패널 요소.

getElement(){HTMLElement} Flicking.js, line 1214

Returns the reference of the current panel element.

현재 패널 요소의 레퍼런스를 반환한다.

Returns:

Type	Description
HTMLElement	Current panel element. 현재 패널 요소.

See:

getIndex(physical){Number} Flicking.js, line 1147

Returns the index number of the current panel element.

현재 패널 요소의 인덱스 번호를 반환한다.

physical (default: false) optional

Type: Boolean

@deprecated since 2.2.0

Types of index numbers.
- true (Physical): Math.floor({Total number of panels} / 2 - 0.1) value. (Increase by 1 for every two panels.) If the circular option is false, it equals physical=false.
- false (Logical): The value of how the content(innerHTML) of the current panel element is in the defined order of the panel elements.

@deprecated since 2.2.0

인덱스 번호의 종류.
- true (물리적): Math.floor({패널 총 개수} / 2 - 0.1) 값. (패널이 2개 늘어날 때마다 1씩 증가) circular옵션이 false이면 physical=false와 동일한 값.
- false (논리적): 현재 패널 요소의 컨텐트(innerHTML)가 '패널 요소들의 정의된 순서'에서 몇 번째인지에 대한 값.

Returns:

Type	Description
Number	Index number of the current panel element. A zero-based integer. 현재 패널의 인덱스 번호. 0부터 시작하는 정수.

Examples

<div id="flick">
    <div><p>panel 0</p></div>
    <div><p>panel 1</p></div>
    <div><p>panel 2</p></div>
    <div><p>panel 3</p></div>
</div>
// circular off and left flicking.
// 순환을 끄고 좌 플리킹.
new eg.Flicking("#flick").on("flickEnd", {currentTarget} => {
    console.log(currentTarget.getIndex()); // 1 > 2 > 3
    console.log(currentTarget.getIndex(true)); // 1 > 2 > 3
};

// circular on and left flicking.
// 순환을 켜고 좌 플리킹.
new eg.Flicking("#flick", {circular: true}).on("flickEnd", {currentTarget} => {
    console.log(currentTarget.getIndex()); // 1 > 2 > 3 > 0 > 1 > 2 > 3 > 0 ...
    console.log(currentTarget.getIndex(true)); // 1 > 1 > 1 > 1 > 1 > 1 > 1 > 1 ...
};

<!--Define only two panels.-->
<!--패널을 두 개만 정의한다.-->
<div id="flick2">
    <div><p>panel 0</p></div>
    <div><p>panel 1</p></div>
</div>
// (In the case of circulation) If the number of defined panel elements is less than the minimum number required, the number of panels is created.
// Therefore, it is described as 'the number of panel definitions of the contents of the panel.'
// (순환인 경우) 정의된 패널 요소의 개수가 필요 최소개수보다 적으면 그 수만큼의 패널을 생성한다.
// 그렇기 때문에 '패널이 담고 있는 컨텐트의 패널 정의 순성상의 번호'라고 설명한다.
const flick = new eg.Flicking("flick2", {
    circular: true
});

// The content of the current panel is the first in the panel definition order.
// 현재 패널이 담고 있는 컨텐트는 패널 정의 순서상 첫 번째이다.
flick.getIndex(); // 0

// The content of the next panel is the second in the panel definition order.
// 다음 패널이 담고 있는 컨텐트는 패널 정의 순서상 두 번째이다.
flick.getNextIndex(); // 1

// The content of the previous panel is the second in the panel definition order.
// 이전 패널이 담고 있는 컨텐트는 패널 정의 순서상 두 번째이다.
flick.getPrevIndex(); // 1

See:

getNextElement(){HTMLElement | null} Flicking.js, line 1228

Returns the reference of the next panel element.

다음 패널 요소의 레퍼런스를 반환한다.

Returns:

Type	Description
HTMLElement \| null	Next panel element or `null` if it does not exist. 다음 패널 요소. 패널이 없으면 `null`을 반환한다.

See:

getNextIndex(physical){Number | null} Flicking.js, line 1240

Returns the index number of the next panel element.

다음 패널 요소의 인덱스 번호를 반환한다.

physical (default: false) optional

Type: Boolean

@deprecated since 2.2.0

Types of index numbers
- true (Physical): Plus one of getIndex() return value.
- false (Logical): The value of how the content(innerHTML) of the next panel element is in the defined order of the panel elements.

@deprecated since 2.2.0

인덱스 번호의 종류.
- true (물리적): getIndex() 반환값에 1을 더한 값.
- false (논리적): 다음 패널 요소의 컨텐트(innerHTML)가 '패널 요소들의 정의된 순서'에서 몇 번째인지에 대한 값.

Returns:

Type	Description
Number \| null	Index number of the next panel element or null if it does not exist. A zero-based integer. 다음 패널 요소의 인덱스 번호. 0부터 시작하는 정수. 패널이 없으면 `null`을 반환한다.

See:

getPrevElement(){HTMLElement | null} Flicking.js, line 1263

Returns the reference of the previous panel element.

이전 패널 요소의 레퍼런스를 반환한다.

Returns:

Type	Description
HTMLElement \| null	Previous panel element or `null` if it does not exist. 이전 패널 요소. 패널이 없으면 `null`을 반환한다.

See:

getPrevIndex(physical){Number | null} Flicking.js, line 1275

Returns the index number of the previous panel element.

이전 패널 요소의 인덱스 번호를 반환한다.

physical (default: false) optional

Type: Boolean

@deprecated since 2.2.0

Types of index numbers
- true (Physical): Minus one of getIndex() return value.
- false (Logical): The value of how the content(innerHTML) of the current panel element is in the defined order of the panel elements.

@deprecated since 2.2.0

인덱스 번호의 종류
- true (물리적): getIndex() 반환값에 1을 뺀 값.
- false (논리적): 이전 패널 요소의 컨텐트(innerHTML)가 '패널 요소들의 정의된 순서'에서 몇 번째인지에 대한 값.

Returns:

Type	Description
Number \| null	Previous element index value or null if no more element exist. A zero-based integer. 이전 패널 요소의 인덱스 번호. 0부터 시작하는 정수. 패널이 없는 경우는 `null`.

See:

getStatus(stringify){Status | String} Flicking.js, line 1559

Get current flicking status. If the returned value is specified as a setStatus() method argument, it can be returned to its value state.

현재 상태 값을 반환한다. 반환받은 값을 setStatus() 메서드 인자로 지정하면 그 값 상태로 되돌릴 수 있다.

stringify optional

Type: Boolean

Set true if want get stringified status value.

true 지정시 json문자열 형태로 반환한다.

Returns:

Type	Description
Status \| String	An object with current state value information. 현재 상태값 정보를 가진 객체.

Example

const flick = new eg.Flicking("#flick");
const status = flick.getStatus();
const jsonStaus = flick.getStatus(true);
console.log(status); // {panel: {...}, $list: Array(7)}
console.log(jsonStatus); // "{\"panel\":{\"index\":3,\"no\":6,\"currIndex\":3,\"currNo\":6},\"$list\":[{\"style\":\"background-color: rgb(155, 49, 137); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 3</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(51, 172, 91); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 4</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(116, 38, 241); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 5</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(141, 139, 24); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 6</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(204, 102, 204); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 0</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(54, 53, 156); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 1</p>\n\t\t\t\t\t\t\"},{\"style\":\"background-color: rgb(196, 218, 72); position: absolute;  height: 100%;\",\"className\":\"eg-flick-panel\",\"html\":\"\n\t\t\t\t\t\t\t\t<p>panel 2</p>\n\t\t\t\t\t\t\"}]}"

See:

eg.Flicking#setStatus

eg.Flicking#setStatus

inherited hasOn(eventName){Boolean} component.js, line 150

Checks whether an event has been attached to a component.

컴포넌트에 이벤트가 등록됐는지 확인한다.

eventName

Type: String

The name of the event to be attached

등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
Boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

isPlaying(){Boolean} Flicking.js, line 1288

Checks whether the animated panel is playing.

패널 이동 애니메이션이 진행 중인지 확인한다.

Returns:

Type	Description
Boolean	Indicates whether the animated panel is playing 패널 이동 애니메이션 진행 중 여부

moveTo(noValue, duration){eg.Flicking} Flicking.js, line 1356

Moves to the panel in the order specified in noValue. If noValue is equal to the current logical index numbering, no action is taken. beforeFlickStart, flick, flickEnd events occur one after the other.

noValue에 지정한 순서의 패널로 이동한다. noValue값이 현재의 논리적 인덱스 번호와 같다면 아무동작 하지 않는다. beforeFlickStart, flick, flickEnd 이벤트가 차례로 발생한다.

noValue

Type: Number

The logical index number of the panel element to be moved. (Based on the defined order of the panel elements.)

이동할 패널 요소의 논리적 인덱스 번호. (getIndex()메서드 참조.)
duration (default: options.duration) optional

Type: Number

Duration of the panel movement (unit: ms)

패널 이동 애니메이션 진행 시간(단위: ms)

Fires:

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

See:

next(duration){eg.Flicking} Flicking.js, line 1314

Moves an element to the next panel. If horizontal=trueis right panel. If horizontal=falseis lower panel.

다음 패널로 이동한다. horizontal=true이면 우측 패널. horizontal=false이면 하측 패널.

duration (default: options.duration) optional

Type: Number

Duration of the panel movement (unit: ms)

패널 이동 애니메이션 진행 시간(단위: ms)

Fires:

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

See:

inherited off(eventName, handlerToDetach){eg.Component} component.js, line 209

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

eventName

Type: eventName

The name of the event to be detached

해제할 이벤트의 이름
handlerToDetach

Type: function

The handler function of the event to be detached

해제할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}

inherited on(eventName, handlerToAttach){eg.Component} component.js, line 170

Attaches an event to a component.

컴포넌트에 이벤트를 등록한다.

eventName

Type: eventName

The name of the event to be attached

등록할 이벤트의 이름
handlerToAttach

Type: function

The handler function of the event to be attached

등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}

inherited once(eventName, handlerToAttach){eg.Component} component.js, line 116

Executed event just one time.

이벤트가 한번만 실행된다.

eventName

Type: eventName

The name of the event to be attached

등록할 이벤트의 이름
handlerToAttach

Type: function

The handler function of the event to be attached

등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}
var some = new Some();
some.thing();
some.trigger("hi");
// fire alert("hi");
some.trigger("hi");
// Nothing happens

plugin(){eg.Flicking} Flicking.js, line 1725

사용될 플러그인을 등록한다.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

new eg.Flicking("#flick").plugin([
    new eg.Flicking.plugin.OpacityEffect("span"),
    ...
]);

prev(duration){eg.Flicking} Flicking.js, line 1335

Moves an element to the previous panel. If horizontal=trueis left panel. If horizontal=falseis upper panel.

이전 패널로 이동한다. horizontal=true이면 좌측 패널. horizontal=false이면 상측 패널.

duration (default: options.duration) optional

Type: Number

Duration of the panel movement (unit: ms)

패널 이동 애니메이션 진행 시간(단위: ms)

Fires:

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

See:

rebuild(){eg.Flicking} Flicking.js, line 1759

Rebuild/Initialize panels by current DOM of panels.

현재 패널 DOM 을 기준으로 패널을 재구성/초기화한다.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

flicking.rebuild();

resize(){eg.Flicking} Flicking.js, line 1417

The horizontal or vertical length of the panel is updated according to the base element. If horizontal=true is horizontal. If horizontal=false is vertical.

패널의 가로 혹은 세로 길이를 기준요소에 맞춰 갱신한다. horizontal=true이면 가로, horizontal=false이면 세로.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

const flick = new eg.Flicking("#flick", {
    previewPadding: [10, 10]
});
// When device orientaion changes.
// 단말기를 회전했을 때.
flick.resize();
// Or when changes previewPadding option from its original value.
// 또는 previewPadding옵션값을 변경했을 때.
flick.options.previewPadding = [20, 30];
flick.resize();

restore(durationValue){eg.Flicking} Flicking.js, line 1481

Return the panel to its original position. (It only works when the default behavior of the beforeFlickStart event is canceled.) beforeRestore, flick, restore events are occur in order.

패널의 위치를 원래 자리로 되돌린다. (beforeFlickStart 이벤트의 기본동작을 취소한 경우에만 동작함.) beforeRestore, flick, restore 이벤트가 차례로 발생한다.

durationValue (default: options.duration) optional

Type: Number

Duration of the panel movement (unit: ms)

패널 이동 애니메이션 진행 시간(단위: ms)

Fires:

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

new eg.Flicking("#flick").on("beforeFlickStart", e => {
    if (e.no === 2) {
        // Cancels the default behavior of the 'beforeFlickStart' event.
        // 'beforeFlickStart' 이벤트 기본동작 취소.
        e.stop();
    // Return to original position.
    // 원래 자리로 되돌림.
    this.restore(100);
}
});

setStatus(statusValue) Flicking.js, line 1614

Restore to the state of the statusValue.

statusValue의 상태로 복원한다.

statusValue

Type: Status | String

Status value to be restored. You can specify the return value of the getStatus() method.

복원할 상태 값. getStatus()메서드 반환값을 지정하면 된다.

Example

const flick = new eg.Flicking("#flick");
const status = flick.getStatus();
// Move to arbitrary panel.
// 임의 패널로 이동
flick.moveTo(2);
// Restore to status.
// status 상태로 복원
flick.setStatus(status);

See:

eg.Flicking#getStatus

eg.Flicking#getStatus

inherited trigger(eventName, customEvent){Boolean} component.js, line 63

Triggers a custom event.

커스텀 이벤트를 발생시킨다

eventName

Type: String

The name of the custom event to be triggered

발생할 커스텀 이벤트의 이름
customEvent

Type: Object

Event data to be sent when triggering a custom event

커스텀 이벤트가 발생할 때 전달할 데이터

Returns:

Type	Description
Boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고

Example

class Some extends eg.Component {
  some(){
      if(this.trigger("beforeHi")){ // When event call to stop return false.
        this.trigger("hi");// fire hi event.
      }
  }
}
const some = new Some();
some.on("beforeHi", (e) => {
    if(condition){
        e.stop(); // When event call to stop, hi event not call.
    }
});
some.on("hi", (e) => {
    // currentTarget is component instance.
    console.log(some === e.currentTarget); // true
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

Events

beforeFlickStart Flicking.js, line 862

An event that occurs before a user action or moveTo(), prev(), next() method initiates a move to the destination panel. If you do not prevent the default behavior, then many flick events and one flickEnd event will occur.

사용자 액션 혹은 moveTo(), prev(), next() 메서드에 의해 목적 패널로의 이동 시작전 발생하는 이벤트. 기본동작을 막지 않는다면 뒤이어 다수의 flick이벤트와 그 뒤 한 번의 flickEnd이벤트가 발생한다.

Examples

// The order of event occurrence.
// 이벤트 발생 순서
beforeFlickStart (once) > flick (many times) > flickEnd (once)

// An example to prevent the default behavior.
// 기본동작을 막는 예.
new eg.Flicking("#flick").on("beforeFlickStart", e => {
    e.stop();
});

Properties:

Name	Type	Description
`eventType`	String	The name of the event 이벤트 명
`isTrusted`	Boolean	`true` when the event was generated by a user action("mouse" or "touch") otherwise `false`. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`
`no`	Number	Index number of the current panel element. See the `getIndex()` method. 현재 패널 요소의 인덱스 번호. `getIndex()`메서드 참조.
`direction`	Number	of the panel movement. If `horizontal=true` is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_RIGHT`. If `horizontal=false` is `eg.Flicking.DIRECTION_UP` or `eg.Flicking.DIRECTION_DOWN`. 패널 이동 방향. `horizontal=true` 이면 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_RIGHT`. `horizontal=false` 이면 `eg.Flicking.DIRECTION_UP` 혹은 `eg.Flicking.DIRECTION_DOWN`.
`depaPos`	Number	Starting coordinate. 출발점 좌표.
`destPos`	Number	Destination coordinate. 도착점 좌표.
`stop`	function	Cancels the default action. (Default action: Move to destination panel.) The panel element stays at the position of the call to `stop()`. To return to the original position, you must call the `restore()` method. 기본동작을 취소한다. (기본동작: 목적 패널로의 이동.) 패널 요소가 `stop()`호출시점의 위치에 머물러 있는다. 원래 자리로 되돌리려면 `restore()` 메서드를 호출해야 한다.

See:

beforeRestore Flicking.js, line 791

This event occurs before the current panel starts to return to its original position. Followes flick and restore events. The conditions of occurrence are as follows.

1. The user has finished input but does not exceed the panel movement threshold.
2. Call the restore() method. (Prevent the default behavior of the beforeFlickStart event.)

현재 패널이 원래 위치로 되돌아가기 시작전에 발생하는 이벤트이다. 뒤이어 flick과 restore이벤트가 발생한다. 발생조건은 아래와 같다.

1. 사용자 입력이 끝났는데 패널 이동 임계점을 넘지 않은 경우.
2. restore() 메서드 호출.(beforeFlickStart 이벤트의 기본동작 방지 전제)

Example

// The order of event occurrence.
// 이벤트 발생 순서
beforeRestore (once) > flick (many times) > restore (once)

Properties:

Name	Type	Description
`eventType`	String	The name of the event 이벤트 명
`isTrusted`	Boolean	`true` when the event was generated by a user action("mouse" or "touch") otherwise `false`. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.
`no`	Number	Index number of the current panel element. See the `getIndex()` method. 현재 패널 요소의 인덱스 번호. `getIndex()`메서드 참조.
`direction`	Number	of the panel movement. If `horizontal=true` is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_RIGHT`. If `horizontal=false` is `eg.Flicking.DIRECTION_UP` or `eg.Flicking.DIRECTION_DOWN`. 패널 이동 방향. `horizontal=true` 이면 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_RIGHT`. `horizontal=false` 이면 `eg.Flicking.DIRECTION_UP` 혹은 `eg.Flicking.DIRECTION_DOWN`.
`depaPos`	Number	Starting coordinate. 출발점 좌표.
`destPos`	Number	Destination coordinate. 도착점 좌표.

See:

flick eventHandler.js, line 40

An event that occurs whenever the panel's coordinate value changes. It occurs in the following cases.

1. When the user is inputing the move.
2. When moving to the destination panel after you have finished inputing the move in step 1.
3. When the current panel is moving to its original position after the movement is finished in step 1.
4. Moving to the destination panel by calling the moveTo(), prev(), next() method. (Do not prevent the default behavior of the beforeFlickStart event.)

패널의 좌표값이 변할 때마다 발생하는 이벤트. 아래의 경우에 발생한다.

1. 사용자가 이동(move) 액션 입력중일 때.
2. 1번에서 이동(move) 액션 입력이 끝나고 목적 패널로 이동중일 때.
3. 1번에서 이동(move) 액션 입력이 끝나고 현재 패널의 원래 위치로 이동중일 때.
4. moveTo(), prev(), next(), 메서드를 호출하여 목적 패널로 이동중일 때. (beforeFlickStart이벤트의 기본동작을 막지 않아야 한다.)
5. restore() 메서드를 호출하여 현재 패널이 원래 위치로 이동중일 때. (beforeFlickStart이벤트의 기본동작 방지 전제.)

Example

The order of event occurrence.
이벤트 발생 순서
// When moving to the destination panel.
// 목적 패널로 이동할 때.
beforeFlickStart (once) > flick (many times) > flickEnd (once)

// When the restore operation.
// 복원 동작일 때.
beforeRestore (once) > flick (many times) > restore (once)

Properties:

Name	Type	Description
`eventType`	String	The name of the event 이벤트 명
`isTrusted`	Boolean	true when the event was generated by a user action(`"mouse"` or `"touch"`) otherwise false 사용자 액션(`"mouse"` 또는 `"touch"`)에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`
`no`	Number	Index number of the current panel element. See the `getIndex()` method. 현재 패널 요소의 인덱스 번호. `getIndex()`메서드 참조.
`direction`	Number	of the panel movement. If `horizontal=true` is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_RIGHT`. If `horizontal=false` is `eg.Flicking.DIRECTION_UP` or `eg.Flicking.DIRECTION_DOWN`. 패널 이동 방향. `horizontal=true` 이면 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_RIGHT`. `horizontal=false` 이면 `eg.Flicking.DIRECTION_UP` 혹은 `eg.Flicking.DIRECTION_DOWN`.
`pos`	Number	current coordinate 현재 좌표.
`holding`	Boolean	Whether the user is inputing through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.) 사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)
`distance`	Number	Distance value from the touch starting point. If the `direction` property value is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_UP`, it returns a positive number. `eg.Flicking.DIRECTION_RIGHT` or `eg.Flicking.DIRECTION_DOWN` returns a negative value. 터치 시작점으로부터 이동한 거리 값. `direction`속성값이 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_UP`이면 양수를, `eg.Flicking.DIRECTION_RIGHT` 혹은 `eg.Flicking.DIRECTION_DOWN`이면 음수를 반환한다.

See:

flickEnd Flicking.js, line 906

The event that occurs after completing the move to the destination panel. It occurs in the following cases.

- After completing the movement to the destination panel by user's move input.
- moveTo(), prev(), next() method call. (It does not occur if you have disabled the default behavior of the beforeFlickStart event.)

목적 패널로의 이동을 완료한 다음 발생하는 이벤트. 아래의 경우에 발생한다.

- 사용자의 이동(move) 액션 입력에 의한 목적 패널로의 이동완료 후.
- moveTo(), prev(), next() 메서드 호출.(beforeFlickStart이벤트의 기본동작을 막았다면 발생하지 않는다.)

Example

// The order of event occurrence.
// 이벤트 발생 순서
beforeFlickStart (once) > flick (many times) > flickEnd (once)

Properties:

Name	Type	Description
`eventType`	String	The name of the event. 이벤트 명
`isTrusted`	Boolean	`true` when the event was generated by a user action("mouse" or "touch") otherwise `false`. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.
`no`	Number	Index number of the current panel element. See the `getIndex()` method. 현재 패널 요소의 인덱스 번호. `getIndex()`메서드 참조.
`direction`	Number	of the panel movement. If `horizontal=true` is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_RIGHT`. If `horizontal=false` is `eg.Flicking.DIRECTION_UP` or `eg.Flicking.DIRECTION_DOWN`. 패널 이동 방향. `horizontal=true` 이면 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_RIGHT`. `horizontal=false` 이면 `eg.Flicking.DIRECTION_UP` 혹은 `eg.Flicking.DIRECTION_DOWN`.

See:

restore Flicking.js, line 828

The event that occurs after completing the move by restore() method.

restore() 메서드에 의해 패널이 원래 위치로 이동을 완료한 다음 발생하는 이벤트.

Example

// The order of event occurrence.
// 이벤트 발생 순서
beforeRestore (once) > flick (many times) > restore (once)

Properties:

Name	Type	Description
`eventType`	String	The name of the event 이벤트 명
`isTrusted`	Boolean	`true` when the event was generated by a user action("mouse" or "touch") otherwise `false`. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.
`no`	Number	Index number of the current panel element. See the `getIndex()` method. 현재 패널 요소의 인덱스 번호. `getIndex()`메서드 참조.
`direction`	Number	of the panel movement. If `horizontal=true` is `eg.Flicking.DIRECTION_LEFT` or `eg.Flicking.DIRECTION_RIGHT`. If `horizontal=false` is `eg.Flicking.DIRECTION_UP` or `eg.Flicking.DIRECTION_DOWN`. 패널 이동 방향. `horizontal=true` 이면 `eg.Flicking.DIRECTION_LEFT` 혹은 `eg.Flicking.DIRECTION_RIGHT`. `horizontal=false` 이면 `eg.Flicking.DIRECTION_UP` 혹은 `eg.Flicking.DIRECTION_DOWN`.

See: