EasyMvc入门教程-基本控件说明(3)时间线
2018-01-17 13:53
218 查看
我们有时候经常看到如下的页面:
或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子:
代码还容易看懂吧?基本就是准备数据,然后调用EasyMvc提供的组件TimeLine,(PS:实际中数据一般不写在这里哦。。这里是为了演示)那么效果如何呢?请看下图:
相信还是比较简单吧:)
技巧:一般人不告诉他:)数据里的Text支持html的,所以,在必要的时候,可以插入少量的html代码实现个性化亮点,比如增加个小图标什么的。
总结:时间线的使用就简单介绍到这里,怎么样,是不是很简单,脑海里面向对象的概念浮现没? :)
更多使用示例请浏览在线示例:http://core.zwc.cn
或者快递物流信息图标,那么利用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入门教程-基本控件说明(1)按钮
- EasyMvc入门教程-基本控件说明(13)选项卡导航
- EasyMvc入门教程-基本控件说明(4)折叠面板
- EasyMvc入门教程-基本控件说明(10)图片轮播导航
- EasyMvc入门教程-基本控件说明(11)菜单导航
- EasyMvc入门教程-基本控件说明(7)文字块导航
- EasyMvc入门教程-基本控件说明(9)引言导航
- EasyMvc入门教程-基本控件说明(2)定时器
- EasyMvc入门教程-基本控件说明(12)栏目导航
- EasyMvc入门教程-基本控件说明(5)小图标
- EasyMvc入门教程-基本控件说明(6)进度条
- EasyMvc入门教程-基本控件说明(8)提醒导航
- EasyMvc入门教程-高级控件说明(17)对话框控件
- EasyMvc入门教程-高级控件说明(18)弹出框控件
- EasyMvc入门教程-高级控件说明(14)列布局控件
- EasyMvc入门教程-高级控件说明(19)表单控件
- EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图
- EasyMvc入门教程-高级控件说明(20)表格控件
- EasyMvc入门教程-高级控件说明(15)方位布局控件
- EasyMvc入门教程-高级控件说明(16)信息框控件