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

或者快递物流信息图标,那么利用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. windows下SecureCRT无法使用Backspace(删除键)和上下左右键

    MongoDB Shell中退格键使用的问题. 利用SecureCRT工具访问linux的时候,在使用MongoDB的交互式shell的时候,退格键(Backspace)无法使用,导致无法修改输入的字 ...

  2. 微信小程序-----校园头条详细开发之首页

    1.首页展示功能的实现 1.1  结构 1.2 代码实现 1.2.1  界面的设计这里就不多说了,样式都是我自己写的,还有就是页面的跳转,看详细代码 var app = getApp() Page({ ...

  3. Visual Studio 在 C# 项目添加动态链接库 dll

    DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型. 使用DLL文件的好处是程序不需要在运行之初加载所有代码,只有在程序需要某个函数的时候才从 ...

  4. var、let、const与JavaScript变量/常量的定义

    早期的JavaScript中,声明变量只能使用var关键字定义变量,并没有定义常量的功能.通过var关键字定义的变量,其作用域只能函数级或是全局作用域,并没有块级作用域.ES6(ECMAScript ...

  5. 菜鸟之路——机器学习之线性回归个人理解及Python实现

    这一节很简单,都是高中讲过的东西 简单线性回归:y=b0+b1x+ε.b1=(Σ(xi-x–)(yi-y–))/Σ(xi-x–)ˆ2       b0=y--b1x-    其中ε取 为均值为0的正态 ...

  6. kvm配置虚拟机[待整理]

    working note 4-12-2016 1,利用libvirt图形虚拟机管理工具virt-manager搭建虚拟机,通过存储池(storage pool )和卷(volume)存放虚拟机镜像(I ...

  7. ActionContext源码

    /* * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License, ...

  8. Sentinel系统监控Redis主从节点

    author:JevonWei 版权声明:原创作品 blog:http://119.23.52.191/ --- 构建Sentinel监控Redis的主节点架构 拓扑结构结构 拓扑环境 master ...

  9. bzoj 4131: 并行博弈 (parallel)

    bzoj 4131: 并行博弈 (parallel) Description lyp和ld在一个n*m的棋盘上玩翻转棋,游戏棋盘坐标假设为(x, y),1 ≤ x ≤ n,1 ≤ y ≤ m,这个游戏 ...

  10. 论文笔记《Notes on convolutional neural networks》

    这是个06年的老文章了,但是很多地方还是值得看一看的. 一.概要 主要讲了CNN的Feedforward Pass和 Backpropagation Pass,关键是卷积层和polling层的BP推导 ...