我需要在进度栏中显示进度值和剩余值。
这是我的html内容。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.bar {
width: 100px;
height: 20px;
margin: 2px;
border: 1px solid black;
background-color: lightgreen;
text-align: center;
float: left;
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.list {
background-color: lightblue;
border: 1px solid gray;
}
.items .ui-selected {
background: red;
color: white;
font-weight: bold;
}
.items {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
.items li {
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.weekday {
float: left;
}
.availablelist {
background-color: orange;
display: inline;
}
</style>
</head>
<body>
<div style="float:left;width:500px;">
<div><h2>Total credits = <span id="total-credits">80</span></h2> </div>
</div>
<div style="clear:both"></div>
<br>
<div id="timetable" style="float:left;width:700px;">
<div class="weekday">
<ul class="items">
<li class="list">
<label class="core-ins-tag-numb">Jhonny</label>
<input type="hidden" value="15" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Tim</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">George</label>
<input type="hidden" value="25" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Melissa</label>
<input type="hidden" value="20" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Alice</label>
<input type="hidden" value="5" name="credits" class="credits">
</li>
</ul>
</div>
<div class="weekday">
<ul class="items">
<li class="list">
<label class="core-ins-tag-numb">Jhonny</label>
<input type="hidden" value="20" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Tim</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">George</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Melissa</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Alice</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
</ul>
</div>
<br>
<div id = "progressbar"></div>
</div>
<script>
$(function () {
$("#timetable .items").sortable({
connectWith: "ul"
});
/* for progress bar */
var progressbar = $( "#progressbar" );
$( "#progressbar" ).progressbar({
value: 0,max:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value",val + 1 );
if ( val <= 00 ) {
setTimeout( progress,100 );
}
}
setTimeout(progress,3000);
/* for progress bar */
});
我对每个带li的li项目有一个隐藏的值，因此，每当从右侧拖放任何li到左侧时，我都需要对每个左侧li信用的值求和，并与Total credit和显示进度栏，其值如下图所示
此外，如果信用额度超过80，我还需要确保阻力不允许
这怎么办？