Guide 클래스의 주요 기능은 다음과 같습니다.
1. 도움말 제목을 설정할 수 있습니다.
- 제목을 지정하지 않으면 자동으로 title bar가 표시되지 않습니다.
2. 도움말 내용을 설정할 수 있습니다.
3. 도움말이 표시될 위치를 지정할 수 있습니다.
4. title frame의 close icon을 클릭하면 표시된 Guide가 사라집니다.
5. TextType과 같은 엘리먼트는 parent인 showTo를 지정해야 하지만 ,
Guide는 showTo를 지정하지 않으며 필요한 시점에 엘리먼트와 관계를 설정합니다.
Guide DOM tree
+------------------------+ outside
| title |
|------------------------| guidebox
| | message |
|inside |-----------------|
| | text,textarea |
|------------------------| buttonframe
| Button |
+------------------------+
- Guide 클래스 자체를 사용할 수 있습니다만,
GuideType 클래스, Tip 클래스, MessageBox 클래스에서
이를 Super Class로 사용하여 더욱 유용한 기능을 제공하고 있습니다.
| Options | Component |
|---|---|
| ccode {String} | guide.Guide |
|
component code : 'guide'
|
|
| closable {Boolean} | guide.Guide |
|
close 아이콘 사용 여부. default: false
true: 사용, false: 사용 안 함
|
|
| createTitle {Boolean} | guide.Guide |
|
Title 작성 여부. default: true
true: title 프로퍼티를 작성하지 않더라도 Title 클래스를 생성합니다.
false: title 프로퍼티를 작성했더라도 Title 클래스를 생성하지 않습니다.
|
|
| draggable {Boolean} | guide.Guide |
|
Drag & Drop 사용 여부. default: false
true: 사용, false: 사용하지 않음
|
|
| guideClass {String} | guide.Guide |
|
outside 엘리먼트에 적용할 className
|
|
| guideStyle {Hash} | guide.Guide |
|
outside 엘리먼트에 적용할 style
|
|
| html {String|Hash|JSON} | guide.Guide |
|
guide message
문자열, Hash, JSON 형태로 지정할 수 있습니다.
contents를 설정할 때 innerHTML을 하므로 이전 contents가 지워지며
JSON 또는 Hash 형태인 경우 차일드 엘리먼트로 첨부됩니다.
example:
- 문자열로 값을 지정한 형태
html: '가이드 메시지'
- 문자열로 HTML 스크립트를 지정한 형태
html: <div class="foo" style="width: 100px">가이드 메시지
- Hash 형태
html: {template: '<div>{0}</div>', mapping: ['가이드 메시지']}
mapping 프로퍼티에 템플릿 인덱스에 mapping할 값을 지정합니다.
- JSON 형태
html: {tag: 'div', text: '가이드 메시지'}
|
|
| guideboxClass {String} | guide.Guide |
|
guidebox 엘리먼트에 적용할 className.
default: 'mc-guidebox'
|
|
| guideboxStyle {Hash} | guide.Guide |
|
guidebox 엘리먼트에 적용할 style
|
|
| outsideClass {String} | guide.Guide |
|
guide outside 엘리먼트에 적용할 className
default: ['mc-guide-outside', 'mc-display-none']
|
|
| outsideStyle {Hash} | guide.Guide |
|
guide outside 엘리먼트에 적용할 style
|
|
| prefix {String} | guide.Guide |
|
id 접두사. default: 'mc_guide_'
|
|
| showGuide {Boolean} | guide.Guide |
|
Guide 표시 여부. default: true
true: 표시함, false: Guide를 표시하지 않음
|
|
| showStatus {Boolean} | guide.Guide |
|
Guide 표시 상태
true: 표시 상태, false: 숨김 상태
|
|
| title {String} | guide.Guide |
|
guide 제목
|
|
| width {Number} | guide.Guide |
|
guide width. default: 120
|
|
| Method | Component |
|---|---|
mc.guide.Guide
(Hash)
|
guide.Guide |
|
생성자
|
|
mainGuide
(HTMLElement/String)
|
guide.Guide |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
adjustShow
(String, Hash, HTMLElement/String)
|
guide.Guide |
|
기준 엘리먼트의 위치 코드에서 move에 지정한 방향과 픽셀만큼 Guide를 이동하여 표시합니다.
|
|
getOutside
() : HTMLElement
|
guide.Guide |
|
outside 엘리먼트를 반환합니다.
|
|
getTitleNew
() : Object
|
guide.Guide |
|
Title 오브젝트를 반환합니다.
|
|
hide
()
|
guide.Guide |
|
Guide를 숨깁니다.
|
|
isGuideHide
() : Boolean
|
guide.Guide |
|
Guide type Title에 text와 closable 지정 여부를 반환합니다.
|
|
moveTo
(Hash)
|
guide.Guide |
|
outside 엘리먼트의 꼭지점을 기준으로 지정한 방향과 값만큼 Guide를 이동합니다.
|
|
setText
(String)
|
guide.Guide |
|
html에 설정한 내용을 guideside 엘리먼트의 차일드로 설정합니다.
|
|
setTitleText
(String)
|
guide.Guide |
|
title text를 설정합니다.
|
|
show
()
|
guide.Guide |
|
Guide를 표시합니다.
|
|
showXY
(Number, Number)
|
guide.Guide |
|
지정한 X, Y 위치에 Guide를 표시합니다.
|
|
toggleShow
()
|
guide.Guide |
|
guide box의 숨김/표시를 토글합니다.
|
|
| Custom Event | Component |
|---|---|
| hideGudie (HTMLElement outside, Object this) | guide.Guide |
|
guide를 표시하지 않을 때 fire됩니다.
|
|
| showGudie (HTMLElement outside, Object this) | guide.Guide |
|
guide를 표시할 때 fire됩니다.
|
|
| Examples | |
|---|---|
| guide | |
|
guide box
|
|