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

进度条的发明是很牛逼的，就如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

巴特西

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

最新文章

热门文章