Plugin
Splitter
Basic
스플리터(Splitter)는 가로 또는 세로 방향으로 크기 조정 가능한 분할 윈도우를 구성 할 수 있는 컴포넌트입니다.
상단 콘텐츠
하단 콘텐츠
<div class="Splitter" data-position="40%" data-orientation="horizontal" style="height:600px;">
<div id="frame1" class="top_panel">
상단 콘텐츠
</div>
<div id="frame2" class="bottom_panel">
하단 콘텐츠
</div>
</div>
스플리터 컴포넌트는 jQuery Splitter Plugin을 wrapping한 구조로 되어 있습니다. 그렇기 때문에 기존 컴포넌트와는 별개로 아래 3가지 파일 링크가 필요합니다.
- alopex-ext.min.js
jquery-ui.js, jquery-spliter.js 가 merge된 파일
- alopex-ext-setup.js
Splitter에 대한 widget 확장 셋업
- alopex-ext.css
Splitter에 대한 스타일링
이 문서는 jQuery Splitter Plugin의 일부 기능을 설명하고 있습니다. 기타 기능은 jQuery Splitter Plugin에서 확인 바랍니다.
Attribute
class {string}
- "Splitter"
- 해당 엘리먼트가 Splitter 컴포넌트이라는 것을 지정합니다.
data-orientation {string}
"horizontal"
- 가로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
"vertical"
- 세로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
data-position {string}
- %단위로 분할 비율을 설정합니다. %가 없을 경우 px로 인식.
Child Frame Attribute
class {string}
"top_panel"
- 부모 윈도우가 horizontal 분할 일 경우에 상단 패널로 지정.
"bottom_panel"
- 부모 윈도우가 horizontal 분할 일 경우에 하단 패널로 지정.
"left_panel"
- 부모 윈도우가 vertical 분할 일 경우에 좌측 패널로 지정.
"right_panel"
- 부모 윈도우가 vertical 분할 일 경우에 우측 패널로 지정.
Functions
.setOptions(JSON option)
동적으로 splitter 옵션을 변경할 때 사용합니다.
- "parameter"
- option {JSON}
- orientation
- "horizontal"
- 가로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
- "vertical"
- 세로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
- "horizontal"
- limit
- 여백 pixel 값
- position
- split 비율. %가 없을 경우 px 로 인식
- onDragStart
- 드래그 시작 시점의 콜백 함수를 정의합니다.
- onDrag
- 드래그 시점의 콜백 함수를 정의합니다.
- onDragEnd
- 드래그 종료(Drop) 시점의 콜백 함수를 정의합니다.
- orientation
- option {JSON}
var splitter = $('#splitter').setOptions({
orientation: 'horizontal',
limit: 10,
position: '50%',
onDrag: function(event) {
console.log("Dragging");
},
onDragStart: function(event) {
console.log("Drag Start");
},
onDragEnd: function(event) {
console.log("Drag End");
console.log("Position");
}
});
.split(JSON option)
동적으로 splitter 컴포넌트를 생성할 경우 사용합니다.
- "parameter"
- option {JSON} Optional.
- orientation
- "horizontal"
- 가로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
- "vertical"
- 세로 방향으로 크기 조정 가능한 분할 윈도우 구성합니다.
- "horizontal"
- limit
- 여백 pixel 값
- position
- split 비율. %가 없을 경우 px 로 인식
- onDragStart
- 드래그 시작 시점의 콜백 함수를 정의합니다.
- onDrag
- 드래그 시점의 콜백 함수를 정의합니다.
- onDragEnd
- 드래그 종료(Drop) 시점의 콜백 함수를 정의합니다.
- orientation
- option {JSON} Optional.
상단 콘텐츠
하단 콘텐츠
<div id="foo" style="height:300px;" >
<div id="frame1">
상단 콘텐츠
</div>
<div id="frame2">
하단 콘텐츠
</div>
</div>
<script id="script">
$a.page(function () {
this.init = function (id, param) {
var splitter = $('#foo').split({
orientation: 'horizontal',
limit: 10,
position: '50%',
onDrag: function(event) {
console.log("Dragging");
},
onDragStart: function(event) {
console.log("Drag Start");
},
onDragEnd: function(event) {
console.log("Drag End");
}
});
};
});
</script>
Setup
setup 자바스크립트에서 스플리터의 기본 속성을 공통으로 설정합니다.
$a.setup('splitter', {
position: '50%',
limit: 10,
orientation: 'horizontal'
});
- position {string}
- "50%"
- split 비율. %가 없을 경우 px 로 인식
- "50%"
- limit {int}
- 10
- 여백 pixel 값
- 10
- orientation {string}
- "horizontal"
- 가로 방향으로 크기 조정 가능한 분할 윈도우 구성
- "vertical"
- 세로 방향으로 크기 조정 가능한 분할 윈도우 구성
- "horizontal"