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)进度条的更多相关文章
- EasyMvc入门教程-基本控件说明(8)提醒导航
提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...
- EasyMvc入门教程-基本控件说明(11)菜单导航
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...
- EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图
本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...
- EasyMvc入门教程-基本控件说明(1)按钮
按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...
- EasyMvc入门教程-基本控件说明(4)折叠面板
折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...
- EasyMvc入门教程-基本控件说明(12)栏目导航
栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...
- EasyMvc入门教程-基本控件说明(2)定时器
我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...
- EasyMvc入门教程-基本控件说明(3)时间线
我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...
随机推荐
- 使用 Region,RegionManager 在 XNA 中创建特殊区域(十八)
平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐步将自己编写的类上传到托管项目中,没有什么好名字,就叫 WPXN ...
- SQLServer存储引擎——06.索引的遍历与维护
一.遍历 索引树的每个节点都是一个页面. 索引树有三种类型的节点:根节点.中间节点.叶子节点. (1) 根节点与中间节点一样,只包含下一层节点的入口值与入口指针,它们称为索引节点: (2) 叶子节点包 ...
- Ognl对象图导航语言 源码
// -------------------------------------------------------------------------- // Copyright (c) 1998- ...
- hdu 3714 Error Curves(三分)
Error Curves Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tot ...
- CodeForces839B[思维] Codeforces Round #428 (Div. 2)
#include <bits/stdc++.h> using namespace std; int n, k; ; ], cnt[]; void solve() { int t; cnt[ ...
- 抄书 Richard P. Stanley Enumerative Combinatorics Chapter 2 Sieve Methods
2.1 Inclusion-Exclusion Roughly speaking, a "sieve method" in enumerative combinatorics is ...
- HDU 5289 Assignment(二分+RMQ-ST)
Assignment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
- javasript 按值传递
现象总结如下: 1.JS的基本类型,是按值传递的.2.对于对象而言:分两种情况(a).如果传递给函数的参数是对象,并且修改了这个对象的属性(某些字段的值),那么奇妙的问题就来了.原参数就被修改了.(b ...
- 地理课(geography)
地理课(geography) 题目描述 地理课上,老师给出了一个巨大的地图,由于世界日新月异,会有一些道路在某一时刻被删除,也会有一些道路在某一时刻被修建.这里的道路均为双向的. 老师认为,有一些城市 ...
- 刷题总结——飞飞侠(bzoj2143 最短路)
题目: Description 飞飞国是一个传说中的国度,国家的居民叫做飞飞侠.飞飞国是一个N×M的矩形方阵,每个格子代表一个街区.然而飞飞国是没有交通工具的.飞飞侠完全靠地面的弹射装置来移动.每个街 ...