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

    推荐系统我们都很熟悉,淘宝推荐用户可能感兴趣的产品,搜索引擎帮助用户发现可能感兴趣的东西,这些都是推荐系统的内容.接下来讲述一个电影推荐的项目. Netflix 电影推荐系统 这个项目是使用的Netf ...

  2. [oldboy-django][4python面试]面试前需要熟练掌握的知识点(待更新)

    python基础 - 生成器 - 装饰器 - 迭代器 - 列表生成式 - 引用,传参 - 面向对象,继承 前端Html: - 词法分析 - 作用域 - 语法分析 - this - Jsonp mysq ...

  3. 来自知乎的pthread_cond_wait为什么总是带着mutex

       来自https://www.zhihu.com/question/24116967?q=linux%20%E5%A4%9A%E7%BA%BF%E7%A8%8B%20%E8%99%9A%E5%81 ...

  4. maven学习(二)——手动创建maven项目

    一.Maven的简单使用 1.Maven项目的目录约定 MavenProjectRoot(项目根目录)   |----src   |     |----main   |     |         | ...

  5. JVM(8):JVM知识点总览-高级Java工程师面试必备

    http://www.importnew.com/23792.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 当然这些知识点 ...

  6. NodeJS npm 包装包失败的解决方案

    这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set reg ...

  7. 基于Linux的嵌入式文件系统构建与设计

    摘 要:Linux是当今一种十分流行的嵌入式操作系统.由于其具有执行效率高.占用空间小.实时性能优良和可扩展性强等特点,因此被广泛应用于工业控制领域.该文对其文件系统进行了简单的介绍,结合嵌入式系统应 ...

  8. jmeter作接口测试入门的简单使用说明

    一.添加接口信息 1.添加线程组 (1)路径如下图: (2)部分内容解释 a.  Number of Threads(users):线程数 b.  Ramp-Up Period(in seconds) ...

  9. 命名参数和可选参数在.NET中的使用

    原文发布时间为:2011-04-25 -- 来源于本人的百度文章 [由搬家工具导入] Named and Optional Arguments class NamedExample{staticvoi ...

  10. 从头实现一个koa框架

    koajs是最流行的nodejs后端框架之一,有很多网站都使用koa进行开发,同时社区也涌现出了一大批基于koa封装的企业级框架.然而,在这些亮眼的成绩背后,作为核心引擎的koa代码库本身,却非常的精 ...