tizen ui customize - checkbox

Tizen의 UI Framework의 ui-Sscrollview-view를 사용하여 미리 보기 그림에 사용자 정의 체크 상자를 설정해 보십시오.

<div data-scroll="xy" style="height:360px">
  <div class="ui-scrollview-view" style="width:1176px" id="scrollview_items"></div>
</div>

$( "#scrollview_xy-demo" ).on( "pageshow" , function() {
  for (var i=1;i<10;i++){
    $("#scrollview_items").append(
       "<div style='float:left;margin-left:-26px;'><input type='checkbox'><img src='./test/0"+ i + ".jpg'  height='120px' alt='"+i+"'></div>"
    );
  }
});

$("#scrollview_items").on( "vclick", function ( e ) {
  alert(e.target.src);
});

다음 스타일이 적용됩니다.
```
.ui-icon-checkbox-on{
-webkit-appearance: none;
position: relative;　　　　
display: inline-block;
width: 100px;
height: 100px;
background: url(../img/checkbox.png);
background-size: contain;
}
.ui-icon-checkbox-off{
-webkit-appearance: none;
position: relative;　　　　
display: inline-block;
width: 100px;
height: 100px;
background: url(../img/checkbox_off.png);
background-size: contain;
}
.ui-icon-checkbox-on-press,
.ui-icon-checkbox-off-press{
background: url(../img/checkbox_off.png);
}
input[type="checkbox"]{
-webkit-appearance: none;
position: relative;　　　　
display: inline-block;
left: 25px;
top: 0px;
width: 20px;
height: 20px;
background: url(../img/checkbox_off.png);
background-size: contain;
}
input[type="checkbox"]:checked:before {
content: "";
position: absolute;　　　　
left: 0px;
top: 0px;
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/checkbox.png);
background-size: contain;
}
```