WebSquare.uiplugin.inputCalendar

input과 달력 icon으로 구성된 날짜를 입력하는 컴포넌트입니다. input에서 직접 날짜를 입력하거나, 달력 icon을 클릭해 달력을 띄워서 직접 선택할수도 있습니다.

Type

uiplugin

Property Summary

alt: 접근성 지원용 속성으로 달력아이콘의 alt에 들어갈 문자열
calendarClass: 달력에 적용될 skin의 class
calendarImage: 달력버튼의 이미지파일의 경로
calendarImageOver: 달력버튼에 마우스가 올라갔을 때 이미지파일의 경로
calendarValueType: calendar표시방법
cancelButtonShow: 취소 버튼 표시 여부
caption: 접근성 지원용 속성
class: inputCalendar class
delimiter: 연도,월,일 사이에 들어갈 문자열
displayFormat: delimiter를 표함하여 날짜를 표시하는 format
displaymessage: 검증 결과 메세지 표시 여부
fixedDate: calendar의 날짜를 선택 하더라도, 지정된 날짜(현재일)로 설정 할지 여부
focusOnDateSelect: 모바일에서 달력의 날짜 선택시 input에 focus를 줄지 여부
footerDiv: calendar의 하단 부분을 table이 아닌 div로 표현할지 여부
handleIconClick: 달력 아이콘 클릭시 처리하는 콜백 함수
id: inputCalendar id
intervalMinute: calendarValueType="yearMonthDateTime" 일 경우 1분단위가 아닌 입력단위의 selectboxMinute
invalidMessageFunc: 검증실패시 표시할 메세지 함수명
ioFormat: 키보드 입력/inputClaneder getValue시 처리되는 format ('y','M','d','H','m') 문자만 허용한다
mandatory: 필수항목여부
maxHour: calendar에 표시되는 최대시간 ( 0보다 작거나 23보다 큰 숫자를 입력 할 경우 maxHour 는 23 )
maxYear: calendar에 표시되는 최대연도
minHour: calendar에 표시되는 최소시간 ( 0보다 작거나 23보다 큰 숫자를 입력 할 경우 minHour 는 0 )
minYear: calendar에 표시되는 최소연도
monthNames: 월을 표시하는 방법(콤마(,)를 구분자로 하여 나열한다
outsideClickEvent: calendar 컴퍼넌트 calendarValueTYpe = "yearMonth" 시 년/월 변경영역 밖에 클릭시 이벤트 발생 여부
readOnly: inputCalendar readOnly 속성
ref: inputCalendar ref 정보
renderDiv: calendar를 document를 table로 표현할지 div로 표현할지 선택(false = table, true = div 형식)
rightAlign: calendar를 오른쪽으로 정렬하여 표시함
summary: 접근성 지원용 속성
tabIndex: inputCalendar tabIndex 속성
title: 접근성 지원용 속성
toolTip: inputCalendar toolTip 기능
useCalendarTabIndex: useAnchor = false인 경우에도 달력에 tab키로 포커스 이동을 가능하게 할지에 대한 여부
validator: 유효성 체크 함수명
visibleRowNum: 캘린더 내부 year/month selectbox 표시 항목행수, native일 경우 지원하지 않습니다
weekStartsOn: calendar에 표시되는 한주의 시작 요일(0:일, 1:월, 2:화, 3:수, 4:목, 5:금, 6:토)
wmode: wmode 사용 여부
yearSuffix: 연도 숫자 뒤에 들어갈 문자열(빈값을 나타내고자 할 경우, $blank를 사용한다

Event Summary

onblur: 포커스를 잃었을 때 발생
onchange: 입력되거나 선택된 값을 바꿀 때 발생
onclick: 마우스로 inputcalendar를 클릭했을 때 발생
ondateselect: 날짜 선택 시 발생
onfocus: 포커스를 얻었을 때 발생
oniconclick: 달력 아이콘이 클릭되면 발생
onkeydown: 키보드에서 키를 눌렀을 때 발생
onkeypress: 키보드에서 키를 눌렀을 때(누르고 있는 동안에도) 발생
onkeyup: 키보드에서 키를 눌렀다 놓았을 때 발생

Method Summary

addClass( className ): 컴포넌트에 className의 이름을 가진 class를 추가합니다
bind( type , function ): 컴포넌트의 이벤트를 동적으로 할당합니다
blur( ): input에 blur를 줍니다
changeClass( oldClassName , newClassName ): 컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 치환합니다
focus( ): input의 focus를 줍니다
getDefaultDate( ): 현재 컴포넌트에 설정된 defaultDate를 반환합니다.
getDisabled( ): 현재 설정되어있는 disabled 속성을 반환합니다
getDisplayFormat( ): 현재 컴포넌트에 설정된 displayFormat을 반환합니다
getFormattedValue( format ): format으로 format된 value를 반환한다.
getGeneratedComponent( id ): 동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다
getGeneratedIndex( ): generator 반복부에서 해당 index를 반환합니다
getID( ): 웹스퀘어 컴포넌트의 id를 반환합니다
getIoFormat( ): 현재 컴포넌트에 설정된 ioFormat을 반환합니다
getOpacity( ): 컴포넌트의 Opacity 값을 반환합니다
getPluginName( ): 웹스퀘어 컴포넌트의 pluginName을 반환합니다
getPosition( positionName ): 컴포넌트의 위치 값을 반환합니다
getReadOnly( ): 현재 설정되어있는 readOnly 속성을 반환합니다
getSize( sizeName ): 컴포넌트의 크기 값을 반환합니다
getStyle( propertyName ): 컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다
getStyleValue( style ): 컴포넌트의 style중에서 입력받은 style의 값을 반환합니다
getTitle( ): inputCalendar의 title 속성을 가져온다
getUserData( key ): 설정된 사용자 임의의 데이터를 반환 합니다.
getValue( ): InputCalendar 객체에 설정된 value를 반환합니다. delimiter가 제거된 숫자만 반환합니다.
hasClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다
hide( ): 컴포넌트를 화면에서 보이지 않도록 숨깁니다
removeClass( className ): 컴포넌트에 className의 이름을 가진 class를 삭제합니다
select( ): input을 select합니다
setDefaultDate( dateStr ): 컴포넌트에 설정된 defaultDate을 넘어온 인자로 설정합니다.
setDisabled( disabled ): 객체의 disabled 속성을 제어합니다
setDisplayFormat( format ): 컴포넌트에 설정된 displayFormat을 넘어온 인자로 설정합니다.
setFormat( ioFormat , displayFormat ): 컴포넌트에 설정된 ioFormat, displayFormat을 넘어온 인자로 설정하여 적용합니다.
setOpacity( value ): 컴포넌트의 Opacity 값을 설정합니다
setPosition( left , top , mode ): 컴포넌트의 위치를 설정합니다
setReadOnly( readOnly ): 객체의 readOnly 속성을 제어합니다
setRef( 변경할 ): 바인딩 된 ref 경로를 동적으로 변경합니다
setSkin( skin ): calendar의 skin을 동적으로 변경합니다
setStyle( propertyName , value ): 컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다
setUserData( key , value ): 사용자 임의의 데이터를 객체에 설정합니다
setValue( value ): value를 세팅하고 model에 반영합니다
show( displayType ): 컴포넌트를 화면에 보이도록 설정합니다
toggleClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다
trigger( type , array ): 컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다
unbind( type , function ): 컴포넌트의 이벤트를 동적으로 제거합니다
validate( ): 현재 설정된 validate설정에 따라 valid여부를 반환합니다.
visible( flag ): 컴포넌트의 style 중 visibility 값을 설정합니다

Property Detail

alt: 접근성 지원용 속성으로 달력아이콘의 alt에 들어갈 문자열
calendarClass: 달력에 적용될 skin의 class
calendarImage: 달력버튼의 이미지파일의 경로
calendarImageOver: 달력버튼에 마우스가 올라갔을 때 이미지파일의 경로
calendarValueType: calendar표시방법
cancelButtonShow: 취소 버튼 표시 여부
caption: 접근성 지원용 속성. calendar table에 들어갈 caption
class: inputCalendar class
delimiter: 연도,월,일 사이에 들어갈 문자열
displayFormat: delimiter를 표함하여 날짜를 표시하는 format
displaymessage: 검증 결과 메세지 표시 여부
fixedDate: calendar의 날짜를 선택 하더라도, 지정된 날짜(현재일)로 설정 할지 여부
focusOnDateSelect: 모바일에서 달력의 날짜 선택시 input에 focus를 줄지 여부
footerDiv: calendar의 하단 부분을 table이 아닌 div로 표현할지 여부
handleIconClick: 달력 아이콘 클릭시 처리하는 콜백 함수
id: inputCalendar id
intervalMinute: calendarValueType="yearMonthDateTime" 일 경우 1분단위가 아닌 입력단위의 selectboxMinute
invalidMessageFunc: 검증실패시 표시할 메세지 함수명
ioFormat: 키보드 입력/inputClaneder getValue시 처리되는 format ('y','M','d','H','m') 문자만 허용한다.
mandatory: 필수항목여부
maxHour: calendar에 표시되는 최대시간 ( 0보다 작거나 23보다 큰 숫자를 입력 할 경우 maxHour 는 23 )
maxYear: calendar에 표시되는 최대연도
minHour: calendar에 표시되는 최소시간 ( 0보다 작거나 23보다 큰 숫자를 입력 할 경우 minHour 는 0 )
minYear: calendar에 표시되는 최소연도
monthNames: 월을 표시하는 방법(콤마(,)를 구분자로 하여 나열한다.)
outsideClickEvent: calendar 컴퍼넌트 calendarValueTYpe = "yearMonth" 시 년/월 변경영역 밖에 클릭시 이벤트 발생 여부
readOnly: inputCalendar readOnly 속성
ref: inputCalendar ref 정보
renderDiv: calendar를 document를 table로 표현할지 div로 표현할지 선택(false = table, true = div 형식)
rightAlign: calendar를 오른쪽으로 정렬하여 표시함.
summary: 접근성 지원용 속성. calendar table에 들어갈 summary
tabIndex: inputCalendar tabIndex 속성
title: 접근성 지원용 속성
toolTip: inputCalendar toolTip 기능
useCalendarTabIndex: useAnchor = false인 경우에도 달력에 tab키로 포커스 이동을 가능하게 할지에 대한 여부
validator: 유효성 체크 함수명
visibleRowNum: 캘린더 내부 year/month selectbox 표시 항목행수, native일 경우 지원하지 않습니다.
weekStartsOn: calendar에 표시되는 한주의 시작 요일(0:일, 1:월, 2:화, 3:수, 4:목, 5:금, 6:토)
wmode: wmode 사용 여부. wmode가 true이면 object 태그보다 상위에 보이도록 하는 설정으로 권장하지는 않는다.(object 태그의 wmode를 사용하는 것을 권장)
yearSuffix: 연도 숫자 뒤에 들어갈 문자열(빈값을 나타내고자 할 경우, $blank를 사용한다.)

Event Detail

onblur

포커스를 잃었을 때 발생

onchange

입력되거나 선택된 값을 바꿀 때 발생

onclick

마우스로 inputcalendar를 클릭했을 때 발생

ondateselect

날짜 선택 시 발생

Parameter
name	type	description
dateStr	String	선택한 날짜의 문자열
dateObj	Object	선택한 날짜의 Date 객체

Sample

ev:event="ondateselect( dateStr , dateObj )" 로 이벤트의 인자가 정의된 예: 2012년 1월 1일을 선택. output1.setValue(dateStr +", " + dateObj.toDateString()); 20120101, Sun Jan 1 2012

onfocus

포커스를 얻었을 때 발생

oniconclick

달력 아이콘이 클릭되면 발생

onkeydown

키보드에서 키를 눌렀을 때 발생

onkeypress

키보드에서 키를 눌렀을 때(누르고 있는 동안에도) 발생

onkeyup

키보드에서 키를 눌렀다 놓았을 때 발생

Method Detail

addClass( className )

컴포넌트에 className의 이름을 가진 class를 추가합니다.

Parameter
name	type	required	description
className	String	Y	추가하고 싶은 class의 이름

Sample

componentId.addClass("selected"); // 컴포넌트에 selected 라는 class를 추가.

bind( type , function )

컴포넌트의 이벤트를 동적으로 할당합니다.

Parameter
name	type	required	description
type	String	Y	동적으로 할당할 이벤트의 이름
function	Function	Y	동적으로 할당할 이벤트의 핸들러 ㅎ마수

Sample

* | input1.bind("onclick", function(e){ alert(input1.getValue();})); // input1 클릭 시 이벤트 발생. 브라우저 이벤트로 등록
* | input1.bind("onchange", function(e){ alert(input1.getValue();})); // input1 값 변경 시 . 브라우저 이벤트가 아니고 웹스퀘어 엔진 내부의 이벤트로 등록된다.

blur( )

input에 blur를 줍니다.

Sample

inputCalendar1.blur();

changeClass( oldClassName , newClassName )

컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 치환합니다.

Parameter
name	type	required	description
oldClassName	String	Y	element에서 삭제할 class의 이름
newClassName	String	Y	element에서 추가할 class의 이름

Sample

componentId.changeClass("selected","default"); // 컴포넌트에 selected 라는 class를 default라는 class로 변경.

focus( )

input의 focus를 줍니다.

Sample

inputCalendar1.focus(); Input에 날짜 문자열이 있는 경우, 마지막 문자 다음에 포커스가 위치한다.

getDefaultDate( )

현재 컴포넌트에 설정된 defaultDate를 반환합니다.
(defaultDate : Input이 비어있는 경우, Calendar에 표시될 기본 날짜. defalutDate 미설정시, 현재 시스템 날짜가 Calendar에 표시된다.)

Return
type	description
String	현재 설정된 defaultDate

Sample

예: defaultDate = "20101225" var returnValue = inputCalendar1.getDefaultDate(); returnValue는 20101225이다. defaultDate를 미설정시, 빈문자열을 가진다.

getDisabled( )

현재 설정되어있는 disabled 속성을 반환합니다.

Return
type	description
Boolean	현재 설정되어있는 disabled 속성

Sample

var returnValue = componentId.getDisabled(); // returnValue는 true혹은 false이다.

getDisplayFormat( )

현재 컴포넌트에 설정된 displayFormat을 반환합니다.

Return
type	description
String	현재 설정된 displayFormat

Sample

예: 2011.12.25 var returnValue = inputCalendar1.getDisplayFormat(); returnValue는 yyyy.MM.dd이다.

getFormattedValue( format )

format으로 format된 value를 반환한다.
format 미입력시 컴포넌트의 displayFormat으로 적용된 value를 리턴한다.

Parameter
name	type	required	description
format	String	N	format

Return
type	description
String	format이 적용된 value

Sample

예: var returnValue = inputCalendar1.getFormattedValue("MMddyyyy"); returnValue는 12252012이다.

getGeneratedComponent( id )

동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다.

Parameter
name	type	required	description
id	String	N	찾아오려는 컴퍼넌트 id

Return
type	description
Object	동일한 id에 속한 다른 컴퍼넌트 객체

Sample

다음과 같이 사용할 수 있다. var content = this.getGeneratedComponent("content1"); content.setValue("");

getGeneratedIndex( )

generator 반복부에서 해당 index를 반환합니다.

Return
type	description
Number	generator 반복부에서 해당 index.

getID( )

웹스퀘어 컴포넌트의 id를 반환합니다.

Return
type	description
String	웹스퀘어 컴포넌트의 id

Sample

다음과 같이 사용할 수 있다. <script ev:event="onclick" type="javascript"><![CDATA[ var returnValue = this.getID(); ]]></script> returnValue는 컴포넌트의 id(예: input1)이다.

getIoFormat( )

현재 컴포넌트에 설정된 ioFormat을 반환합니다.

Return
type	description
String	현재 설정된 ioFormat

Sample

예: var returnValue = inputCalendar1.getIoFormat(); returnValue는 yyyyMMdd이다.

getOpacity( )

컴포넌트의 Opacity 값을 반환합니다.

Return
type	description
Integer	Opacity 값

Sample

var returnValue = componentId.getOpacity(); // returnValue는 0~1사이의 실수이다.

getPluginName( )

웹스퀘어 컴포넌트의 pluginName을 반환합니다.

Return
type	description
String	웹스퀘어 컴포넌트의 pluginName

Sample

다음과 같이 사용할 수 있다. <script ev:event="onclick" type="javascript"><![CDATA[ var returnValue = this.getPluginName(); ]]></script> returnValue는 컴포넌트의 종류(예: input, checkbox ...)이다.

getPosition( positionName )

컴포넌트의 위치 값을 반환합니다.

Parameter
name	type	required	description
positionName	String	Y	위치 값의 종류('left'이거나 'top')

Return
type	description
Number	컴포넌트의 위치 값

Sample

var returnValue = componentId.getPosition("left"); // returnValue는 픽셀 단위의 위치 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다.

getReadOnly( )

현재 설정되어있는 readOnly 속성을 반환합니다.

Return
type	description
Boolean	현재 설정되어있는 readOnly 속성

Sample

var returnValue = componentId.getReadOnly(); // returnValue는 true혹은 false이다.

getSize( sizeName )

컴포넌트의 크기 값을 반환합니다.

Parameter
name	type	required	description
sizeName	String	Y	크기 값의 종류. szieName의 종류는 다음을 참고.

Return
type	description
Number	컴포넌트의 크기 값

Sample

var returnValue = componentId.getSize("width"); // returnValue는 픽셀 단위의 크기 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다.

getStyle( propertyName )

컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다.

Parameter
name	type	required	description
propertyName	String	Y	반환할 style의 property 이름

Return
type	description
String	객체의 style 속성 값

Sample

var returnValue = componentId.getStyle("width"); // returnValue는 width에 대한 픽셀 단위, 또는 % 단위가 된다.

getStyleValue( style )

컴포넌트의 style중에서 입력받은 style의 값을 반환합니다.

Parameter
name	type	required	description
style	String	Y	style중에서 사용자가 구하고 싶은 값

Return
type	description
String	style중에서 사용자가 입력한 style의 값(색을 반환하는 경우에는 색HexCode로 반환)

getTitle( )

inputCalendar의 title 속성을 가져온다.

Return
type	description
String	inputCalendar의 title 속성값.

Sample

var title = inputCalendar1.getTitle();

getUserData( key )

설정된 사용자 임의의 데이터를 반환 합니다.
xml상에 설정된 사용자 값도 가져올 수 있습니다.

Parameter
name	type	required	description
key	String	Y	임의 데이터의 키

Return
type	description
String	key 값에 해당하는 데이터의 값

Sample

componentId.setUserData("data", "WebSquare"); var returnValue = componentId.getUserData("data"); returnValue는 WebSquare이다. <xf:input id="input1" style="position: absolute ;left:0px;top:0px;width: 100px;height: 20px;" data2="WEBSQUARE">... 와 같이 xml상에 설정된 사용자 정의 값도 가져올 수 있다. var returnValue = componentId.getUserData("data2"); returnValue는 WEBSQUARE이다.

getValue( )

InputCalendar 객체에 설정된 value를 반환합니다. delimiter가 제거된 숫자만 반환합니다.
ex) 2007/11/08 -> 20071108

Return
type	description
String	객체의 Value

Sample

현재 설정된 날짜 예: 2011.12.25 (dilimiter = "." 사용) var returnValue = inputCalendar1.getValue(); returnValue는 20111225이다.

hasClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다.

Parameter
name	type	required	description
className	String	Y	조사할 className

Return
type	description
Boolean	컴포넌트가 className의 class를 가지고 있는지 여부

Sample

var returnValue = componentId.hasClass("selected"); // returnValue는 true 또는 false.
selected라는 class를 가지고 있으면 true, 아니면 false를 반환한다.

hide( )

컴포넌트를 화면에서 보이지 않도록 숨깁니다.

Sample

componentId.hide();

removeClass( className )

컴포넌트에 className의 이름을 가진 class를 삭제합니다.

Parameter
name	type	required	description
className	String	Y	삭제하고 싶은 class의 이름

Sample

componentId.removeClass("selected"); // 컴포넌트에 selected 라는 class를 삭제.

select( )

input을 select합니다.

Sample

inputCalendar1.select(); Input의 날짜 문자열을 drag하여 선택한 상태가 된다.

setDefaultDate( dateStr )

컴포넌트에 설정된 defaultDate을 넘어온 인자로 설정합니다.
(defaultDate : Input이 비어있는 경우, Calendar에 표시될 기본 날짜. defalutDate 미설정시, 현재 시스템 날짜가 Calendar에 표시된다.)

Parameter
name	type	required	description
dateStr	String	Y	설정하려는 date 문자열

Sample

inputCalendar1.setDefaultDate("20101225"); defaultDate를 20101225로 설정한다.

setDisabled( disabled )

객체의 disabled 속성을 제어합니다. Disabled 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력합니다.

Parameter
name	type	required	description
disabled	Boolean	Y	Disabled 속성을 활성화 시키려면 true 비활성화 시키려면 false

Sample

componentId.setDisabled(true);
입력가능한 컴포넌트의 경우 입력이 불가능한 상태가 된다.

setDisplayFormat( format )

컴포넌트에 설정된 displayFormat을 넘어온 인자로 설정합니다.
displayFormat은 컴포넌트에 표시 되는 값에 마스킹을 하는 역할을 합니다.

Parameter
name	type	required	description
format	String	Y	새로 설정할 displayFormat

Sample

예: 2011.12.25 inputCalendar1.setDisplayFormat("yyyy/MM/dd"); 날짜 표현 포맷이 변경된다. 2011/12/25 로 표현된다.

setFormat( ioFormat , displayFormat )

컴포넌트에 설정된 ioFormat, displayFormat을 넘어온 인자로 설정하여 적용합니다.
displayFormat은 컴포넌트에 표시 되는 값에 마스킹을 하는 역할을 합니다.

Parameter
name	type	required	description
ioFormat	String	Y	새로 설정할 ioFormat
displayFormat	String	Y	새로 설정할 displayFormat

Sample

예: inputCalendar1.setFormat("MMddyyyy", "MM/dd/yyyy"); 날짜 표현 포맷이 변경된다. 12252012로 입력받고, 12/25/2012 로 표현된다.

setOpacity( value )

컴포넌트의 Opacity 값을 설정합니다.

Parameter
name	type	required	description
value	Integer	Y	설정할 Opacity 값 (0과 1사이의 실수)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

컴포넌트의 위치를 설정합니다.

Parameter
name	type	required	description
left	Integer	Y	left의 값
top	Integer	Y	top의 값
mode	String	N	absolute이면 x,y로 현재 값을 설정하고 delta이면 현재 값에 x,y값만큼을 더해서 설정. (기본모드는 absolute)

Sample

componentId.setPosition(100, 100, "absolute");

setReadOnly( readOnly )

객체의 readOnly 속성을 제어합니다. readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력합니다.

Parameter
name	type	required	description
readOnly	Boolean	Y	readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false

Sample

componentId.setReadOnly(true);
입력가능한 컴포넌트의 경우 입력이 불가능한 상태가 된다.

setRef( 변경할 )

바인딩 된 ref 경로를 동적으로 변경합니다.

Parameter
name	type	required	description
변경할	String	Y	ref의 XPath

setSkin( skin )

calendar의 skin을 동적으로 변경합니다.

Parameter
name	type	required	description
skin	String	Y	사용할 skin이름. 현재 class1,class2,class3,class4,class5 제공

Sample

calendar1.setSkin("class2");

setStyle( propertyName , value )

컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다.

Parameter
name	type	required	description
propertyName	String	Y	바꾸고 싶은 style 값의 이름
value	String	Y	설정할 style의 값

Sample

예: 컴포넌트 스타일 width를 변경하고자 하는 경우. componentId.setStyle("width", 100); 픽셀 단위를 기본으로 하며, componentId.setStyle("width", "100px"); 과 동일하다. %단위의 표현을 하고자 하면 componentId.setStyle("width", "100%"); 로 명시하여 준다.

setUserData( key , value )

사용자 임의의 데이터를 객체에 설정합니다.

Parameter
name	type	required	description
key	String	Y	임의 데이터의 키
value	String	Y	임의 데이터의 값

Sample

공통 API로 모든 컴포넌트에서 사용 가능하다. componentId.setUserData("data", "WebSquare");
객체에 설정이 가능한 key가 아닌 경우, key 설정이 불가능하다. componentId.setUserData("title", "WebSquare");
!!!WARNING - [title] can't define as UserData 와 같이 로그에 경고문구가 쌓인다.

setValue( value )

value를 세팅하고 model에 반영합니다.

Parameter
name	type	required	description
value	String	Y	선택하려는 항목의 value

Sample

예: 속성 delimiter = "." 으로 되어 있다. inputCalendar1.setValue("20120101"); Calendar는 2012년 1월 1일로 이동하며, Input은 설정된 delimiter에 따라 2012.01.01로 표시된다.

show( displayType )

컴포넌트를 화면에 보이도록 설정합니다.

Parameter
name	type	required	description
displayType	String	N	display의 속성 값. (block, inline, none, “”)

Sample

componentId.show(); // display 속성이 "block"이 된다. componentId.show(""); // class에 적용된 display 속성 값을 다시 복구.

toggleClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.

Parameter
name	type	required	description
className	String	Y	조사할 className

Sample

componentId.toggleClass("selected");
selected라는 class가 존재하면 해당 class를 제거한다. selected라는 class가 존재하지 않으면 추가한다.

trigger( type , array )

컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다.

Parameter
name	type	required	description
type	String	Y	발생시킬 이벤트 이름
array	Object	N	이벤트 핸들러에 전달할 파라미터 배열

Sample

* | input1.trigger("onclick"); // input1에 onclick이벤트를 발생시킨다.
* | input1.trigger("onchange", [1,2]); // input1에 onchange이벤트를 발생시키고 핸들러 함수에 (1,2) 인자를 전달하여 호출한다.

unbind( type , function )

컴포넌트의 이벤트를 동적으로 제거합니다.

Parameter
name	type	required	description
type	String	N	제거할 이벤트의 이름. 생략할 경우 해당 컴포넌트의 모든 이벤트를 제거한다.
function	Function	N	제거할 이벤트의 핸들러 함수. 생략할 경우 해당 이벤트 type으로 등록된 모든 핸들러 함수를 제거한다.

Sample

* | input1.unbind("onclick", func1); // input1에 등록된 onclick이벤트 함수 중에 func1 이벤트 핸들러를 제거
* | input1.unbind("onchange"); // input1에 등록된 onchange이벤트 핸들러 함수를 모두 제거
* | input1.unbind(); // input1에 등록된 모든 이벤트를 제거

validate( )

현재 설정된 validate설정에 따라 valid여부를 반환합니다.
속성 dateValidCheck="true"로 설정된 경우, 해당 날짜의 유효성(length, year, month, date 범위 및 윤년 등)을 체크합니다.

Return
type	description
Boolean	입력 값이 유효한 값일 경우 true, 그렇지 않으면 false를 반환한다.

Sample

예: mandatory = "true" 로 필수입력 항목인 경우, var returnValue = inputCalendar1.validate(); Input에 값이 없는 경우에 returnValue는 false이고, Input에 입력 값이 존재하는 경우 returnValue는 true이다.

visible( flag )

컴포넌트의 style 중 visibility 값을 설정합니다. flag가 참이면 "visible", 거짓이면 "hidden"을 설정합니다.

Parameter
name	type	required	description
flag	Boolean	Y	visibility 값을 설정할 값(참이면 "visible", 거짓이면 "hidden"을 설정)