각 클래스에서 GroupModel 클래스를 extend()합니다.
GroupModel 클래스의 주요 기능은 다음과 같습니다.
1. outside 엘리먼트를 생성하여 각 클래스에서 생성하는 엘리먼트를 포함합니다.
2. 지정한 options에 따라 라인 단위로 엘리먼트를 생성합니다.
- example을 참조하세요
example
- 축구, 농구 버튼이 한 라인에 표시되고 다음 라인에 수영, 테니스, 야구가 표시됩니다.
- eachWidth에 지정한 width가 버튼의 width가 됩니다.
- arrange에 라인 별로 표시될 버튼 수를 지정합니다.
- [2, 3]으로 지정했으므로 축구와 농구가 한 라인에 표시되며
- space에 지정한 만큼 버튼 간격이 설정됩니다.
new mc.types.ButtonGroup({
eachWidth: [60, 70, 60],
arrange: [2, 3],
space: 20,
width: 300,
component: [
{text: '축구', id: 'soccer'},
{text: '농구', id: 'basketball'},
{text: '수영', id: 'swim'},
{text: '테니스', id: 'tennis'},
{text: '야구', id: 'baseball'}
]
});
| Options | Component |
|---|---|
| ccode {String} | types.GroupModel |
|
component code : 'groupmodel'
|
|
| eachWidth {Array} | types.GroupModel |
|
라인의 각 radio/checkbox 엘리먼트에 적용할 width
아래의 공식으로 산출한 값의 범위내에서 지정할 수 있습니다.
공식: options.width - ccode[label].width - ccode[label].paddingLeft
값을 지정하지 않으면 공식에서 산출한 값을 options.maxNumber 값으로 균등 분할합니다.
반올림에 의한 차이는 라인의 마지막 엘리먼트에 반영합니다.
|
|
| insideClass {String} | types.GroupModel |
|
inside 엘리먼트에 적용할 className.
|
|
| insideStyle {Hash} | types.GroupModel |
|
inside 엘리먼트에 적용할 style
|
|
| labelClass {String} | types.GroupModel |
|
label 엘리먼트에 적용할 className. default: 'mc-boxgroup-label'
|
|
| labelStyle {Hash} | types.GroupModel |
|
label 엘리먼트에 적용할 style.
|
|
| linesideClass {String} | types.GroupModel |
|
라인 단위의 wrapper 엘리먼트에 적용할 className
|
|
| linesideStyle {Hash} | types.GroupModel |
|
라인 단위의 wrapper 엘리먼트에 적용할 style
|
|
| middleClass {String} | types.GroupModel |
|
라인 단위의 middle 엘리먼트에 적용할 className.
|
|
| middleStyle {Hash} | types.GroupModel |
|
라인 단위의 middle 엘리먼트에 적용할 style
|
|
| outsideClass {String} | types.GroupModel |
|
outside에 적용할 className.
|
|
| outsideStyle {Hash} | types.GroupModel |
|
outside에 적용할 style
|
|
| Method | Component |
|---|---|
mc.types.GroupModel
(Hash)
|
types.GroupModel |
|
생성자
|
|
mainGroupModel
(HTMLElement/String)
|
types.GroupModel |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
clickEvent
(EventObjct, HTMLElement)
|
types.GroupModel |
|
outside에서 click 이벤트가 발생했을 때 실행되며 오버라이드용 메소드입니다.
|
|
getOutside
() : HTMLElement
|
types.GroupModel |
|
outside 엘리먼트를 반환합니다.
|
|
removeEvents
()
|
types.GroupModel |
|
GroupModel에 설정한 이벤트를 해제합니다.
|
|
| Custom Event | Component |
|---|---|
| click (EventObject e, Object this) | types.GroupModel |
|
엘리먼트를 click 했을때 fire됩니다.
|
|
| ready (Object this) | types.GroupModel |
|
라디오그룹/체크박스그룹에 속한 컴포넌트를 전부 생성한 후에 fire 됩니다.
|
|