进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样。。:)
进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子:
@Html.Q().Progress().Value(50)
效果如下:
怎么样,还是很简单吧:)
那么可不可以炫些呢?其实是可以的,请看下例:
代码如下:
@Html.Q().Progress().Value(50).ColorWarm() @Html.Q().Progress().Value(50).ColorDanger() @Html.Q().Progress().Value(50).ColorNormal() @Html.Q().Progress().Value(50).ColorPrimary()
大家可以看到,利用ColorXXX的方法,就可以改变进度条的颜色了。
如果我想改变大小呢?还是很简单,请继续往下看:
实现代码如下:
@Html.Q().Progress().Value(50).SizeNormal() @Html.Q().Progress().Value(50).SizeLarge()
看了这么多后,估计你突然会问到:如果想在前端通过JS动态更改进度条值,好实现吗?那么不多说,看以下的实现例子吧:
@Html.Q().Progress().Name("pb").Value(0).ShowText() @Html.Q().Button().Text("点击我试试看").ClickClientEvent("setValue")
<script>
var i = 0;
function setValue() {
pb.value(++i);
}
</script>
注意:我们给进度条的ID赋值了一个名称,叫pb,然后,在按钮的点击事件里,直接调用pb.value()方法就可以了。:)大家可以在演示地址里查看具体的运行结果。
截图如下:
总结:进度条的使用就简单介绍到这里,一般场合下,进度条的使用还是很简单的,只有当客户端需要动态修改进度条的数值的时候,才需要知道进度条的value方法,后面的控件基本都会保持简单易用的水平 :)
更多使用示例请浏览在线示例:http://core.zwc.cn