CheckBox 클래스의 주요 기능은 아래와 같습니다.
1. CheckBox 엘리먼트를 생성하고 checked 상태를 설정합니다.
2. CheckBox는 하나씩 생성할 수 있으며 다수를 한 번에 생성할 수 있습니다.
- CheckBox 클래스: 하나만 생성합니다.
- CheckBoxGroup 클래스: 다수를 일괄 생성합니다.
* 형태1
var box = new mc.types.CheckBox({
text: '체크 박스',
checked: true,
value: 'sports',
showTo: 'showArea'
})
var box1 = new mc.types.CheckBox({
text: 'Elglish',
value: 'book',
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.CheckBox |
|
component code : 'checkbox'
|
|
| 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.CheckBox |
|
HTMLElement를 생성하는 default 형태
default: {tag: 'input', type: 'checkbox', id: '', autocomplete: 'off'}
|
|
| 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.CheckBox |
|
id 접두사. default: 'mc_checkbox_'
|
|
| 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.CheckBox
(Hash)
|
types.CheckBox |
|
생성자
|
|
mainCheckBox
(HTMLElement/String)
|
types.CheckBox |
|
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 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
getCheckBox
() : HTMLElement
|
types.CheckBox |
|
checkBox 엘리먼트를 반환합니다.
|
|
getLabel
() : HTMLElement
|
types.CheckBox |
|
label 엘리먼트를 반환합니다.
|
|
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.CheckBox |
|
엘리먼트의 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 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
mainRadio
(HTMLElement/String)
|
types.Radio |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mainType
(HTMLElement/String)
|
types.Type |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
remove
()
|
types.Radio |
|
설정한 엘리먼트와 이벤트를 삭제합니다.
|
|
removeClass
(String)
|
types.Type |
|
this.own 엘리먼트에 설정된 className을 삭제합니다.
|
|
removeEvents
()
|
types.CheckBox |
|
CheckBox 클래스에서 설정했던 이벤트를 해제합니다.
|
|
resetRadio
()
|
types.Radio |
|
랜더링할 때 설정한 값으로 체크 여부를 설정합니다.
|
|
resetValue
()
|
types.Type |
|
처음 랜더링할 때 설정한 값을 value 속성 값으로 설정합니다.
|
|
setAttr
()
|
types.Type |
|
options에 지정한 속성 값을 엘리먼트에 설정합니다.
|
|
setCheck
(Boolean)
|
types.CheckBox |
|
checked 상태를 설정합니다.
|
|
setCheckValue
()
|
types.CheckBox |
|
checked 상태에 따라 값을 설정합니다.
|
|
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.CheckBox |
|
CheckBox 클래스에서 사용하는 이벤트를 설정합니다.
|
|
setForcedValue
(Boolean/String)
|
types.CheckBox |
|
지정한 값을 this.own에 설정합니다.
|
|
setOpenValue
()
|
types.Radio |
|
엘리먼트에 생성할 때 cache했던 값을 reset합니다.
|
|
setText
()
|
types.Type |
|
엘리먼트에 text를 설정합니다.
|
|
showError
(String, HTMLElement)
|
types.Type |
|
에러가 발생한 엘리먼트에 errorClass를 설정하고 showMsg에 true를 지정한 경우 메시지를 표시합니다.
|
|
showOutside
()
|
types.Radio |
|
outside 엘리먼트를 표시 상태로 설정합니다.
|
|
toggleCheck
()
|
types.CheckBox |
|
현재 상태의 반대로 checked 상태를 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| blur (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
엘리먼트에 커서가 blur되었을 때 fire됩니다.
|
|
| checked (EventObject e, HTMLElement el, Object this) | types.CheckBox |
|
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됩니다.
|
|
| Examples | |
|---|---|
| CheckBox | |
|
CheckBox
|
|