WebSquare.uiplugin.tabContainer

tab형태의 화면을 구성할때 사용하는 컴포넌트 입니다.

Type

uiplugin

Property Summary

alwaysDraw: contents안의 내용을 미리 그려줄지 여부
class: tabContainer의 class 속성
contentsClass: 모든 contents에 적용할 class
disableChildComponent: tabContainer 하위의 component에 disabled속성을 적용할지 여부
id: tabContainer 컴포넌트의 id
selectedIndex: 선택된 tab의 index
tabDefaultCenterImageClass: tab의 기본적인 중앙 이미지 class
tabDefaultCenterImageStyle: tab의 기본적인 중앙 이미지 style
tabDefaultLeftImageClass: tab의 기본적인 왼쪽 이미지 class
tabDefaultLeftImageStyle: tab의 기본적인 왼쪽 이미지 style
tabDefaultRightImageClass: tab의 기본적인 오른쪽 이미지 class
tabDefaultRightImageStyle: tab의 기본적인 오른쪽 이미지 style
tabHoverCenterImageClass: tab의 마우스가 올라갔을때 중앙 이미지 class
tabHoverCenterImageStyle: tab의 위에 마우스가 올라갔을때 중앙 이미지 style
tabHoverLeftImageClass: tab의 위에 마우스가 올라갔을때 왼쪽 이미지 class
tabHoverLeftImageStyle: tab의 위에 마우스가 올라갔을때 왼쪽 이미지 style
tabHoverRightImageClass: tab의 마우스가 올라갔을때 오른쪽 이미지 class
tabHoverRightImageStyle: tab의 위에 마우스가 올라갔을때 오른쪽 이미지 style
tabPosition: tab의 위치를 자동으로 해줄지 사용자가 absolute로 해줄지 여부
tabSelectedCenterImageClass: tab이 선택되었을때 중앙 이미지 class
tabSelectedCenterImageStyle: tab의 선택되었을때 중앙 이미지 style
tabSelectedLeftImageClass: tab이 선택되었을때 왼쪽 이미지 class
tabSelectedLeftImageStyle: tab의 선택되었을때 왼쪽 이미지 style
tabSelectedRightImageClass: tab이 선택되었을때 오른쪽 이미지 class
tabSelectedRightImageStyle: tab의 선택되었을때 오른쪽 이미지 style

Event Summary

onbeforeselect: tab이 선택되기 전에 발생
onchange: tab이 바뀐 경우에 발생
ontabclick: tab이 클릭된 경우 발생

Method Summary

addClass( className ): 컴포넌트에 className의 이름을 가진 class를 추가합니다
addTab( id , options , options.label , options.frameMode , options.src ): id를 아이디로 가진 tab을 추가합니다.
bind( type , function ): 컴포넌트의 이벤트를 동적으로 할당합니다
changeClass( oldClassName , newClassName ): 컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 치환합니다
deleteTab( idx ): 해당 idx의 tab을 찾아서 삭제합니다
disableTab( idx ): 해당 idx의 tab을 찾아서 disable시킵니다
enableTab( idx ): 해당 idx의 tab을 찾아서 enable시킵니다
focus( ): 객체에 focus를 줍니다
getCount( ): tab의 전체 갯수를 반환합니다
getDisabled( ): 현재 설정되어있는 disabled 속성을 반환합니다
getGeneratedComponent( id ): 동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다
getGeneratedIndex( ): generator 반복부에서 해당 index를 반환합니다
getID( ): 웹스퀘어 컴포넌트의 id를 반환합니다
getLabelText( idx ): idx로 tab을 찾아서 tab의 label을 반환합니다
getOpacity( ): 컴포넌트의 Opacity 값을 반환합니다
getPluginName( ): 웹스퀘어 컴포넌트의 pluginName을 반환합니다
getPosition( positionName ): 컴포넌트의 위치 값을 반환합니다
getReadOnly( ): 현재 설정되어있는 readOnly 속성을 반환합니다
getSelectedID( ): 선택된 tab의 id를 반환합니다
getSelectedIndex( ): 선택된 tab의 index를 반환합니다
getSize( sizeName ): 컴포넌트의 크기 값을 반환합니다
getStyle( propertyName ): 컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다
getStyleValue( style ): 컴포넌트의 style중에서 입력받은 style의 값을 반환합니다
getTitle( ): component의 title 속성을 가져온다
getUserData( key ): 설정된 사용자 임의의 데이터를 반환 합니다.
getWindow( idx ): Tab Index에 해당하는 window content를 반환한다.
hasClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다
hide( ): 컴포넌트를 화면에서 보이지 않도록 숨깁니다
init( options , options.excludePlugin , options.excludeId , options.fireEvent ): 컴포넌트 하위의 옵션에 해당하는 컴포넌트를 제외한 컴포넌트의 값을 초기화 시킵니다
invoke( funcName , param , options , options.excludePlugin , options.excludeId ): 컴포넌트 하위의 모든 컴포넌트의 함수를 동일하게 호출시켜주는 함수입니다.
removeClass( className ): 컴포넌트에 className의 이름을 가진 class를 삭제합니다
setDisabled( disabled ): 객체의 disabled 속성을 제어합니다
setLabelText( idx , label ): idx로 tab을 찾아서 tab의 label을 바꿔줍니다
setOpacity( value ): 컴포넌트의 Opacity 값을 설정합니다
setPosition( left , top , mode ): 컴포넌트의 위치를 설정합니다
setReadOnly( readOnly ): 객체의 readOnly 속성을 제어합니다
setSelectedIndex( idx ): tab의 index를 인자로 받아 그 index로 tab을 선택해줍니다
setStyle( propertyName , value ): 컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다
setUserData( key , value ): 사용자 임의의 데이터를 객체에 설정합니다
show( displayType ): 컴포넌트를 화면에 보이도록 설정합니다
toggleClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다
trigger( type , array ): 컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다
unbind( type , function ): 컴포넌트의 이벤트를 동적으로 제거합니다
visible( flag ): 컴포넌트의 style 중 visibility 값을 설정합니다

Property Detail

alwaysDraw: contents안의 내용을 미리 그려줄지 여부
class: tabContainer의 class 속성
contentsClass: 모든 contents에 적용할 class
disableChildComponent: tabContainer 하위의 component에 disabled속성을 적용할지 여부
id: tabContainer 컴포넌트의 id
selectedIndex: 선택된 tab의 index
tabDefaultCenterImageClass: tab의 기본적인 중앙 이미지 class
tabDefaultCenterImageStyle: tab의 기본적인 중앙 이미지 style
tabDefaultLeftImageClass: tab의 기본적인 왼쪽 이미지 class
tabDefaultLeftImageStyle: tab의 기본적인 왼쪽 이미지 style
tabDefaultRightImageClass: tab의 기본적인 오른쪽 이미지 class
tabDefaultRightImageStyle: tab의 기본적인 오른쪽 이미지 style
tabHoverCenterImageClass: tab의 마우스가 올라갔을때 중앙 이미지 class
tabHoverCenterImageStyle: tab의 위에 마우스가 올라갔을때 중앙 이미지 style
tabHoverLeftImageClass: tab의 위에 마우스가 올라갔을때 왼쪽 이미지 class
tabHoverLeftImageStyle: tab의 위에 마우스가 올라갔을때 왼쪽 이미지 style
tabHoverRightImageClass: tab의 마우스가 올라갔을때 오른쪽 이미지 class
tabHoverRightImageStyle: tab의 위에 마우스가 올라갔을때 오른쪽 이미지 style
tabPosition: tab의 위치를 자동으로 해줄지 사용자가 absolute로 해줄지 여부
tabSelectedCenterImageClass: tab이 선택되었을때 중앙 이미지 class
tabSelectedCenterImageStyle: tab의 선택되었을때 중앙 이미지 style
tabSelectedLeftImageClass: tab이 선택되었을때 왼쪽 이미지 class
tabSelectedLeftImageStyle: tab의 선택되었을때 왼쪽 이미지 style
tabSelectedRightImageClass: tab이 선택되었을때 오른쪽 이미지 class
tabSelectedRightImageStyle: tab의 선택되었을때 오른쪽 이미지 style

Event Detail

onbeforeselect

tab이 선택되기 전에 발생

Parameter
name	type	description
selectedIndex	Number:Y	현재 선택된 인덱스
index	Number:Y	사용자가 선택하려는 인덱스

Sample

ev:event="onbeforeselect(selectedIndex, index)" 로 이벤트의 인자가 정의된 예: tab1에서 tab2를 선택. <script ev:event="onbeforeselect(selectedIndex, index)" type="javascript"><![CDATA[ output1.setValue(selectedIndex +"->" +index); return true; // 탭이동한다. (return false;: 탭이동이 없음.) ]]></script> output1의 표현되는 값은 0 -> 1 이며, tab2로 이동.

onchange

tab이 바뀐 경우에 발생

ontabclick

tab이 클릭된 경우 발생

Method Detail

addClass( className )

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

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

Sample

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

addTab( id , options , options.label , options.frameMode , options.src )

id를 아이디로 가진 tab을 추가합니다.
같은 id의 tab이 존재하면 추가가 아니라 선택합니다.

Parameter
name	type	required	description
id	String	Y	새로만들 tab의 아이디
options	Object	Y	새로만들 tab의 옵션
options.label	String	Y	: tab의 라벨 텍스트.
options.frameMode	String	Y	: iframe.
options.src	String	Y	: contents안 쪽의 내용을 가지고있는 파일 주소.

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, var options = { label : "addTab", frameMode : "iframe", src : "/addTabContent.xml" }; tabContainer1.addTab('tab4', options); 4번째 tab이 생성된다.

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 값 변경 시 . 브라우저 이벤트가 아니고 웹스퀘어 엔진 내부의 이벤트로 등록된다.

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로 변경.

deleteTab( idx )

해당 idx의 tab을 찾아서 삭제합니다.

Parameter
name	type	required	description
idx	Number	Y	index or id

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer1.deleteTab(0); 첫번째 tab(tab1)이 삭제된다.

disableTab( idx )

해당 idx의 tab을 찾아서 disable시킵니다.

Parameter
name	type	required	description
idx	Number	Y	disable시킬 tab의 인덱스

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer1.disableTab(0); 첫번째 tab(tab1)이 비활성화된다. 만약 첫번째 tab(tab1)이 선택되어 있는 경우, 두번째 tab(tab2)이 선택된다.

enableTab( idx )

해당 idx의 tab을 찾아서 enable시킵니다.

Parameter
name	type	required	description
idx	Number	Y	enable시킬 tab의 인덱스

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, 첫번째 tab이 비활성화 되어 있다. tabContainer1.enableTab(0); 첫번째 tab(tab1)이 활성화된다.

focus( )

객체에 focus를 줍니다.

getCount( )

tab의 전체 갯수를 반환합니다.

Return
type	description
Number	tab의 전체 갯수

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, var returnValue = tabContainer1.getCount(); returnValue는 3이다.

getDisabled( )

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

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

Sample

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

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)이다.

getLabelText( idx )

idx로 tab을 찾아서 tab의 label을 반환합니다.

Parameter
name	type	required	description
idx	Number	Y	tab의 index

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, 각 tab의 value는 1 ,2 ,3 이고 tabContainer의 두번째 tab(tab2)가 선택되어 있을 때. var returnValue = tabContainer1.getLabelText(); returnValue는 2이다.

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이다.

getSelectedID( )

선택된 tab의 id를 반환합니다.

Return
type	description
String	선택된 tab의 id

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer의 두번째 tab(tab2)가 선택되어 있을 때. var returnValue = tabContainer1.getSelectedID(); returnValue는 tab2이다.

getSelectedIndex( )

선택된 tab의 index를 반환합니다.

Return
type	description
Number	선택된 tab의 index

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer의 두번째 tab(tab2)가 선택되어 있을 때. var returnValue = tabContainer1.getSelectedIndex(); returnValue는 1이다.

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( )

component의 title 속성을 가져온다.

Return
type	description
String	component의 title 속성값.

Sample

var title = componentId.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이다.

getWindow( idx )

Tab Index에 해당하는 window content를 반환한다.
index가 없으며 현재 선택된 Tab의 window content를 반환한다.

Parameter
name	type	required	description
idx	Number	N	Tab Index

Return
type	description
Object	window

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();

init( options , options.excludePlugin , options.excludeId , options.fireEvent )

컴포넌트 하위의 옵션에 해당하는 컴포넌트를 제외한 컴포넌트의 값을 초기화 시킵니다. (calendar, checkbox, grid, input, inputCalendar, multiselect, radio, selectbox, textarea)

Parameter
name	type	required	description
options	Object	N	초기화 동작에서 제외되는 컴포넌트를 설정하는 값의 객체(excludePlugin, excludeId을 속성으로 지정)
options.excludePlugin	String	N	: 초기화 기능에서 제외되는 컴포넌트의 명칭. 복수 개를 정의할 경우, 공백을 구분자로 한다.
options.excludeId	String	N	: 초기화 기능에서 제외되는 컴포넌트 ID. 복수 개를 정의할 경우, 공백을 구분자로 한다.
options.fireEvent	Boolean	N	: 초기화로 인한 값 변동에 따라 이벤트 발생 여부로 기본값은 false. 이벤트 발생을 막는다.

Sample

tabContainer1.init(); tabContainer 컴포넌트 하위에 있는 초기화가 가능한 컴포넌트에 대하여 초기화. var options = { excludePlugin : "grid radio", excludeId : "input1 calendar1", fireEvent : true }; tabContainer1.init(options); tabContainer 컴포넌트 하위에 있는 grid, radio, id가 input1인 input, id가 calendar1인 calendar 컴포넌트를 제외한 컴포넌트 가운데 초기화가 가능한 컴포넌트에 대해 초기화하며, 값 변경에 따른 이벤트를 발생시킨다.

invoke( funcName , param , options , options.excludePlugin , options.excludeId )

컴포넌트 하위의 모든 컴포넌트의 함수를 동일하게 호출시켜주는 함수입니다.
예) tabContainer 이하의 모든 컴포넌트에 setValue를 하고 싶을 경우

Parameter
name	type	required	description
funcName	String	Y	호출하려는 함수의 이름
param	Object	N	호출하려는 함수에 넘겨질 인자 혹은 그 인자를 반환하는 함수 객체
options	Object	N	함수 호출에서 제외되는 컴포넌트를 설정하는 값의 객체.
options.excludePlugin	String	N	: 함수 호출에서 제외되는 컴포넌트의 명칭. 복수 개를 정의할 경우, 공백을 구분자로 한다.
options.excludeId	String	N	: 함수 호출에서 제외되는 컴포넌트 ID. 복수 개를 정의할 경우, 공백을 구분자로 한다.

Sample

tabContainer1.invoke("setValue", "WebSquare"); tabContainer 하위의 모든 컴포넌트에 componentId.setValue("WebSquare"); 한것과 같다. 만약 하위의 컴포넌트에 setValue 함수를 가지지 않는 컴포넌트(예:grid)가 있다면 에러. function createValue(obj){ var pluginName = obj.getPluginName(); // 컴포넌트의 종류. var id = obj.getID(); // 컴포넌트의 id. ... } var options = { excludePlugin : "grid calendar", excludeId : "radio1" }; tabContainer1.invoke("setValue", createValue, options); tabContainer 하위의 grid와 calendar, id가 radio1인 컴포넌트를 제외하고 componentId.setValue(사용자 정의 함수(createValue)를 호출하여 반환된 리턴 값); 한것과 같다.

removeClass( className )

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

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

Sample

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

setDisabled( disabled )

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

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

Sample

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

setLabelText( idx , label )

idx로 tab을 찾아서 tab의 label을 바꿔줍니다.

Parameter
name	type	required	description
idx	Number	Y	label을 바꿀 tab의 인덱스
label	String	Y	바꿔줄 label값

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer1.setLabelText(0, "TAB_1"); 첫번째 tab(tab1)의 텍스트를 TAB_1로 설정한다.

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);
입력가능한 컴포넌트의 경우 입력이 불가능한 상태가 된다.

setSelectedIndex( idx )

tab의 index를 인자로 받아 그 index로 tab을 선택해줍니다.

Parameter
name	type	required	description
idx	Number	Y	선택하려는 index

Sample

예: (id가 tab1, tab2, tab3) tab이 3개 있는 tabContainer의 경우, tabContainer1.setSelectedIndex(0); tabContainer의 첫번째 tab(tab1) contents가 보인다. tab2, tab3의 contents는 보이지 않는다.

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 와 같이 로그에 경고문구가 쌓인다.

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에 등록된 모든 이벤트를 제거

visible( flag )

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

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