Home Back

egovframework

Selector

Selector의 기본 형식은 OS의 Selector 메뉴 형식에 따라 다르게 나타난다. 또한 팝업 형으로 펼침 방식을 변경 할 수 있으며 <option>의 개수에 따라 자동적으로 형태를 바꿔준다. <label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label> 과 <selector>를 감싸야 하며 <label>의 for 속성과 Selector의 id 속성 값이 동일 해야한다.

기본코드

<label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <select>를 감싸야 하며 <label> for 속성과 <selector>의 id 속성의 값이 동일 해야한다.

모양변경

Selector의 모양을 사각으로 만들고 싶다면 <select> Tag에 data-corners="false"을 추가한다

Selector의 아이콘을 변경하고 싶다면 <select> Tag에 data-icon="[icon]"을 추가한다

Selector의 아이콘의 위치를 변경하고 싶다면 <select> Tag에 data-iconpos="[right, left]"을 추가한다

Selector의 크기를 작게 하고 싶다면 <select> Tag에 data-inline="true"을 추가한다

Selector의 색상을 변경하고 싶다면 <select> Tag에 data-theme="a~g" 를 추가한다

Selector의 Shadow를 제거하고싶다면 <select> Tag에 data-shadow="false"을 추가한다

형태 변경

Selector option을 그룹화 하여 나타낼 수 있으며 기본코드에 <optgroup label="그룹이름">를 추가하여 그룹화 할 option들을 감싼다.

Selector를 눌렀을 때 option이 팝업형태와 페이지 형태로 보이도록 한다. 팝업 효과는 기본코드의 <select name> tag에 data-native-menu="false"를 추가하며 option의 길이가 브라우저 넓이를 초과할 시 자동으로 팝업 형태로 출력된다.

또한 Selector의 기본 선택을 위해서는 첫번째 <option> Tag 에 기본 option을 추가한다.

특정 option을 비활성화하고 싶다면 <option value>에 disabled="disabled"를 추가한다

선택 효과

여러개의 속성을 선택 할수 있으며 Select Tag에 multiple="multiple"을 추가 한다. 이 역시 형태 변경과 동일하게 option의 길이가 브라우저 넓이를 초과 할시 자동으로 팝업 형태로 출력된다

새로고침

Selector는 새로고침 기능이 제공된다. Javascript에 아래 코드를 추가 한 후 이벤트로 연결 해주면 지정한 option으로 돌아간다.

refresh

그룹 배치

<div>내에 <fieldset data-role="controlgroup">으로 설정하게 되면 이에 포함된 select inputs는 그룹화되고, default로 세로로 표현된다. 버튼들을 가로로 그룹화하여 배치하기 위해서는 <fieldset>에 data-type="horizontal"을 추가한다.


Switch

기본 코드

Switch는 이진 형식을 따르며 좌우로 선택 하능 하도록 되어있다. <label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <slider>를 감싸야 하며 <label>의 for 속성과 <slider>의 id 속성 값이 동일 해야한다.

색상 변경

색상 변경을 위해서는 data-theme="a~g" (switch 원형부분 색상)data-track-theme="a~g" (switch 트랙 배경 색상) 로 변경할 수 있다.

새로고침

Switch는 새로고침 기능이 제공된다. 자바 스크립트에 아래 코드를 추가 한 후 이벤트로 연결 해주면 지정한 option으로 돌아간다.

refresh

Copyright(c)2012 Ministry of Security and Public Administration.