| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-switch></sbux-switch> |
||
| 필수 속성 | id, name, uitype | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | single | ||
| 예시) HTML 형태의 개발 |
|---|
|
<sbux-switch id="switch_single1" name="switch_single1" uitype="single" checked></sbux-label> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> $(document).ready(function(){ $('#sbArea').sbSwitch({ name : 'sbScriptNm', uitype : 'single', checked : true }); }); </script> |
| 속성명 | 설명 / 유형(s:single) | 비고 | |
|---|---|---|---|
| checked-value | 스위치 체크 상태시 value값 | s | |
| unchecked-value | 스위치 체크해제 상태시 value값 | s | |
| rounded | 스위치 코너 곡선 표시 설정 | s | |
| glow-effect | 스위치 빛 퍼짐 효과 설정 | s | |
| switch-speed | 스위치 핸들 이동속도 설정 | s | |
| switch-size | 스위치 크기 설정 | s | |
| switch-theme | 스위치 테마 설정 | s | |
| direction | 스위치 표시 방향을 설정 | s | |
| label-front-back-text | 스위치 앞뒤로 설정할 label 태그의 text를 설정 | s | |
| label-front-back-style | label-front-back-text 속성으로 설정한 label 태그에 적용할 style 속성값을 설정 | s | |
| label-front-back-class | label-front-back-text 속성으로 설정한 label 태그에 적용할 class 속성값을 설정 | s | |
| label-top-bottom-text | 스위치 위-아래로 설정할 label 태그의 text를 설정 | s | |
| label-top-bottom-style | label-top-bottom-text 속성으로 설정한 label 태그에 적용할 style 속성값을 설정 | s | |
| label-top-bottom-class | label-top-bottom-text 속성으로 설정한 label 태그에 적용할 class 속성값을 설정 | s | |
| checked-bar-style | 체크 상태일 때의 스위치 bar 부분 style 속성값을 설정 | s | |
| unchecked-bar-style | 체크해제 상태일 때의 스위치 bar 부분 style 속성값을 설정 | s | |
| checked-handle-style | 체크 상태일 때의 스위치 handle 부분 style 속성값을 설정 | s | |
| unchecked-handle-style | 체크해제 상태일 때의 스위치 handle 부분 style 속성값을 설정 | s | |
| checked-bar-class | 체크 상태일 때의 스위치 bar 부분 class 속성값을 설정 | s | |
| unchecked-bar-class | 체크해제 상태일 때의 스위치 bar 부분 class 속성값을 설정 | s | |
| checked-handle-class | 체크 상태일 때의 스위치 handle 부분 class 속성값을 설정 | s | |
| unchecked-handle-class | 체크해제 상태일 때의 스위치 handle 부분 class 속성값을 설정 | s | |
| checked-bar-text | 체크 상태일 때의 스위치 bar 부분에 설정할 text을 설정 | s | |
| unchecked-bar-text | 체크해제 상태일 때의 스위치 bar 부분에 설정할 text을 설정 | s | |
| checked-bar-image-src | 체크 상태일 때의 스위치 bar 부분에 설정할 이미지의 src 속성값을 설정 | s | |
| unchecked-bar-image-src | 체크해제 상태일 때의 스위치 bar 부분에 설정할 이미지의 src 속성값을 설정 | s | |
| checked-bar-image-style | 체크 상태일 때의 스위치 bar 부분에 설정할 이미지의 style 속성값을 설정 | s | |
| unchecked-bar-image-style | 체크해제 상태일 때의 스위치 bar 부분에 설정할 이미지의 style 속성값을 설정 | s | |
| checked-bar-image-alt | 체크 상태일 때의 스위치 bar 부분에 설정할 이미지의 alt 속성값을 설정 | s | |
| unchecked-bar-image-title | 체크해제 상태일 때의 스위치 bar 부분에 설정할 이미지의 title 속성값을 설정 | s | |
| checked-handle-icon | 체크 상태일 때의 스위치 handle 부분에 설정할 glyph-icon을 설정 | s | |
| unchecked-handle-icon | 체크해제 상태일 때의 스위치 handle 부분에 설정할 glyph-icon을 설정 | s | |
| checked-handle-image-src | 체크 상태일 때의 스위치 handle 부분에 설정할 이미지의 src 속성값을 설정 | s | |
| unchecked-handle-image-src | 체크해제 상태일 때의 스위치 handle 부분에 설정할 이미지의 src 속성값을 설정 | s | |
| checked-handle-image-style | 체크 상태일 때의 스위치 handle 부분에 설정할 이미지의 style 속성값을 설정 | s | |
| unchecked-handle-image-style | 체크해제 상태일 때의 스위치 handle 부분에 설정할 이미지의 style 속성값을 설정 | s | |
| checked-handle-image-alt | 체크 상태일 때의 스위치 handle 부분에 설정할 이미지의 alt 속성값을 설정 | s | |
| unchecked-handle-image-alt | 체크해제 상태일 때의 스위치 handle 부분에 설정할 이미지의 alt 속성값을 설정 | s | |
| checked-handle-image-title | 체크 상태일 때의 스위치 handle 부분에 설정할 이미지의 title 속성값을 설정 | s | |
| unchecked-handle-image-title | 체크해제 상태일 때의 스위치 handle 부분에 설정할 이미지의 title 속성값을 설정 | s | |
| callback-before-select | 스위치 선택이 되기 전에 호출되는 콜백함수 | s | |
| callback-after-select | 스위치 선택이 된 후에 호출되는 콜백함수 | s | |
| callback-before-refresh | SBUxMethod.refresh 메소드 실행 이전에 호출되는 콜백함수 | s | |
| callback-after-refresh | SBUxMethod.refresh 메소드 실행 이후에 호출되는 콜백함수 | s | |
| onclick | 클릭시 이벤트 | s | |
| API 명 | 설명 / 유형(s:single) | 비고 | |
|---|---|---|---|
| SBUxMethod.setSwitchStatus | 스위치 checked / uncheckd-value 로 컴포넌트를 설정 | s | |
| SBUxMethod.getSwitchStatus | 스위치 checked / unchcked 상태로 value 확인 | s | |
| SBUxMethod.changeSwitchLabel | 스위치 front-back / top-bottom 위치에 적용할 label 태그 text 변경 | s | 메소드 실행 전 label-front-back-text 혹은 label-top-bottom-text 속성 선행적용 필요 |
| SBUxMethod.refresh | 컴포넌트를 재호출 | s | |
