进度条的发明是很牛逼的,就如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. MongoDB用PCRE正则表达式

    介绍 下面说明 PCRE 所支持的正则表达式的语法和语义.Perl 文档和很多其它书中也解说了正则表达式,有的书中有很多例子.Jeffrey Friedl 写的“Mastering Regular E ...

  2. 并发编程——IO模型(6)

    1.IO模型分类 同步IO #所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不会返回.按照这个定义,其实绝大多数函数都是同步调用.但是一般而言,我们在说同步.异步的时候,特指那些需要 ...

  3. wordpress 区分多语言站点

    $blog_title = get_bloginfo( 'name' ); $table_name = ''; if ( $blog_title == 'Driver Easy' ) { $table ...

  4. Java学习4之抽象类

    在面向父类编程的过程中,抽象出来的父类具有一般化特质.父类函数只是一个抽象化的概念,只是为了在面向对象编程时统一接口服务. example: 有时父类会定义出一些无法实现的行为: public voi ...

  5. iOS-文本段落样式NSMutableParagraphStyle与NSParagraphStyle的使用和一些富文本处理属性

    开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...

  6. CMake 使用笔记

    记录 CMake 相关知识. Prelude:读文档一定要有耐心! 问题一 CLion: CMakeLists.txt 中 set(CMAKE_CXX_FLAGS -Wall) 不起作用 Soluti ...

  7. JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)

    1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...

  8. 【BZOJ1030】文本生成器(容斥原理,AC自动机,计数DP)

    题意:给出n个字符串,求长为m至少包含n个里其中一个的串的字符串一共有多少个,字符集为A到Z,答案对10007取模 n<=60,len<=100 思路:将至少一个转化为所有个数减去没有出现 ...

  9. set基本用法---1

    #include<cstdio> #include<iostream> #include<cstdlib> #include<cmath> #inclu ...

  10. 局部a链接样式

    原文发布时间为:2010-01-16 -- 来源于本人的百度文章 [由搬家工具导入] <style type="text/css"> <!--默认页面链接-> ...