L'ajout d'un pourcentage de l'étiquette de la barre de progression de jquery

Actuellement j'ai une barre de progression lié à des cases à cocher, je suis désireux d'ajouter une étiquette qui indique le pourcentage actuel de la barre de progression, est-ce possible et comment puis-je mettre en œuvre?.

Actuelle version live = http://jsfiddle.net/ezanker/UznQe/1/

Code

<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="themes/theme1.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
//calculate percentage
perc = 0;
$("#theList input[type=checkbox]:checked").each(function (index) {
perc += parseInt($(this).val());
});
if (perc < 15) {
$("#progress").css('background', 'red');
} else if (perc < 30) {
$("#progress").css('background', 'orange');
} else if (perc < 60) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
$("#progress").css("width", perc + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Task list</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>                    
<a href="" class="detailListText">Task 1 (15%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
</div>                     
<a href="" class="detailListText">Task 2 (40%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
</div>                     
<a href="" class="detailListText">Task 3 (5%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
</div>                     
<a href="" class="detailListText">Task 4 (10%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
</div>                     
<a href="" class="detailListText">Task 5 (15%)</a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>                     
<a href="" class="detailListText">Task 6 (15%)</a>
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute; 
left: 10px; 
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;  
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;   
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;   
background-color:#6496bc;    
}
.meter { 
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: 
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: 
-webkit-gradient(linear, 0 0, 100% 100%, 
color-stop(.25, rgba(255, 255, 255, .2)), 
color-stop(.25, transparent), color-stop(.5, transparent), 
color-stop(.5, rgba(255, 255, 255, .2)), 
color-stop(.75, rgba(255, 255, 255, .2)), 
color-stop(.75, transparent), to(transparent)
);
background-image: 
-moz-linear-gradient(
-45deg, 
rgba(255, 255, 255, .2) 25%, 
transparent 25%, 
transparent 50%, 
rgba(255, 255, 255, .2) 50%, 
rgba(255, 255, 255, .2) 75%, 
transparent 75%, 
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>   
</body>
</html>    
InformationsquelleAutor | 2014-02-25