| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-checkbox></sbux-checkbox> |
||
| 필수 속성 | 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-checkbox id="idxChkbox_norm_1" name="chkbox_norm.red" uitype="normal" text="빨강" text-left-padding="5px" text-right-padding="25px" true-value="YES" false-value="NO" style="color:red;" required></sbux-checkbox> <sbux-checkbox id="idxChkbox_norm_2" name="chkbox_norm.green" uitype="normal" text="초록" text-left-padding="5px" text-right-padding="10px" checked></sbux-checkbox> <sbux-checkbox id="idxChkbox_norm_3" name="chkbox_norm.blue" uitype="normal" text="파랑" text-left-padding="5px" style="font-weight:bold;" onclick="evt_onclick(chkbox_norm)"></sbux-checkbox> |
| 예시) HTML 형태의 개발 - 변동형 |
|---|
|
<script> var checkboxJsonData = [ { text : "빨강" , truevalue : "YES" , falsevalue: "NO" , style : "color:red;", checked : "checked" }, { text : "초록" , truevalue : "yes" , falsevalue: "no" , onclick : "evt_onclick(chkbox_json)" }, { text : "파랑" , truevalue : "1" , falsevalue: "0" } ]; </script> <sbux-checkbox id="idxChkbox_json" name="chkbox_json" uitype="normal" jsondata-ref="checkboxJsonData" jsondata-text="text" jsondata-true-value="truevalue" jsondata-false-value="falsevalue" text-style="font-weight:bold;" text-left-padding="5px" text-right-padding="25px" direction="vertical"></sbux-checkbox> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> var SBUxData = [ { text : "SBUx Checkbox1" }, { text : "SBUx Checkbox2" }, { text : "SBUx Checkbox3" } ]; $(document).ready(function(){ $('#sbArea').sbCheckbox({ name : 'sbScriptNm', uitype : 'normal', jsondataRef : 'SBUxData' }); }); </script> |
| 속성명 | 설명 / 데이터형(s:고정형, f:변동형) | 비고 | |
|---|---|---|---|
| checked | 선택 | s | |
| required | 필수 입력 지정 | s | f | |
| required-index | 선택적 필수 입력 지정 | f | |
| disabled | 비활성 | s | f | |
| readonly | 읽기 전용 | s | f | |
| group-id | 그룹으로 묶일 id | s | f | |
| text | 우측 표시 문구 | s | |
| true-value | 선택시 value | s | |
| false-value | 선택해제 또는 미선택시 value | s | |
| submit-name | 선택한 값들을 동일한 key 명으로 form submit 시 전송 | s | f | |
| text-left-padding | 우측 표시 문구 좌측 간격 | s | f | |
| text-right-padding | 우측 표시 문구 우측 간격 | s | f | |
| jsondata-ref | json data 참조 변수명 json data 구조 = [{text:'SBGrid',truevalue:'Y',falsevalue:'N',style:'color:blue;',checked:'checked'} ,{text:'SBChart',truevalue:'Yes',falsevalue:'No',style:'color:red;',disabled:'disabled'}] |
f | |
| jsondata-text | json data 내 text 참조 키명 | f | |
| jsondata-true-value | json data 내 true value 참조 키명 | f | |
| jsondata-false-value | json data 내 false 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.set('hardware',['hdd','ssd'])
두번째 파라메터 값은 모든 checkbox 에 대해 입력 |
| SBUxMethod.get | 저장된 값 호출 | s | f | 고정형인 경우 id 값이 key 값, 변동형인 경우 id 값에 index(0,1,..) 추가 |
| 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 | |
