EasyMvc入门教程-基本控件说明(3)时间线
我们有时候经常看到如下的页面:

或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子:
@{
var data=new List<TimeLineItem>()
{
new TimeLineItem() {Title = "", Text = "开始"},
new TimeLineItem() {Title = "2014年", Text = "新版本发布1.0"},
new TimeLineItem() {Title = "2015年", Text = "新版本发布3.0"},
};
}
@Html.Q().TimeLine().SourceItems(data)
代码还容易看懂吧?基本就是准备数据,然后调用EasyMvc提供的组件TimeLine,(PS:实际中数据一般不写在这里哦。。这里是为了演示)那么效果如何呢?请看下图:

相信还是比较简单吧:)
技巧:一般人不告诉他:)数据里的Text支持html的,所以,在必要的时候,可以插入少量的html代码实现个性化亮点,比如增加个小图标什么的。
总结:时间线的使用就简单介绍到这里,怎么样,是不是很简单,脑海里面向对象的概念浮现没? :)
更多使用示例请浏览在线示例:http://core.zwc.cn
EasyMvc入门教程-基本控件说明(3)时间线的更多相关文章
- 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入门教程-基本控件说明(6)进度条
进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...
- EasyMvc入门教程-基本控件说明(12)栏目导航
栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...
- EasyMvc入门教程-基本控件说明(2)定时器
我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...
随机推荐
- linux环境搭建系列之svn安装
前提: linux centOS 64位操作系统 1.root账号 2.#yum install -y subversion 出现如下报错: 尝试Telnet https://www.baidu.co ...
- python安装pattern失败
做文本分类需要用到pattern.en进行词形还原,安装了一上午都没有成功,mysqlclient安装失败.最后解决办法,pip install --only-binary :all: mysqlcl ...
- nyoj 325
zb的生日 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么 ...
- 再次理解javascript的apply
普通函数执行的时候,this指向函数执行的上下文 其实就是一个原型链的结构... 我一直没有搞懂原型链莫非它们像链条一样连在一起? 昂... 原型链可以理解成继承吗? 就像,ja ...
- 习题:Dual Matrices(思路题/分治)
tyvj1764 描述一个N行M列的二维矩阵,矩阵的每个位置上是一个绝对值不超过1000的整数.你需要找到两个不相交的A*B的矩形,使得这两个矩形包含的元素之和尽量大.注:A*B的矩形指连续的A行.B ...
- (Mac)centos 6.5安装 JDK+mysql
为了把自己的网站放到外网,购买了阿里云的centos 6.5服务器,以下是安装 JDK 一.JDK安装: 方法一: 1.创建目录,命令行:(这里可以不加sudo) sudo mkdir /jdk 2. ...
- BZOJ1396&2865 识别子串 【后缀自动机 + 线段树】
题目 输入格式 一行,一个由小写字母组成的字符串S,长度不超过10^5 输出格式 L行,每行一个整数,第i行的数据表示关于S的第i个元素的最短识别子串有多长. 输入样例 agoodcookcooksg ...
- qw
// 主页 @RequestMapping(value = "/home") public ModelAndView home() { ModelAndView MV = new ...
- vue中scoped vs css modules
注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css module ...
- 洛谷P2056 采花
P2056 采花 52通过 99提交 题目提供者shengmingkexue 标签云端↑ 难度省选/NOI- 时空限制1s / 128MB 提交 讨论 题解 最新讨论更多讨论 求助莫队为什么被卡 ...