Tabs 클래스의 주요 기능은 아래와 같습니다.
1. 텝 단위로 컨텐츠를 제공합니다.
- 텝을 클릭하면 텝에 속한 컨텐츠가 표시됩니다.
2. 텝을 지정한 위치에 삽입할 수 있습니다.
- 각 텝의 넓이(width)를 지정할 수 있습니다.
3. 텝을 삭제할 수 있습니다.
- close 버튼을 클릭하면 텝이 삭제됩니다.
4. 좌우 스크롤 버튼을 사용해서 텝을 좌우로 이동할 수 있습니다.
- 이동할 width를 지정할 수 있습니다.
- 이동할 수 없도록 할 수도 있습니다.
5. 처음에 표시할 텝을 지정할 수 있습니다.
6. 텝을 표시만 하고 사용할 수 없도록 지정할 수 있습니다.
7. 텝 전체 타이틀을 지정할 수 있습니다.
| Options | Component |
|---|---|
| ccode {String} | panel.Tabs |
|
component code : 'tabs'
|
|
| closable {String} | panel.Tabs |
|
close icon 사용 여부. default: false
true: 사용, false: 사용하지 않음
options가 아닌 component에 지정
true를 설정하고 close icon을 클릭하면 텝과 텝의 컨텐츠가 사라집니다.
디폴트가 false인 것은 표시한 내용을 지울 확율이 낮기 때문입니다.
|
|
| createTitle {Boolean} | panel.Tabs |
|
Title 작성 여부. default: true
true: title 프로퍼티를 작성하지 않더라도 Title 클래스를 생성합니다.
false: title 프로퍼티를 작성했더라도 Title 클래스를 생성하지 않습니다.
|
|
| id {String} | panel.Tabs |
|
Tabs 인스턴스 id
|
|
| ime {Boolean} | panel.Tabs |
|
한글 중간 맞춤 여부. default: false
|
|
| insideClass {String} | panel.Tabs |
|
tab inside 엘리먼트에 적용할 className
default: 'mc-tabs-inside'
|
|
| insideStyle {Hash} | panel.Tabs |
|
tab inside 엘리먼트에 적용할 style
|
|
| leftBtnClass {String} | panel.Tabs |
|
좌측 스크로 버튼에 적용할 className
default: 'mc-tabs-scroll-left'
|
|
| outsideClass {String} | panel.Tabs |
|
tab outside 엘리먼트에 적용할 className
default: ['mc-tabs', 'mc-font-one']
|
|
| outsideStyle {Hash} | panel.Tabs |
|
tab outside 엘리먼트에 적용할 style
|
|
| prefix {String} | panel.Tabs |
|
id 접두사. default: 'mc_tabs_'
|
|
| rightBtnClass {String} | panel.Tabs |
|
좌측 스크로 버튼에 적용할 className
default: 'mc-tabs-scroll-left'
|
|
| scrollWidth {Number} | panel.Tabs |
|
스크롤 버튼을 클릭할 때마다 스크롤되는 width
tabScroll에 true를 지정한 경우에만 적용됩니다.
값을 지정하지 않으면 tabWidth가 설정됩니다
|
|
| showTabIndex {Number} | panel.Tabs |
|
contents를 표시할 텝 인덱스. default: 0
처음 랜더링한 후 지정한 인덱스 번째의 텝을 표시합니다.
랜더링된 후에는 텝을 mousedown하거나 setShowTab()으로 표시할 텝을 변경할 수 있습니다.
|
|
| tabCloseTitle {String} | panel.Tabs |
|
close 버튼의 title 속성 명칭.
|
|
| tabDisable {String} | panel.Tabs |
|
(optional) 텝을 표시는 하지만 사용할 수는 없음. default: false
true: 사용할 수 없음, false: 사용할 수 있음
this.options가 아닌 component.options에 지정합니다
|
|
| tabHideClass {String} | panel.Tabs |
|
표시하지 않을 Tab에 설정할 className
default: 'mc-display-none'
|
|
| tabClass {String} | panel.Tabs |
|
tab 엘리먼트에 적용할 className
|
|
| tabScroll {Boolean} | panel.Tabs |
|
(optional) 스크롤 바 설정 여부. default: true
true: 텝 라인에 표시할 텝이 많은 경우 스크롤 바를 설정합니다.
false: 스크롤 바를 표시하지 않습니다. 숨겨진 텝을 볼 수 없습니다.
|
|
| tabStyle {String} | panel.Tabs |
|
tab 엘리먼트에 적용할 style
width를 첨부하게 되므로 문자열 형태로 지정해야 합니다.
|
|
| tabText {String|Array} | panel.Tabs |
|
텝 텍스트
options에 문자열로 지정하면 첫 번째 텝에 반영하고 Array로 지정하면 인덱스 번째의 텝에 반영합니다.
compoment에 이 값을 작성하면 최우선으로 적용합니다.
|
|
| tabWidth {Number} | panel.Tabs |
|
각 tab의 width. default: 100
처음 설정할 때에는 디폴트 값이 있으므로 tabWidth가 설정되지만,
인스턴스를 생성한 후 setWidth()로 수정할 때 width를 지정하지 않으면
첫 번째 인덱스의 width를 자동으로 설정하고 width를 지정하면
각 텝의 width를 재설정하고 이에 따른 처리도 해야 한다.
|
|
| tabTextAlign {String} | panel.Tabs |
|
tab의 text align 형태
|
|
| textClass {String} | panel.Tabs |
|
tab text에 적용할 className
|
|
| textStyle {Hash} | panel.Tabs |
|
tab text에 적용할 style
|
|
| Method | Component |
|---|---|
mc.panel.Tabs
(Hash)
|
panel.Tabs |
|
생성자
|
|
mainTabs
(HTMLElement/String)
|
panel.Tabs |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
addTab
(Number, Hash/JSON)
|
panel.Tabs |
|
첫 번째 파라미터에 지정한 인덱스 위치에 Tab을 추가합니다.
|
|
addTabs
(arguments)
|
panel.Tabs |
|
다수의 텝을 추가합니다.
|
|
getIndexTab
(Number) : HTMLElement
|
panel.Tabs |
|
index에 해당하는 tab 엘리먼트를 반환합니다.
|
|
getTabIndex
(HTMLElement) : Number
|
panel.Tabs |
|
엘리먼트에 해당하는 tab index를 반환합니다
|
|
isContains
() : HTMLElement
|
panel.Tabs |
|
지정한 className를 갖지 않고 있는 엘리먼트를 반환합니다.
|
|
removeMember
(Number)
|
panel.Tabs |
|
생성한 엘리먼트 및 this.compParents에서 제거합니다.
|
|
removeInstance
(Number)
|
panel.Tabs |
|
Instance 오브젝트에 등록된 오브젝트를 삭제합니다.
|
|
removeTab
(Number)
|
panel.Tabs |
|
지정한 텝과 텝에 연결된 컨텐츠를 삭제합니다.
|
|
scrollElement
(Number)
|
panel.Tabs |
|
지정한 좌표로 스크롤합니다.
|
|
showContent
(Number)
|
panel.Tabs |
|
파라미터에 지정한 인덱스 번째의 Tab 내용을 display 상태로 설정하고
다른 tab은 hide 상태로 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| addTab (Number index, Object this) | panel.Tabs |
|
Tab을 추가했을 때 fire됩니다.
|
|
| mousedownLeft (EventObject e, HTMLElement tg, Object this) | panel.Tabs |
|
좌측 scroll 버튼을 mousedown했을 때 fire됩니다.
|
|
| mousedownRight (EventObject e, HTMLElement tg, Object this) | panel.Tabs |
|
우측 scroll 버튼을 mousedown했을 때 fire됩니다.
|
|
| mousedownTab (EventObject e, HTMLElement tg, Object this) | panel.Tabs |
|
tab을 mousedown했을 때 fire됩니다.
|
|
| removeTab (Number index, HTMLElement tg, Object this) | panel.Tabs |
|
Tab을 삭제했을 때 fire됩니다.
|
|
| tabChange (Number index, HTMLElement cp, Object this) | panel.Tabs |
|
특정 tab만 display 상태가 되고 다른 tab은 hide 상태가 되었을 때 fire됩니다.
|
|
| tabScroll (Number position, Object this) | panel.Tabs |
|
지정한 좌표로 스크롤하였을 때 fire됩니다.
|
|