SelectBox

수정 일자 버전 (SP2)

HTML에서 select Tag와 같은 기능을 제공하는 컴포넌트로 여러개의 항목 중 1가지를 선택 할 수 있다. 주의 사항으로는 본 컴포넌트가 브라우저에 표현 될 때는 select Tag가 아닌 최상위에 div Tag로 감싸고 하위에 복합 Tag를 이용하여 표현하고 있음으로 select Tag로 표현하고자 할 때는 별도의 설정을 통해 변경해야 한다.

Property

Property

Description

allOption

[default:false, true] 전체항목 표시 여부로 label은 "-전체-" 로 value는 "all" 로 설정된다.

animation SP2

itemtable의 animation을 설정한다.

chooseOption

[default:false,true] 선택항목 표시 여부로 chooseOptionLabel속성이 설정되어 있지 않으면 label은 "-선택-"으로 value는 ""(empty string)으로 설정된다.

chooseOptionLabel

chooseOption속성이 true로 설정 된 경우 label에 표현 될 text를 정의 한다.

class

HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의 한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.

direction

[defulat:auto, down, up] 항목의 열림 방향.

disabled

[default:false, true] HTML의 disabled속성과 동일한 기능을 제공하며 컴포넌트를 비활성화 시킨다.

emptyItem

default:false, true] 항목에 없는 value나 index가 설정되는 경우(setValue, setSelectedIndex와 같은 API로 설정) 빈 label과 빈 value(empty string)로 설정 할지에 대한 여부. 별도의 value를 설정하고자 할 때는 emptyValue속성을 이용하며 빈 value가 설정된 상태에서 item이 추가되거나 삭제되면 첫번째 항목이 선택된다.(HTML select에서 selectedIndex=-1 기능) 주의 사항으로 chooseOption속성이 true일 경우에도 label은 ""(empty string)으로 표현된다.

emptyValue

emptyItem속성이 true로 설정 된 경우 본 속성의 값으로 value를 설정한다. 주의 사항으로 emptyValue에 정의 된 값이 항목의 value와 동일하더라도 label은 ""으로 표현된다.

escape

<>&"를 HTML Escape 문자로 변환하여 화면에 표시한다.

id

컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다.

labelWidthAuto

[default:false, true] 컴포넌트에 정의 된 width을 무시하고 항목 중 text가 가장 긴 크기에 맞게 출력 할지 여부. 주의 사항으로 style의 position이 absolute로 되어있고 우측에 컴포넌트가 배치 되어있을 경우 UI가 틀어질 수 있음으로 우측에 컴포넌트가 없도록 설계되거나 컴포넌트들의 position을 relative로 설정해야한다.

nextTabID SP2

tab으로 이동시 이동할 컴포넌트 ID

optionOrder

[default:choose, all] 전체 항목과 선택 항목을 동시에 사용하는 경우 전체, 선택의 출력 순서

renderType

[default:component, auto, native, select] 본 컴포넌트가 브라우저에 표현 될 레이아웃 구조로 세부 내용은 아래와 같다.component : select Tag를 사용하지 않고 div Tag하위로 table Tag를 이용하여 항목을 표현한다.native : 주로 웹 접근성 지원을 위해 사용되는 속성으로 모든 브라우저 환경에서 완벽하게 동일한 모양과 기능을 제공하면서도 title 속성과 함께 제공한다면 접근성 지원에도 전혀 문제가 없다.select : 단순히 select Tag로만 렌더링되는 모드로서, 접근성 지원에는 완벽한 사용법이지만, 모든 브라우저에서 동일한 모양세로 보여지지 않는 문제가 발생한다.auto : 모바일 브라우저인 경우 native, 그렇지 않을 경우 component로 동작한다.

sortOption

[label,value] 항목을 label 또는 value를 기준으로 정렬 할 때 사용된다. 기본적으로 ascending으로 정렬되며 sortMethod속성에 값이 정의 된 경우 해당값으로 정렬 방법이 결정된다.

sortMethod

[default:ascending, descending] sortOption속성에서 참조하며 sortOption에 정의 된 값에 대한 정렬 방법.

submenuSize

[default:auto, fixed] labelWidthAuto속성이 true인 경우 미동작하며 목록(항목)창 크기를 label에 맞출지 기본 width로 고정 할지에 대한 설정.

tabIndex

Tab Key를 이용 한 컴포넌트의 포커스 순서로 HTML의 tabindex속성과 동일한 기능을 제공한다.

textAlign

[default:center, left, right] 항목의 text 정렬 방법.

title

HTML의 title속성과 동일한 기능으로 명시 된 값을 브라우저에서 마우스 over시 툴팁형태로 표현한다.

style

CSS 스타일 속성을 inline으로 적용한다.

visibleRowNum

표현 될 항목 행수.

브라우저 캡쳐화면

01

[selectbox 컴포넌트 사용방법]

02

단일항목을 선택할 수 있는 리스트 형태메뉴이다, 기본적으로 table 형태로 파싱되고 웹접근성이슈는 renderType을 이용해서 처리 가능하다.

그리는 방법은 디자이뷰에 있는 해당 컴포넌트를 더블 클릭하면된다.

Selectbox 설정 중 하단에 있는 All Option을 체크하면 브라우저에서 기본적으로 "전체"라는 문구가 출력되고 Choose Option을 체크하고 원하는 문자를입력하면 브라우저에서 해당문자가 출력된다.

03

04

visibleRowNum 속성은 표시할 item의 갯수를 설정할 수 있다. default 값은 5 이고 all 로 설정 시 모든item을 보여준다(브라우저 overflow 주의!!).

CSS Overriding

[renderType=component]

05

No

Class

Description

1

w2selectbox

w2selectbox는 웹스퀘어 엔진에서 정의된 클래스입니다, 브라우저가 파싱할때 자동으로 부여 돼는 컴포넌트의 최상의 클래스 입니다.

2

w2selectbox_table_main

selectbox의 테이블 레이아웃 최상위 클래스 입니다.

3

w2selectbox_row

selectbox의 테이블 레이아웃인 Label버튼 전체를 감싸고 있는 TR의 클래스 입니다.

4

w2selectbox_col_label

selectbox의 테이블 레이아웃인 Label버튼을 감싸고 있는 TD의 클래스 입니다.

5

w2selectbox_label

selectbox의 Label버튼을 정의하는 클래스 입니다.

6

w2selectbox_col_button

selectbox의 우측 삼각형 버튼에 관한 클래스 입니다.

7

w2table_sb_w2table

selectbox의 Choose Option과 관련된 Item table의 최상위 클래스 입니다.

8

w2table_sb_main

selectbox의 Choose Option과 관련된 레이아웃 테이블의 최상위 클래스 입니다.

9

w2table_sb_row

selectbox의 Choose Option과 관련된 item table의 TR 클래스를 지정하는 클래스 입니다.

10

w2table_sb_col

selectbox의 Choose Option과 관련된 item table의 TD 클래스를 지정하는 클래스 입니다.

11

  • inline

websquare의 style 편집기에서 해당 style을 직접 수정합니다.

[renderType=native]

06

No

Class

Description

1

w2selectbox_native

w2selectbox_native는 웹스퀘어 엔진에서 정의된 클래스입니다, 브라우저가 파싱할때 자동으로 부여 돼는 컴포넌트의 최상의 클래스 입니다.또한 renderType이 native로 설정됐을때 자동 추가돼는 클래스 입니다.

2

fixedWidth

selectbox 가로사이즈를 픽스 시킬때 추가돼는 클래스 입니다.

3

w2selectbox_native_innerDiv

renderType이 native로 설정됐을때 최상위 클래스 안쪽 Div태그에 자동지정돼는 레이아웃 클래스 입니다.

4

w2selectbox_native_select

renderType이 native로 설정됐을때 select태그에 자동 지정돼는 태그 입니다.

5

  • inline

websquare의 style 편집기에서 해당 style을 직접 수정합니다.

[renderType=select]

07

No

Class

Description

1

w2selectbox_select

w2selectbox_select는 웹스퀘어 엔진에서 정의된 클래스입니다, 브라우저가 파싱할때 자동으로 부여 돼는 컴포넌트의 최상의 클래스 입니다.또한 renderType이 select로 설정됐을때 자동 추가돼는 클래스 입니다.

5

  • inline

websquare의 style 편집기에서 해당 style을 직접 수정합니다.

[renderType=auto]

08

No

Class

Description

1

w2selectbox

w2selectbox는 웹스퀘어 엔진에서 정의된 클래스입니다, 브라우저가 파싱할때 자동으로 부여 돼는 컴포넌트의 최상의 클래스 입니다.

2

w2selectbox_table_main

selectbox의 테이블 레이아웃 최상위 클래스 입니다.

3

w2selectbox_row

selectbox의 테이블 레이아웃인 Label버튼 전체를 감싸고 있는 TR의 클래스 입니다.

4

w2selectbox_col_label

selectbox의 테이블 레이아웃인 Label버튼을 감싸고 있는 TD의 클래스 입니다.

5

w2selectbox_label

selectbox의 Label버튼을 정의하는 클래스 입니다.

6

w2selectbox_col_button

selectbox의 우측 삼각형 버튼에 관한 클래스 입니다.

7

w2table_sb_w2table

selectbox의 Choose Option과 관련된 Item table의 최상위 클래스 입니다.

8

w2table_sb_main

selectbox의 Choose Option과 관련된 레이아웃 테이블의 최상위 클래스 입니다.

9

w2table_sb_row

selectbox의 Choose Option과 관련된 item table의 TR 클래스를 지정하는 클래스 입니다.

10

w2table_sb_col

selectbox의 Choose Option과 관련된 item table의 TD 클래스를 지정하는 클래스 입니다.

11

  • inline

websquare의 style 편집기에서 해당 style을 직접 수정합니다.

주의사항 및 Tip