您的位置:首页 > 其它

EasyMvc入门教程-基本控件说明(3)时间线

2018-01-17 13:53 218 查看
我们有时候经常看到如下的页面:



或者快递物流信息图标,那么利用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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: