tizen ui customize - checkbox

TizenのUI Frameworkのui-scrollview-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;
}
```