Home Back

Selector

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

기본코드

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

모양변경

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

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

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

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

Selctor의 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

Switch

기본 코드

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

새로고침

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

refresh

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