Radio 클래스의 주요 기능은 다음과 같습니다.
1. Radio 엘리먼트를 생성하고 checked 상태를 설정합니다.
2. label을 설정합니다.
3. 하나의 radio 버튼이 checked 상태가 되면 다른 radio 버튼은 unchecked 상태가 되는
radio 버튼 특성상 Radio 클래스 단독으로 사용하는 것은 의미가 없습니다.
radio 버튼들의 checked 상태를 제어하는 클래스가 RadioGroup 클래스입니다.
* 형태1
var radio1 = new mc.types.Radio({
name: 'sports',
text: '축구',
value: 'soccer',
showTo: 'showArea'
})
var radio2 = new mc.types.Radio({
name: 'sports',
text: '수영',
value: 'swim',
checked: true,
showTo: 'showArea'
})
var radio3 = new mc.types.Radio({
name: 'sports',
text: '농구',
value: 'basketball',
showTo: 'showArea'
})
| Options | Component |
|---|---|
| addEvent {Boolean} | types.Type |
|
type 엘리먼트에 이벤트 설정 여부. default: true
true: keydown/keypress, focus, blur 이벤트를 설정합니다.
false: 이벤트를 설정하지 않습니다.
|
|
| adjacent {String} | types.Type |
|
생성한 엘리먼트가 showTo에 첨부될 위치
beforebegin, afterend, beforeend, afterbegin을 지정할 수 있습니다.
상세 내용은 MethodChain framework의 insertHTML()을 참조하세요.
|
|
| attr {Hash} | types.Type |
type 엘리먼트에 적용할 attribute
Type 클래스에서 프로퍼티로 제공하지 않는 속성 값을 엘리먼트에 설정할 때 사용합니다.
options에 attr: {attribute_name: value} 형태로 지정합니다.
example
attr: {value: 'value', readOnly: true}
|
|
| ccode {String} | types.Radio |
|
component code : 'radio'
|
|
| charsOnly {Boolean} | types.Type |
|
제어키의 keydown 이벤트 발생 여부. default:false
true: 제어키(Control key)로 인해 keydown 이벤트가 발생했을 때 이를 처리하기 위한
메소드를 실행하지 않으며 custom 이벤트도 fire시키지 않습니다.
제어키에 대해서는 mc.controlKeys를 참조하세요.
false: 제어키를 체크하지 않습니다.
|
|
| checked {Boolean} | types.Radio |
|
checked 초기 값. defaut: false. true: checked 상태로 설정
|
|
| checkMethod {Function} | types.Type |
custom 지정 메소드.
엘리먼트 값을 MethodChain에서 제공하는 형태가 아닌 사용자가 지정한 메소드를 실행하여 체크할 수 있습니다.
checkMethod에 실행할 메소드 이름을 지정하면 됩니다.
- 파라미터는 하나이며 엘리먼트에 입력한 값이 설정됩니다.
checkMethod(param)
@param {String|Number} value, 엘리먼트에 입력한 값
- 사용자에게 제시할 메시지가 있다면 {title: 'title', msg: 'message'} 형태로 return합니다.
checkMethod() return
@return {Hash} {title: 'title', msg: 'message'}
title: MessageBox의 제목
message: 입력자에게 제공할 message
null을 반환하면 message를 표시하지 않습니다.
checkType()을 오버라이드해서 사용할 수도 있습니다.
|
|
| className {String} | types.Type |
|
own 엘리먼트에 적용할 className
typeClass --> className 순서로 설정되므로 typeClass에 같은 CSS 값이 있으면 오버라이드하게 됩니다.
|
|
| createType {Hash|JSON} | types.Type |
HTMLElement 생성할 템플릿.
options에 createType을 지정하면 defaultType 템플릿을 적용하지 않고 이를 적용합니다.
examples
createType: {tag: 'ul', id: 'sports', text: '스포츠', child: [
{tag: 'li', id: 'soccer', text: '축구'},
{tag: 'li', id: 'basketball', text: '농구'}
]}
|
|
| defaultColor {String} | types.Type |
HTMLElement의 color 기본 값.
일반적으로 style을 사용하며 Grid Package에서 간단하게 설정할 때 사용합니다.
example
- {defaultColor: 'blue'}로 작성하면 글자색이 blue로 표시됩니다.
|
|
| defaultType {Hash} | types.Radiio |
|
HTMLElement를 생성하는 default 형태
default: {tag: 'input', type: 'radio', id: '', autocomplete: 'off', tabIndex: '0'}
|
|
| disabled {Boolean} | types.Type |
|
disabled 설정 여부
true: 엘리먼트를 disabled 상태로 설정
|
|
| disabledClass {String} | types.Type |
|
엘리먼트가 disabled 상태로 설정할 때 적용할 className
default: 'mc-types-disabled'
|
|
| errorClass {String} | types.Type |
|
에러가 발생했을 때 엘리먼트에 적용할 className.
default: 'mc-types-error'
|
|
| focusClass {String} | types.Type |
|
focus 이벤트가 발생했을때 엘리먼트에 적용할 className
default: 'mc-types-focus'
|
|
| height {String} | types.Type |
|
Element Height
|
|
| id {String} | types.Type |
|
엘리먼트 #id
#id를 지정하지 않으면 MethodChain에서 this.prefix + '_일련번호' 형태로 부여합니다.
|
|
| innerHTML {String} | types.Type |
|
innerHTML로 Element에 적용할 스크립트
|
|
| labelClass {String} | types.Radio |
|
label 엘리먼트에 적용할 className. default: 'mc-check-label'
|
|
| labelStyle {Hash} | types.Radio |
|
label 엘리먼트에 적용할 style
|
|
| leftX {Number} | types.Type |
|
Element X 좌표 값
|
|
| minusColor {String|Boolean} | types.Type |
엘리먼트의 값이 minus일때 color 속성 값.
true를 지정하면 red로 설정합니다.
example
- {minusColor: 'red'}로 작성하였을 때 엘리먼트 값이 음수이면 글자색이 red로 표시됩니다.
일반적으로 style을 사용하며 Grid Package에서 간단하게 설정하기 위해 사용합니다.
|
|
| name {String} | types.Type |
|
name 속성 값
|
|
| nodeEvent {String|HTMLElement} | types.Type |
|
이벤트를 설정할 엘리먼트
일반적으로 this.own 엘리먼트에 이벤트를 설정하지만, nodeEvent를 지정하면
this.own에 이벤트를 설정하지 않고 nodeEvent에 설정합니다.
|
|
| outsideClass {String} | types.Radio |
|
outside 엘리먼트에 적용할 className
|
|
| outsideStyle {Hash} | types.Radio |
|
outside 엘리먼트에 적용할 style
|
|
| overOutClass {String} | types.Radio |
|
mouseover 이벤트가 발생했을때 radio 엘리먼트에 적용할 className
|
|
| prefix {String} | types.Radio |
|
id 접두사. default: 'mc_radio_'
|
|
| readOnly {Boolean} | types.Type |
|
readOnly 속성 값
|
|
| resetEsc {Boolean} | types.Type |
|
입력 값의 reset 여부. default:true
true: Esc key를 누르면 필드에 입력한 값을 무시하고 focus되었을 때 값으로 reset합니다.
false: 입력한 값을 유지합니다.
|
|
| showMsg {Boolean} | types.Type |
|
입력 값에서 에러가 있을 때 error message 표시 여부. default:true
true: 메시지를 표시합니다, false: 표시하지 않습니다.
|
|
| showTo {HTMLElement/String} | types.Type |
|
ShowTo 엘리먼트
|
|
| style {Hash} | types.Type |
|
style 속성
|
|
| tabIndex {Number} | types.Type |
|
tabIndex 속성 값
|
|
| text {String} | types.Radio |
|
label text
|
|
| topY {Number} | types.Type |
|
Element Y 좌표 값
|
|
| typeClass {String} | types.Type |
|
type 엘리먼트에 적용할 className
default: 'mc-types-type'
|
|
| unselectable {Boolean} | types.Type |
|
unselectable 설정 여부
|
|
| width {Number} | types.Type |
|
Element width
|
|
| Method | Component |
|---|---|
mc.types.Radio
(Hash)
|
types.Radio |
|
생성자
|
|
mainRadio
(HTMLElement/String)
|
types.Radio |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
addClass
(String)
|
types.Type |
|
this.own 엘리먼트에 className을 추가합니다.
|
|
blurEvent
(EventObject, HTMLElement, Hash, Object)
|
types.Type |
|
blur 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
changeOwn
()
|
types.Type |
|
this.own에 설정한 엘리먼트를 변경하기 위한 오버라이드 메소드입니다.
|
|
checkType
()
|
types.Type |
|
엘리먼트 값을 체크하기 위한 오버라이드용 메소드입니다.
|
|
controlEvent
(String, EventObject, HTMLElement, Hash, Object)
|
types.Type |
|
control key로 이벤트가 발생했을 때 이를 처리하기 위한 오버라이드용 메소드입니다.
|
|
createElement
()
|
types.Type |
|
템플릿을 적용하여 엘리먼트를 생성합니다.
|
|
execInnerHTML
()
|
types.Type |
|
innerHTML을 실행하여 결과를 this.own에 설정합니다.
|
|
focusEvent
(EventObject, HTMLElement, Hash, Object)
|
types.Type |
|
focus 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
getName
(String) : Object
|
types.Radio |
|
name이 같은 Radio 인스턴스를 반환합니다.
|
|
getOutside
() : HTMLElement
|
types.Type |
|
outside 엘리먼트를 반환합니다.
|
|
getOwn
() : HTMLElement
|
types.Type |
|
this.own element를 반환합니다.
|
|
getRadio
() : HTMLElement
|
types.Radio |
|
radio 엘리먼트를 반환합니다.
|
|
getValue
() : Boolean
|
types.Radio |
|
엘리먼트의 checked 상태 값을 반환합니다.
|
|
hideError
(HTMLElement)
|
types.Type |
|
표시된 메시지를 숨김니다.
|
|
hideOutside
()
|
types.Radio |
|
outside 엘리먼트의 숨김 상태로 설정합니다.
|
|
isReadOnly
() : Boolean
|
types.Type |
|
엘리먼트의 입력 가능/불가 상태를 반환합니다.
|
|
isVisible
() : Boolean
|
types.Type |
|
엘리먼트의 표시 상태를 반환합니다.
|
|
keyDownEvent
(EventObject, HTMLElement, Hash, Object)
|
types.Type |
|
keydown 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
mainType
(HTMLElement/String)
|
types.Type |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
remove
()
|
types.Radio |
|
설정한 엘리먼트와 이벤트를 삭제합니다.
|
|
removeClass
(String)
|
types.Type |
|
this.own 엘리먼트에 설정된 className을 삭제합니다.
|
|
removeEvents
()
|
types.Type |
|
설정한 이벤트를 remove합니다.
|
|
resetRadio
()
|
types.Radio |
|
랜더링할 때 설정한 값으로 체크 여부를 설정합니다.
|
|
resetValue
()
|
types.Type |
|
처음 랜더링할 때 설정한 값을 value 속성 값으로 설정합니다.
|
|
setAttr
()
|
types.Type |
|
options에 지정한 속성 값을 엘리먼트에 설정합니다.
|
|
setCheck
(String/HTMLElement Boolean)
|
types.Radio |
|
선택한 엘리먼트를 체크 상태로 설정하고 같은 name에 속한 다른 엘리먼트를 비체크 상태로 설정합니다.
|
|
setColor
()
|
types.Type |
|
defaultColor와 minusColor 속성 값을 엘리먼트에 설정합니다.
|
|
setCreateType
()
|
types.Type |
|
HTMLElement를 생성할 기준 템플릿을 설정합니다.
|
|
setDisable
(HTMLElement/String)
|
types.Type |
|
엘리먼트를 입력할 수 없는 상태로 설정합니다.
|
|
setDisplay
(Boolean)
|
types.Type |
|
엘리먼트를 표시/비표시 상태로 설정합니다.
|
|
setEnable
(HTMLElement/String)
|
types.Type |
|
엘리먼트를 입력할 수 있는 상태로 설정합니다.
|
|
setEvents
()
|
types.Type |
|
Type 클래스에서 사용하는 이벤트를 설정합니다.
|
|
setForcedValue
(Boolean/String/Number)
|
types.Radio |
|
지정한 값을 this.own에 설정합니다.
|
|
setOpenValue
()
|
types.Radio |
|
엘리먼트에 생성할 때 cache했던 값을 reset합니다.
|
|
setText
()
|
types.Type |
|
엘리먼트에 text를 설정합니다.
|
|
showError
(String, HTMLElement)
|
types.Type |
|
에러가 발생한 엘리먼트에 errorClass를 설정하고 showMsg에 true를 지정한 경우 메시지를 표시합니다.
|
|
showOutside
()
|
types.Radio |
|
outside 엘리먼트를 표시 상태로 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| blur (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
엘리먼트에 커서가 blur되었을 때 fire됩니다.
|
|
| checked (HTMLElement el, Object this) | types.Radio |
|
checked 상태로 설정될 때 fire됩니다.
|
|
| controlKey (String controlkey, EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
제어키로 keydown/keypress 이벤트가 발생했을때 fire됩니다.
|
|
| exactData (String value, Object this) | types.Type |
|
입력한 값에 에러가 없을 때 fire됩니다.
|
|
| focus (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
엘리먼트에 커서가 focus되었을 때 fire됩니다.
|
|
| hideMessage (HTMLElement tg, Object this) | types.Type |
|
message를 숨길 때 fire됩니다.
|
|
| keydown (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
엘리먼트에서 keydown 이벤트가 발생했을 때 fire됩니다.
|
|
| removeEvent (HTMLElement el, Object this) | types.Type |
|
Event를 remove했을 때 fire됩니다.
|
|
| resetValue (HTMLElement el, Object this) | types.Type |
|
처음 랜더링할 때 설정한 값을 엘리먼트에 reset할 때 fire됩니다.
|
|
| showMessage (String title, String message, HTMLElement tg, Object this) | types.Type |
|
엘리먼트에 message를 표시할 때 fire됩니다.
|
|