| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-radio></sbux-radio> |
||
| 필수 속성 | id, name, uitype | 고정형 | |
| 변동형 | jsondata-ref | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | normal | ||
| 데이터형 | 고정형 | 고정된 데이터시 사용 | |
| 변동형 | JSON Data 사용 가변적인 데이터시 사용 |
||
| 예시) HTML 형태의 개발 - 고정형 |
|---|
|
<script> function evt_onclick(args){ alert("항목 선택시 이벤트 :" + args); } </script> <sbux-radio id="idxRdo_norm_1" name="rdo_norm" uitype="normal" text="빨강" value="red" text-left-padding="5px" text-right-padding="20px" style="font-weight:bold;" ></sbux-radio> <sbux-radio id="idxRdo_norm_2" name="rdo_norm" uitype="normal" text="초록" value="green" text-left-padding="5px" text-right-padding="20px" onclick="evt_onclick(rdo_norm)"></sbux-radio> <sbux-radio id="idxRdo_norm_3" name="rdo_norm" uitype="normal" text="파랑" value="blue" text-left-padding="5px" style="color:blue;" checked></sbux-radio> |
| 예시) HTML 형태의 개발 - 변동형 |
|---|
|
<script> var radioJsonData = [ { text : "빨강" , value : "red" , style : "font-weight:bold;", checked : "checked" }, { text : "초록" , value : "green" }, { text : "파랑" , value : "blue" , onclick : "evt_onclick(rdo_json)", style : "color:blue;"} ]; </script> <sbux-radio id="idxRdo_json" name="rdo_json" uitype="normal" jsondata-ref = "radioJsonData" jsondata-text = "text" jsondata-value = "value" text-left-padding="5px" text-right-padding="25px"></sbux-radio> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> var SBUxData = [ { text : "SBUx Radio1" }, { text : "SBUx Radio2" }, { text : "SBUx Radio3" } ]; $(document).ready(function(){ $('#sbArea').sbRadio({ name : 'sbScriptNm', uitype : 'normal', jsondataRef : 'SBUxData' }); }); </script> |
| 속성명 | 설명 / 데이터형(s:고정형, f:변동형) | 비고 | |
|---|---|---|---|
| checked | 선택 | s | |
| required | 필수 입력 지정 | s | f | |
| disabled | 비활성 | s | f | |
| readonly | 읽기 전용 | s | f | |
| group-id | 그룹으로 묶일 id | s | f | |
| text | 우측 표시 문구 | s | |
| value | 선택시 value | s | |
| text-left-padding | 우측 표시 문구 좌측 간격 | s | f | |
| text-right-padding | 우측 표시 문구 우측 간격 | s | f | |
| jsondata-ref | json data 참조 변수명 json data 구조 = [{text:'소프트',value:'Soft',style:'color:blue;',checked:'checked'} ,{text:'보울',value:'Bowl',style:'color:red;',disabled:'disabled'}] |
f | |
| jsondata-text | json data 내 text 참조 키명 | f | |
| jsondata-value | json data 내 value 참조 키명 | f | |
| direction | 가로 또는 세로 방향 | f | |
| grid-id | 연동되는 그리드 id | f | |
| grid-direction | 데이터의 진행 방향 | f | |
| grid-status | 그리드 행의 상태 변화 | f | |
| grid-event | 연동시점 그리드 이벤트 | f | valuechanged(기본값), undefined(이벤트 발생안함) |
| grid-ref | 그리드의 Column Reference 값 | f | grid 컬럼 ref 가 name 가 다를때 |
| grid-jit | 입력되는 즉시 반영 | f | |
| callback-before-refresh | SBUxMethod.refresh 시 재구성 전 호출 callback 함수 | s | f | |
| callback-after-refresh | SBUxMethod.refresh 시 재구성 후 호출 callback 함수 | s | f | |
| onclick | 클릭시 이벤트 | s | f | |
| onchange | 값 변경시의 이벤트 | s | f | |
| API 명 | 설명 / 데이터형(s:고정형,f:변동형) | 비고 | |
|---|---|---|---|
| SBUxMethod.set | 값을 입력 | s | f | |
| SBUxMethod.get | 저장된 값 호출 | s | f | |
| SBUxMethod.attr | 속성값 변경 개별적인 disabled 시 객체로 입력 (SBUxMethod.attr('모델명', {disabled:true,target:'0,2'}) 또는 (SBUxMethod.attr('모델명', {disabled:true,target:['0','2']}) |
s | f | readonly, disabled |
| SBUxMethod.refresh | 재호출 | s | f | |
| SBUxMethod.hide | 감추기 | s | f | |
| SBUxMethod.show | 보이기 | s | f | |
| SBUxMethod.getAllData | 전체데이터 가져오기 | s | f | |
| SBUxMethod.clearAllData | 전체데이터 지우기 | s | f | |
| SBUxMethod.getGroupData | group-id 로 묶여진 컴포넌트 데이터 가져오기 | s | f | |
| SBUxMethod.clearGroupData | group-id 로 묶여진 컴포넌트 데이터 지우기 | s | f | |
| SBUxMethod.changeGroupAttr | group-id 로 묶여진 컴포넌트 데이터 속성변경 | s | f | readonly,disabled |
| SBUxMethod.showGroup | group-id 로 묶여진 컴포넌트 보이기 | s | f | |
| SBUxMethod.hideGroup | group-id 로 묶여진 컴포넌트 감추기 | s | f | |
| SBUxMethod.refreshGroup | group-id 로 묶여진 컴포넌트 refresh | s | f | |
| SBUxMethod.render | <sbux-xxx tag >랜더링 | s | f | |
| SBUxMethod.validateRequired | required 속성이 있는 컴포넌트 체크 | s | f | |
