jQM - Split button listview with checkbox
by sebababi
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sensor List</title>
<meta name="viewport" content="width=device-width" />
<link href="/phytech_icon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$('#this_page').addClass('ui-disabled');
$('#pre_page').addClass('ui-disabled');
});
</script>
<style type="text/css">
@media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
</head>
<body>
<div data-role="page" id="app">
<div data-role="content">
<ul data-role="listview" data-split-icon="arrow-r" data-split-theme="c" data-filter="true">
<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;">
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup" >
<input id="SelectedSensors_0__Value" name="SelectedSensors[0].Value" type="checkbox" value="true" />
<input id="SelectedSensors_0__Id" name="SelectedSensors[0].Id" type="hidden" value="16" />
<label for="SelectedSensors_0__Value"...
JavaScript
$(document).on('pagebeforeshow', '#app', function(){
$('[data-role="listview"]').find('.ui-btn-icon-left').removeClass('ui-btn-icon-left').addClass('ui-btn-icon-right');
//alert($('[data-role="listview"]').find('.ui-btn-icon-left').length);
});