맨위로가기
 

SBUx

닫기

Checkbox

여러 항목을 check 하여 선택할 수 있는 컴포넌트 입니다.

기본 사항

사항 설명 비고
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 사항

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.dynamic string 형태로 입력하여 동적 생성 s | f
SBUxMethod.render <sbux-xxx tag >랜더링 s | f
SBUxMethod.validateRequired required 속성이 있는 컴포넌트 체크 s | f