我们有时候经常看到如下的页面:

或者快递物流信息图标,那么利用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)时间线的更多相关文章

  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入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

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

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

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

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

随机推荐

  1. getshell不用英文数字 或者不用下划线

    getshell不用英文字母和数字 上代码 实际代码没有echo strlen($code);我测试的时候加上去的 思路是eval执行getFlag函数. 过滤了字母和数字,长度得小于40 直接看pa ...

  2. [oldboy-django][2深入django]班级管理(Form)--编辑

    1.需求:编辑班级,难点:点击编辑按钮后,页面如何显示 待编辑 班级的信息(用Form实现), 以及Url 设置 2 url url(r'^edit_class/nid=(?P<nid>\ ...

  3. 习题:Wormhole(思路题)

    tyvj1763 描述 一维的世界就是一个数轴.这个世界的狭小我们几乎无法想象.在这个数轴上,有N个点.从左到右依次标记为点1到N.第i个点的坐标为Xi.经过漫长时间的物理变化和化学变化,这个一维世界 ...

  4. 【bzoj3083】遥远的国度 树链剖分+线段树

    题目描述 描述zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了zcwwzdjn的去路,他需要zcwwzdjn ...

  5. 【bzoj2527】[Poi2011]Meteors 整体二分+树状数组

    题目描述 有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1份相邻),第i份上有第Ai个国家的太空站. 这个星球经常会下陨石雨.BIU已经预测了接下来K场陨石雨的情况.BI ...

  6. [CQOI2014][bzoj3507] 通配符匹配 [字符串hash+dp]

    题面 传送门 思路 0x01 KMP 一个非常显然而优秀的想法:把模板串按照'*'分段,然后对于每一段求$next$,'?'就当成可以对于任意字符匹配就行了 对于每个文本串,从前往后找第一个可以匹配的 ...

  7. linux系统——日志文件系统及性能分析

    Linux日志文件系统及性能分析 日志文件系统可以在系统发生断电或者其它系统故障时保证整体数据的完整性,Linux是目前支持日志文件系统最多的操作系统之一,本文重点研究了Linux常用的日志文件系统: ...

  8. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  9. ionic2实战-使用Chart.js

    前言 Chart.js官网 Chart.js中文文档 安装Chart.js 执行cnpm install typings -g,全局安装Typings 执行typings search chart.j ...

  10. 洛谷 [P3496] BLO

    割点 首先 tarjan 求割点, 对于不是割点的点, 答案是 2 * (n-1) 有序,所以要乘 2 对于是割点的点, 答案是删去该点后所有连通块的个数加上 n-1 在乘 2 #include &l ...