Element 공통 API

$self

Element API의 샘플 코드에 사용된 $self 변수는 Element API 자신을 참조하는 변수입니다. 이벤트 동작 설정 창의 코드 작성 항목에 코드를 작성할때 사용되며 외부 JS 파일에 작성되는 코드에는 사용할 수 없습니다. 대신 외부 JS 파일에서는 children() API를 이용하여 Element API를 찾을 수 있습니다.

$self === window.$this.children('아이디');
$self === window.$this.children(uid);
$self === window.$this.children(dom);

자세한 사항은 이벤트 설정창에서 코드 작성 도움말>미리정의된 변수 를 참고하세요.

stateName

모든 element는 normal, over, down 상태가 존재합니다. stateName 매개변수를 필요로 하는 API의 경우 stateName을 설정하지 않으면 기본적으로 normal 상태의 값으로 처리됩니다.

Element 공통 API

Text, Input, Image, Video/Audio Element API에 공통으로 제공되는 내용입니다.

uid: String
dom: DOMElement
scope: Object
document: APIObject
scaleFactor (): Number
disable (): Boolean
find (any): APIObject (deplecate)
findAll (): Object (deplecate)
children (): Object (v3.3.32~)
childrenAll (): Object (v3.3.32~)
loadCSS(): void (v3.3.32~)
loadJS(): void (v3.3.32~)
loadComponent(): void (v3.3.32~)

객체

animation: Object
animation 객체에 대한 내용은 Animation 객체 문서를 참고하세요.
capsule: Object
캡슐화 목록에서 설정된 값이 전달됩니다. capsule 객체에 대한 내용은 캡슐화 기능 사용하기 문서를 참고하세요.
dnd: Object Drag & Drop 기능을 지원합니다. dnd 객체 활용 방법은 Drag &Drop 기능 사용하기 문서를 참고하세요

속성

_eventNames: String
(읽기전용) 등록 가능한 이벤트 type을 문자열로 가지고 있습니다. 사용 가능한 이벤트 이름을 참고하여 이벤트를 등록하여 사용할 수 있습니다.
```
(API Object)._eventNames
// 출력 : "$destroy, click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, resize"
```
id: String
(읽기전용) Jik-ji 저작툴에서 설정한 element의 id 값입니다.

이벤트 관련 메서드

_eventNames 속성에 포함된 이벤트 이름을 참고하여 이벤트를 등록하여 사용할 수 있습니다.

on (type: String, handler: Function): void
이벤트 핸들러를 등록합니다.
```
$self.on('click', handler);
function handler(e){
  console.error('click');
}
```
off (type: String, handler: Function): void
등록된 이벤트 핸들러를 제거합니다.
```
$self.off('click', handler);
function handler(e){
  console.error('click');
}
```

trigger (type:String, detail:Object): void

이벤트를 발생시킵니다.

$self.trigger('click');
// document API의 'click' 이벤트가 발생했습니다.

// 데이터와 함께 전달하는 경우
$self.trigger('custom', data);

// 전달한 data는 originalEvent.detail 속성을 찾아 봐야함
$self.on('custom', function(e){
    var data= (e.originalEvent || e).detail;
});

전달되는 이벤트 객체는 버블링 됩니다.

// 전달되는 이벤트 객체
new CustomEvent(type, {
  bubbles: true,
  cancelable: true,
  detail: detail
});

속성 관련 메서드

Jik-ji 저작툴에서 설정된 크기, 위치 관련 API입니다. 매개변수를 전달하지 않으면 설정된 값을 반환하고, 매개변수를 전달하면 전달된 값을 적용합니다.

width (value: Number, stateName: String): Number

element의 가로 크기입니다.

// Getter
var w = $self.width();
// 'over' 상태의 값을 가져옴
var w = $self.width('over');

// Setter
// 'normal' 상태의 width를 10으로 설정함
$self.width(10);
// 'over' 상태의 width를 20으로 설정함
$self.width(20, 'over');

height (value: Number, stateName: String): Number

element의 세로 크기입니다.

// Getter
var h = $self.height();
// 'over' 상태의 값을 가져옴
var h = $self.height('over');

// Setter
// 'normal' 상태의 height를 10으로 설정함
$self.height(10);
// 'over' 상태의 height를 20으로 설정함
$self.height(20, 'over');

x (value: Number, stateName: String): Number

element의 가로 위치입니다.

// Getter
var x = $self.x();
// 'over' 상태의 값을 가져옴
var x = $self.x('over');

// Setter
// 'normal' 상태의 x 위치를 10으로 설정함
$self.x(10);
// 'over' 상태의 x 위치를 20으로 설정함
$self.x(20, 'over');

y (value: Number, stateName: String): Number

element의 세로 위치입니다.

// Getter
var y = $self.y();
// 'over' 상태의 값을 가져옴
var y = $self.y('over');

// Setter
// 'normal' 상태의 y 위치를 10으로 설정함
$self.y(10);
// 'over' 상태의 y 위치를 20으로 설정함
$self.y(20, 'over');

rotate (value: Number, stateName: String): Number

element의 회전 각도(degree)입니다. 회전 중심은 설정은 setStyle() 메서드를 이용하여 transformOrigin 값으로 설정합니다.

// Getter
var degree = $self.rotate();
// 'over' 상태의 값을 가져옴
var degree = $self.rotate('over');

// Setter
// 'normal' 상태의 회전각을 10도 설정함
$self.rotate(10);
// 'over' 상태의 회전각을 20도 설정함
$self.rotate(20, 'over');

scale (value: Number|Object, stateName: String): Number
- value: Number element의 scale(0 ~ 1)입니다.
- value: Objcet {x: x축scale (0 ~ 1), y: y축scale (0 ~ 1)}
- $self.scale() 리턴값
  - x축, y축 scale이 같은 경우 Number 타입으로 리턴됨
  - x축, y축 scale이 다른 경우 Object 타입으로 리턴됨 ({x, y})

Group 요소인 경우 가로 세로 scale 비율이 1로 유지됩니다. 따라서 scale 메서드에 Object Value를 매개변수로 전달할때 x, y scale 값이 같지 않으면 에러를 발생시킵니다. Group 요소에는 scale({x:2, y:2}) 보다는 scale(2)로 사용하는것이 더 편리합니다.

// Getter
var scale = $self.scale();
// 'over' 상태의 값을 가져옴
var scale = $self.scale('over');

// Setter (value: Number 설정  할때)
// 'normal' 상태의 scale을 두배로 설정함
$self.scale(2);
// 'over' 상태의 scale을 0.5로 설정함
$self.scale(0.5, 'over');

// Setter (value: Object 설정 할때)
$self.scale({x:2, y:1});
$self.scale({x:2, y:1}, 'over');

visible 관련 메서드

show (): void
element를 보이기 상태로 전환합니다.
```
$self.show();
```
hide (): void
element를 감추기 상태로 전환합니다. 이 메서드는 opacity를 0으로 설정 합니다.
```
$self.hide(); // opacity = 0 설정
$self.setStyle({display:'none'}); // display style 설정
```
toggleVisible (): void
element를 보이기/감추기 토글 기능입니다.
```
$self.toggleVisible();
```
isVisible (): Boolean
element의 현재 보이기(true)/감추기(false) 상태값을 나타냅니다.
```
var visible = $self.isVisible();
```

스타일 관련 메서드

Jik-ji 저작툴에서 생성된 element에 style을 적용할때에는 알아야할 몇가지 사항이 있습니다. Element에 스타일 적용 문서의 내용을 먼저 참고하시는 것이 좋습니다.

getStyle (cssName: String, stateName: String): any

element의 style 속성값을 반환합니다. 설정되지 않은 style인 경우 undefined가 반환됩니다.

var value = $self.getStyle('borderWidth');
var value = $self.getStyle('borderWidth', 'over');

// 특별히 지원되는 align 속성
// alignX: left, right, center, horizontal (양쪽 맞춤)
// alignY: top, bottom, middle, vertical (양쪽 맞춤)
var value = $self.getStyle('alignX');

setStyle (obj: Object, stateName: String): void

element의 style 속성값을 설정합니다.

// 선 두께를 10px로 설정함.
$self.setStyle('borderWidth', 10);
$self.setStyle('borderWidth', 10, 'over');

// 여러 style 속성을 하나의 객체로 전달해도 됨.
$self.setStyle({
  borderWidth:10,
  borderColor: "rgb(106, 168, 79)"
}, 'over');

// 특별히 지원되는 align 속성
// alignX: left, right, center, horizontal (양쪽 맞춤)
// alignY: top, bottom, middle, vertical (양쪽 맞춤)
// 부모 그룹 기준에서 오른쪽 하단으로 정렬
$self.setStyle({
  alignX: 'right', right: 0,
  alignY: 'bottom', bottom: 0
});

드래그 기능 메서드

setDrag (onStart: Function, onDrag: Function, onEnd: Function, option:Object): void

element에 드래그 기능을 부여합니다.

option: Object
- direction: String
  x축 방향으로만 이동('x'). y축 방향으로만 이동('y'). 생략하면 x,y축 이동이 가능합니다.
- minX: Number x축 이동가능한 최소값.
- maxX: Number x축 이동가능한 최대값.
- minY: Number y축 이동가능한 최소값.
- maxY: Number y축 이동가능한 최대값.
- useCapture: Boolean move 이벤트에 useCapture 설정값 적용.

// element에 드래그 기능을 구현하는 가장 간단한 방법 입니다.
$self.setDrag();

// x 축으로만 이동
$self.setDrag(null, null, null, {
  direction: 'x'
});

onStart: Function

mousedown 이벤트 핸들러로 등록될 함수입니다.

function onStart(event, info){
  // your code...
}
/*
// info 내용
{
  x: 드래그 시작 x 위치,  
  y: 드래그 시작 y 위치
}
*/

onDrag: Function

mousemove 이벤트 핸들러로 등록될 함수입니다.

function onDrag(event, info){
  // your code...
  // event.preventDefault() 를 호출하면 x, y 위치가 적용되지 않습니다.
}
/*
// info 내용
{
  movedX: 드래그 시작부터 누적 x 이동 거리,
  movedY: 드래그 시작부터 누적 y 이동 거리,
  dx: 순간 x 이동 거리, 
  dy: 순간 y 이동 거리,
  x: 이동할 x 위치, 
  y: 이동할 y 위치
}
*/

onEnd: Function

mouseup 이벤트 핸들러로 등록될 함수입니다.

function onEnd(event, info){
  // your code...
}
/*
// info 내용
{
  x: 최종 x 위치, 
  y: 최종 y 위치
}
*/

removeDrag(): void
드래그 기능을 제거합니다.
```
$self.removeDrag();
```
isDragable (): Boolean
setDrag() API에 의해 드래그 기능이 설정(true) 되었는지 여부를 나타냅니다. removeDrag() API에 의해 드래그 기능을 제거하면 false 값을 가집니다.
```
// 드래그 기능을 없애는 코드
if($self.isDragrable()){
  $self.removeDrag();
}
```

비활성화 메서드

disable (value: Boolean): Boolean
element가 마우스 이벤트를 받지 못하도록 비활성화 시킵니다. element가 가진 기능까지 비활성화 시켜주진 않습니다.
```
$self.disable(false);
$self.disable(true);
var disable = $self.disable();
```

링크 메서드

link (params: Object): void (v3.3.50~)
링크를 걸어주는 방법입니다.
- param:Object
  - url: String 링크 주소
  - target: String 새창 이름 지정 (기본값: '')
  - width: Number (target: '_blank' 일때) 창 너비 설정
  - height: Number (target: '_blank' 일때) 창 높 설정
  - fullscreen: Boolean (target: '_blank' 일때) 새창을 f ullscreen으로 띄울지 여부
  - maximize: Boolean (target: '_blank' 일때) 새창을 최대크기로 띄울지여부
    // 팝업창으로 링크열기 $self.link({ url: '링크주소', target: '_blank' });

PreviousDocument API Nextanimation 객체

Last updated 1 year ago