Button 클래스의 주요 기능은 다음과 같습니다.
1. outside 엘리먼트를 생성하여 button과 관련된 엘리먼트를 통합합니다.
2. 버튼 텍스트 및 이미지를 설정합니다
3. 이벤트를 설정하고 이를 제어합니다.
- click, mouseover, mouseout, mousedown, mouseup
4. 브라우저의 한글 텍스트 위치 차이를 최소화합니다.
5. <form> 처리와 연계한 기능을 제공합니다.
1) <form>의 목적에 따라 submit, reset 타입을 지정할 수 있습니다.
2) native 형태로 <form> 처리를 하려면 상기 타입을 buttonType에 지정합니다.
3) 비동기 방법으로 통신하려면 XMLHttpRequest를 생성하는 등의 처리를 해야하므로
native 타입을 사용할 수 없습니다.
비동기 통신을 하려면 buttonType에 button을 지정하고 아래의 프로퍼티에 true를 설정해야 합니다.
- createData: 신규 입력한 데이터를 서버로 전송합니다.
- updateData: 수정 입력한 데이터를 서버로 전송합니다.
- getData: 서버에서 데이터를 가져오는 일련의 처리를 실행합니다.
- resetData: 입력/출력된 값을 지우고 초기값을 설정합니다.
- deleteData: 삭제 목적으로 데이터를 서버로 전송합니다.
* 형태1 : 이미지를 지정하지 않는 경우
var btn = new mc.types.Button({
text: '저장',
showTo: 'showArea'
});
* 형태2 : 이미지를 지정한 경우
var btn = new mc.types.Button({
text: '저장',
image: 'save.gif',
imageAlign: 'left',
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}
|
|
| buttonClass {String} | types.Button |
|
button 엘리먼트에 적용할 className. Default: 'mc-button-bmo'
|
|
| buttonClick {Function} | types.Button |
|
click 이벤트가 발생했을 때 실행할 함수
일반적으로 fire된 이벤트를 받아서 처리하지만 버튼 click은 <form>과 같이 다른 클래스에서 사용하는
빈도수가 높으므로 별도의 방법으로 처리한 것입니다.
|
|
| buttonStyle {Hash} | types.Button |
|
button 엘리먼트에 적용할 style
|
|
| buttonType {String} | types.Button |
button type. button/submit/reset을 지정합니다.
button: 이벤트를 발생시킬 수 있는 일반적인 버튼입니다.
비동기 통신 방법으로 처리하려면 'button'을 지정해야 합니다.
submit: Form 클래스에서 사용하며 <form>을 native 방법으로 전송합니다.
reset: Form 클래스에서 사용하며 <form>에 입력한 값을 전부 지웁니다.
|
|
| ccode {String} | types.Button |
|
component code : 'button'
|
|
| centerClass {String} | types.Button |
|
center 엘리먼트에 적용할 className
|
|
| charsOnly {Boolean} | types.Type |
|
제어키의 keydown 이벤트 발생 여부. default:false
true: 제어키(Control key)로 인해 keydown 이벤트가 발생했을 때 이를 처리하기 위한
메소드를 실행하지 않으며 custom 이벤트도 fire시키지 않습니다.
제어키에 대해서는 mc.controlKeys를 참조하세요.
false: 제어키를 체크하지 않습니다.
|
|
| 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 값이 있으면 오버라이드하게 됩니다.
|
|
| createData {Boolean} | types.Button |
|
true: 신규 입력한 데이터 처리를 위해 서버로 전송합니다.
|
|
| 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.Button |
|
button 엘리먼트를 생성하기 위한 default 템플릿
default: {tag: 'button', type: 'button'}
|
|
| deleteData {Boolean} | types.Button |
|
true: 삭제 목적으로 페이지의 데이터를 서버로 전송합니다.
|
|
| disabled {Boolean} | types.Type |
|
disabled 설정 여부
true: 엘리먼트를 disabled 상태로 설정
|
|
| disabledClass {String} | types.Type |
|
엘리먼트가 disabled 상태로 설정할 때 적용할 className
default: 'mc-types-disabled'
|
|
| downUpClass {String} | types.Button |
|
mousedown 이벤트가 발생했을 때 outside에 적용할 className
mouseup 이벤트가 발생하면 엘리먼트에서 downUpClass를 제거합니다.
|
|
| errorClass {String} | types.Type |
|
에러가 발생했을 때 엘리먼트에 적용할 className.
default: 'mc-types-error'
|
|
| focusClass {String} | types.Button |
|
focus 이벤트가 발생했을때 button 엘리먼트에 설정할 className
blur 이벤트가 발생하면 엘리먼트에서 focusClass를 제거합니다.
|
|
| height {String} | types.Type |
|
Element Height
|
|
| id {String} | types.Type |
|
엘리먼트 #id
#id를 지정하지 않으면 MethodChain에서 this.prefix + '_일련번호' 형태로 부여합니다.
|
|
| image {String} | types.Button |
|
background-image로 사용할 image 파일 이름
'background-image': "url(image)" 형태로 style에 설정됩니다.
width는 제한이 없으나 height는 16픽셀 이하이어야 합니다.
image width가 16픽셀을 초과할 경우에는 padding으로 간격을 조정할 수 있습니다.
|
|
| imageAlign {String} | types.Button |
|
버튼 텍스트를 중심으로 image 파일의 표시 위치. default: left
left: 좌측, right: 우측
|
|
| imageClass {Hash} | types.Button |
|
image에 적용할 className
|
|
| imageTitle {String} | types.Button |
|
title 속성에 설정할 image title
image 파일을 지정하고 imageTitle을 지정하지 않으면 button text가 설정됩니다.
|
|
| innerHTML {String} | types.Type |
|
innerHTML로 Element에 적용할 스크립트
|
|
| leftClass {String} | types.Button |
|
buttone left에 적용할 className
default: 'mc-button-left'
|
|
| 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.Button |
|
outside 엘리먼트에 적용할 className
default: 'mc-button-outside'
|
|
| outsideStyle {Hash} | types.Button |
|
outside 엘리먼트에 적용할 style
|
|
| overOutClass {String} | types.Button |
|
mouseover 이벤트가 발생했을 때 outside에 적용할 className
mouseout 이벤트가 발생하면 outside 엘리먼트에서 overOutClass가 제거됩니다.
default: 'mc-button-over'
|
|
| padding {number} | types.Button |
|
이미지와 버튼 텍스트 간격. default: 7
픽셀은 지정하지 않고 숫자로 값만 지정
|
|
| prefix {String} | types.Button |
|
id 접두사. default: 'mc_button_'
|
|
| readOnly {Boolean} | types.Type |
|
readOnly 속성 값
|
|
| resetData: {Boolean} | types.Button |
|
true: 페이지의 데이터를 reset합니다.
|
|
| resetEsc {Boolean} | types.Type |
|
입력 값의 reset 여부. default:true
true: Esc key를 누르면 필드에 입력한 값을 무시하고 focus되었을 때 값으로 reset합니다.
false: 입력한 값을 유지합니다.
|
|
| rightClass {String} | types.Button |
|
button right에 적용할 className
default: 'mc-button-right'
|
|
| scope {Object} | types.Button |
|
buttonClick에 지정한 함수의 실행 오브젝트
buttonClick에 함수를 지정한 경우에 지정합니다.
|
|
| showMsg {Boolean} | types.Type |
|
입력 값에서 에러가 있을 때 error message 표시 여부. default:true
true: 메시지를 표시합니다, false: 표시하지 않습니다.
|
|
| showTo {HTMLElement/String} | types.Type |
|
ShowTo 엘리먼트
|
|
| space {number} | types.Button |
|
버튼 간격. default: 0
버튼 좌측에 엘리먼트가 있는 경우 버튼과 엘리먼트의 간격을 줄 때 사용합니다.
px를 사용하지 않고 숫자로 값만 지정합니다.
|
|
| style {Hash} | types.Type |
|
style 속성
|
|
| submit {Boolean} | types.Button |
|
submit 버튼 여부. default: false
true: 전통적인 방법으로 <form>을 submit할 때 true를 지정합니다.
click 이벤트가 발생하였을 때 submit이 true이면 <form>을 전송하게 됩니다.
FormType 클래스에서 사용합니다.
|
|
| tabIndex {Number} | types.Type |
|
tabIndex 속성 값
|
|
| text {String} | types.Button |
|
버튼 명칭. default: ' '
|
|
| topY {Number} | types.Type |
|
Element Y 좌표 값
|
|
| typeClass {String} | types.Type |
|
type 엘리먼트에 적용할 className
default: 'mc-types-type'
|
|
| unselectable {Boolean} | types.Type |
|
unselectable 설정 여부
|
|
| updateData {Boolean} | types.Button |
|
true: 수정 입력한 데이터 처리를 위해 서버로 전송합니다.
|
|
| width {Number} | types.Button |
|
버튼 width
width를 지정하지 않으면 내부에서 자동으로 계산합니다.
|
|
| Method | Component |
|---|---|
mc.types.Button
(Hash)
|
types.Button |
|
생성자
|
|
mainButton
(HTMLElement/String)
작성방법은 개요상세를 참조하세요
|
types.Button |
|
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 이벤트를 처리하기 위한 오버라이드용 메소드입니다.
|
|
getAlign
()
|
types.Button |
|
options.imageAlign 값에 따라 className을 outside에 설정합니다.
|
|
getCenter
() : HTMLElement
|
types.Button |
|
button 엘리먼트를 포함하고 있는 wrapper 엘리먼트를 반환합니다.
|
|
getOutside
() : HTMLElement
|
types.Type |
|
outside 엘리먼트를 반환합니다.
|
|
getOwn
() : HTMLElement
|
types.Type |
|
this.own element를 반환합니다.
|
|
getType
() : String
|
types.Button |
|
버튼 타입을 반환합니다.
|
|
getValue
() : String
|
types.Type |
|
엘리먼트에 입력한 값을 반환합니다.
|
|
hideError
(HTMLElement)
|
types.Type |
|
표시된 메시지를 숨김니다.
|
|
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.Button |
|
설정한 엘리먼트와 이벤트를 삭제합니다.
|
|
removeClass
(String)
|
types.Type |
|
this.own 엘리먼트에 설정된 className을 삭제합니다.
|
|
removeEvents
()
|
types.Button |
|
Button 클래스에서 사용하는 이벤트를 해제합니다.
|
|
resetValue
()
|
types.Type |
|
처음 랜더링할 때 설정한 값을 value 속성 값으로 설정합니다.
|
|
setAttr
()
|
types.Type |
|
options에 지정한 속성 값을 엘리먼트에 설정합니다.
|
|
setButtonClick
(Function, Object)
|
types.Button |
|
click 이벤트가 발생했을 때 호출할 함수를 지정합니다.
|
|
setButtonImage
(File, String)
|
types.Button |
|
버튼 이미지와 className을 설정합니다.
|
|
setButtonText
(String)
|
types.Button |
|
버튼 명칭을 설정합니다.
|
|
setColor
()
|
types.Type |
|
defaultColor와 minusColor 속성 값을 엘리먼트에 설정합니다.
|
|
setCreateType
()
|
types.Type |
|
HTMLElement를 생성할 기준 템플릿을 설정합니다.
|
|
setDisable
(HTMLElement/String)
|
types.Type |
|
엘리먼트를 입력할 수 없는 상태로 설정합니다.
|
|
setDisplay
(Boolean)
|
types.Button |
|
Button을 표시하거나 숨김니다.
|
|
setEnable
(HTMLElement/String)
|
types.Type |
|
엘리먼트를 입력할 수 있는 상태로 설정합니다.
|
|
setEvents
()
|
types.Button |
|
Button 클래스에서 사용하는 이벤트를 설정합니다.
|
|
setForcedValue
(String/Number)
|
types.Type |
|
지정한 값을 this.own에 설정합니다.
|
|
setImage
(String, String)
|
types.Button |
|
background-image를 설정하고 이미지 text를 지정한 경우 이를 설정합니다.
|
|
setImageClass
(Array/String)
|
types.Button |
|
엘리먼트에 image class를 설정합니다.
|
|
setImageTitle
(String)
|
types.Button |
|
image title 속성 값을 설정합니다.
|
|
setOutsideWidth
()
|
types.Button |
|
outside에 속한 차일드 엘리먼트를 width를 합산하여 outside에 설정합니다.
|
|
setPadding
(Number)
|
types.Button |
|
this.padding 값만큼 이미지와 텍스트 간격을 띄웁니다.
|
|
setSpace
()
|
types.Button |
|
버튼 왼쪽의 엘리먼트와 지정한 값만큼 간격을 둡니다.
|
|
setText
()
|
types.Type |
|
엘리먼트에 text를 설정합니다.
|
|
setType
(String)
|
types.Button |
|
버튼 타입을 설정합니다.
|
|
setWidth
(Number/String)
|
types.Button |
|
버튼의 width를 설정합니다.
|
|
showError
(String, HTMLElement)
|
types.Type |
|
에러가 발생한 엘리먼트에 errorClass를 설정하고 showMsg에 true를 지정한 경우 메시지를 표시합니다.
|
|
| Custom Event | Component |
|---|---|
| blur (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼에서 커서가 blur되었을 때 fire됩니다.
|
|
| click (String buttontype, EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼을 click했을 때 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.Button |
|
버튼에 커서가 focus되었을 때 fire됩니다.
|
|
| hideMessage (HTMLElement tg, Object this) | types.Type |
|
message를 숨길 때 fire됩니다.
|
|
| keydown (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Type |
|
엘리먼트에서 keydown 이벤트가 발생했을 때 fire됩니다.
|
|
| mousedown (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼에 mouse를 down했을 때 fire됩니다.
|
|
| mouseout (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼에서 mouse가 out했을 때 fire됩니다.
|
|
| mouseover (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼에 mouse를 over했을 때 fire됩니다.
|
|
| mouseup (EventObject e, HTMLElement tg, Hash opts, Object this) | types.Button |
|
버튼에서 mouse를 up했을 때 fire됩니다.
|
|
| removeEvent (HTMLElement el, Object this) | types.Type |
|
Event를 remove했을 때 fire됩니다.
|
|
| resetValue (HTMLElement el, Object this) | types.Type |
|
처음 랜더링할 때 설정한 값을 엘리먼트에 reset할 때 fire됩니다.
|
|
| showButton (Boolean show, HTMLElement el, Object this) | types.Button |
|
버튼이 숨김 또는 표시 상태로 변경되었을 때 fire됩니다.
|
|
| showMessage (String title, String message, HTMLElement tg, Object this) | types.Type |
|
엘리먼트에 message를 표시할 때 fire됩니다.
|
|
| typechanged (String type, HTMLElement button, Object this) | types.Button |
|
버튼 타입이 변경되었을 때 fire됩니다.
|
|
| Examples | |
|---|---|
| image | |
|
텍스트, image, 이미지 위치등을 지정하여 버튼을 생성합니다.
|
|