进度条的发明是很牛逼的,就如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)进度条的更多相关文章

  1. EasyMvc入门教程-基本控件说明(8)提醒导航

    提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...

  2. EasyMvc入门教程-基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...

  3. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  4. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  5. EasyMvc入门教程-基本控件说明(1)按钮

    按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...

  6. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  7. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  8. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

  9. EasyMvc入门教程-基本控件说明(3)时间线

    我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...

随机推荐

  1. 使用 Region,RegionManager 在 XNA 中创建特殊区域(十八)

    平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐步将自己编写的类上传到托管项目中,没有什么好名字,就叫 WPXN ...

  2. SQLServer存储引擎——06.索引的遍历与维护

    一.遍历 索引树的每个节点都是一个页面. 索引树有三种类型的节点:根节点.中间节点.叶子节点. (1) 根节点与中间节点一样,只包含下一层节点的入口值与入口指针,它们称为索引节点: (2) 叶子节点包 ...

  3. Ognl对象图导航语言 源码

    // -------------------------------------------------------------------------- // Copyright (c) 1998- ...

  4. hdu 3714 Error Curves(三分)

    Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  5. CodeForces839B[思维] Codeforces Round #428 (Div. 2)

    #include <bits/stdc++.h> using namespace std; int n, k; ; ], cnt[]; void solve() { int t; cnt[ ...

  6. 抄书 Richard P. Stanley Enumerative Combinatorics Chapter 2 Sieve Methods

    2.1 Inclusion-Exclusion Roughly speaking, a "sieve method" in enumerative combinatorics is ...

  7. HDU 5289 Assignment(二分+RMQ-ST)

    Assignment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  8. javasript 按值传递

    现象总结如下: 1.JS的基本类型,是按值传递的.2.对于对象而言:分两种情况(a).如果传递给函数的参数是对象,并且修改了这个对象的属性(某些字段的值),那么奇妙的问题就来了.原参数就被修改了.(b ...

  9. 地理课(geography)

    地理课(geography) 题目描述 地理课上,老师给出了一个巨大的地图,由于世界日新月异,会有一些道路在某一时刻被删除,也会有一些道路在某一时刻被修建.这里的道路均为双向的. 老师认为,有一些城市 ...

  10. 刷题总结——飞飞侠(bzoj2143 最短路)

    题目: Description 飞飞国是一个传说中的国度,国家的居民叫做飞飞侠.飞飞国是一个N×M的矩形方阵,每个格子代表一个街区.然而飞飞国是没有交通工具的.飞飞侠完全靠地面的弹射装置来移动.每个街 ...