Question

将显示我的数据的表格

<table class="table" align="center">            
<tr>
<td>Job Code</td>
<td><b><?php echo ' ' . $dataProvider->models[0]->job_code; ?></b></td>
</tr>
<tr>
<td>Client Code</td>
<td><b><?php echo ' ' . $dataProvider->models[0]->client_code; ?></b></td>
 </tr>
<tr>
<td>Status</td>
<td ><b><span name="current" data-value="CDP"><?php echo ' ' . $dataProvider->models[0]->status; ?></b></td>
</tr>
</table>

JS -

$(document).ready(function() {
var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function() {
$('.progress .circle:nth-of-type(' + i + ')').addClass('active');

$('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');

$('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');

$('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');

$('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');

i++;

if (i == 0) {
$('.progress .bar').removeClass().addClass('bar');
$('.progress div.circle').removeClass().addClass('circle');
i = 1;
}
}, 1000);
});

我给表字段一个名字，我想像 -

那样推进这个栏

if(status=approved)
{
  progress up to one step
}
elseif(status==digital)
{
progress up to Digital
}
elseif(status==CDP)
{
progress up to CDP
}
elseif(status==Printing)
{
progress up to Printing
}
and so on...

脚本应该从表字段获取值，并且进度和步骤栏可以达到适当的状态。怎么做到这一点？

CodePen Link- http://codepen.io/anon/pen/RPBmXZ

Answer 1

我就这样做了：

cat|dog|mouse|fish

Here is the JSFiddle demo of your code

如何在Jquery中增加步骤进度条？

1 个答案: