Panel 클래스의 주요 기능은 아래와 같습니다.
1. Panel 형태의 구조적인 Frame을 제공합니다.
- title frame
- top, center, bottom, footer frame
component는 center에 설정되며 buttons는 bottom에 설정됩니다.
- Panel frame 구조도
+--------------------+ outside
| title
|--------------------|
| | top
| |------------- |
| | center
| inside --------------|
| | bottom
| |------------- |
| | footer
+---------+----------+
2. frame 단위로 options를 작성할 수 있습니다.
- 이는 frame 단위로 component를 작성할 수 있다는 의미이며 ccode를 기준으로 컴포넌트를 생성합니다.
- 컴포넌트에 속한 HTMLElement의 parent는 frame 이름이 됩니다.
| Options | Component |
|---|---|
| autoScroll {Boolean} | panel.Panel |
|
자동 스크롤 생성 여부. default: false
true: height가 넘치면 자동으로 스크롤 바를 설정합니다.
false: 설정하지 않고 overflow 처리를 합니다.
|
|
| ccode {String} | panel.Panel |
|
component code : 'panel'
|
|
| createTitle {Boolean} | panel.Panel |
|
Title 작성 여부. default: true
true: title 프로퍼티를 작성하지 않더라도 Title 클래스를 생성합니다.
false: title 프로퍼티를 작성했더라도 Title 클래스를 생성하지 않습니다.
|
|
| height {Number} | panel.Panel |
|
panel height
panel height가 되며 이 값에서 각 frame의 height 값을 제외한 값이 center height로 설정됩니다.
|
|
| html {String|Hash|JSON} | panel.Panel |
innerHTML 실행 결과를 frame 엘리먼트에 첨부합니다.
frame 프로퍼티에 작성하지 않고 options에 작성하면 center frame에 설정됩니다.
frame 프로퍼티에 className, style을 작성하면 frame 엘리먼트에 반영됩니다.
문자열 형태인 경우 innerHTML을 하므로 이전 content가 지워지며
JSON 또는 Hash 형태인 경우 차일드 엘리먼트로 첨부됩니다.
example
- 문자열로 값을 지정한 형태
html: '내용'
- 문자열로 HTML 스크립트를 지정한 형태
html: '<div class="foo" style="width: 100px">내용</div>
- Hash 형태
{template: '<div>{0}</div>', mapping: ['내용']}
mapping 프로퍼티에 템플릿 인덱스에 mapping할 값을 지정합니다.
- JSON 형태
{tag: 'div', text: '내용'}
|
|
| insideClass {String|Array} | panel.Panel |
|
panel inside 엘리먼트에 설정할 className
default: 'mc-panel-inside'
|
|
| insideStyle {Hash} | panel.Panel |
|
panel inside 엘리먼트에 설정할 style
|
|
| panelClass {String|Array} | panel.Panel |
|
panel outside에 설정할 className
default: 'mc-panel'
|
|
| panelStyle {Hash} | panel.Panel |
|
panel outside에 설정할 style
|
|
| prefix {String} | panel.Panel |
|
id 접두사. default: 'mc_panel_'
|
|
| showBorder {Boolean} | panel.Panel |
|
frame간 border 표시 여부. default: false
ture: border-bottom을 표시하여 frame을 구분한다.
false: border-bottom을 표시하지 않는다.
|
|
| width {Number} | panel.Panel |
|
panel width
일반적으로 Panel 자체에서 width를 설정하지 않고 이를 사용하는 클래스에서 설정하게 됩니다.
|
|
| Method | Component |
|---|---|
mc.panel.Panel
(Hash)
|
panel.Panel |
|
생성자
|
|
mainPanel
(HTMLElement/String)
|
panel.Panel |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
getCenter
() : HTMLElement
|
panel.Panel |
|
Panel.centerBox를 반환합니다.
|
|
getCenterWH
() : Array
|
panel.Panel |
|
Panel.centerBox의 width와 height를 반환합니다.
|
|
getTitleNew
() : Object
|
panel.Panel |
|
Title 오브젝트를 반환합니다
|
|
| Custom Event | Component |
|---|---|
|
|
|
| Examples | |
|---|---|
| Panel | |
|
frame 단위로 컴포넌트를 지정할 수 있습니다.
|
|