EasyMvc入门教程-基本控件说明(6)进度条

进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样。。:)

进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子:

@Html.Q().Progress().Value(50)

  效果如下:

EasyMvc入门教程-基本控件说明(6)进度条

怎么样,还是很简单吧:)

那么可不可以炫些呢?其实是可以的,请看下例:

EasyMvc入门教程-基本控件说明(6)进度条

代码如下:

@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的方法,就可以改变进度条的颜色了。

如果我想改变大小呢?还是很简单,请继续往下看:

EasyMvc入门教程-基本控件说明(6)进度条

实现代码如下:

@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()方法就可以了。:)大家可以在演示地址里查看具体的运行结果。

截图如下:

EasyMvc入门教程-基本控件说明(6)进度条


总结:进度条的使用就简单介绍到这里,一般场合下,进度条的使用还是很简单的,只有当客户端需要动态修改进度条的数值的时候,才需要知道进度条的value方法,后面的控件基本都会保持简单易用的水平 :)

更多使用示例请浏览在线示例:http://core.zwc.cn

上一篇:EasyMvc入门教程-基本控件说明(1)按钮


下一篇:EasyMvc入门教程-基本控件说明(8)提醒导航