angularjs实现时间轴效果的示例代码
2017-11-29 09:33
821 查看
一 引入包
引入angular-timeline包。
下载地址:angular-timeline.zip
在index.html中引入
<link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/angular-timeline.js"></script>
app.js中引用,不引用就没有效果。
二 改写css
根据需求改写css,核心部分的改写。
可以写在style.css中,也可以新建一个css文件,但是一定要在index.html中引用。
/* 时间轴 */ .timeline-event { margin-bottom: 0px !important; } timeline-badge.infos { background-color: #47d09e !important; } .timeline:before { width: 1px !important; left: 24px !important; margin-top: 30px !important; background-color: #47d09e !important; } timeline-badge { left: 16px !important; width: 15px !important; height: 15px !important; top: 15px !important; box-shadow: none !important; } timeline-panel { float: left !important; width: 85% !important; padding: 13px 0px 6px 0px !important; margin-left: 39px !important; background: none !important; border: none !important; box-shadow: none !important; } timeline-panel:before { visibility: hidden !important; } timeline-panel:after { visibility: hidden !important; display: none !important; } timeline-panel .time { font-size: 14px; font-family: 'PingFangSC-Regular'; } timeline-panel .detail { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 10px; } timeline-panel .detail .linename { font-size: 16px; max-width: 80%; color: #1c1c1c; display: inline-block; font-family: 'PingFangSC-Medium'; } timeline-panel .detail .linelevel { position: absolute; right: 18%; border-radius: 4px; color: white; padding: 1px 5px 1px 5px; font-size: 11px; } timeline-panel .detail .linelevel-g { background-color: #f27373; } timeline-panel .detail .linelevel-p { background-color: #e29431; } timeline-panel .detail .linenum { float: right; font-size: 14px; color: #323232; }
三 页面
准备工作做完了,下面是页面的编写。
<!--html页面--> <ion-view view-title="{{title}}"> <ion-content scroll="true"> <timeline> <timeline-event ng-repeat="event in teamDataList" side="right"> <timeline-badge class="infos"> </timeline-badge> <timeline-panel class="infos"> <span class="time"> {{event.hour}} </span> <div class="detail" ng-repeat="item in event.data"> <span class="linename">{{item.customerName}}</span> <div style="float: right;"> <span class="linenum"> {{item.reserveNumber}}人 </span> </div> </div> </timeline-panel> </timeline-event> </timeline> </ion-content> </ion-view>
//controller angular.module('studyApp.controllers') .controller('TimeLineCtrl', function ($scope, $rootScope, $location) { $scope.title = '时间轴'; makeData(); function makeData() { $scope.teamDataList=[ { hour:"12:00", data:[ { customerName:"中国国旅(江苏)国际旅行社有限公司", reserveNumber:"12", id:"aaaabbb12112" }, { customerName:"江苏2", reserveNumber:"122", id:"aaaabbb12112" } ] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] } ]; } });
四 效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- AngularJS 日期格式化详解
- 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
- Angularjs中使用layDate日期控件示例
- Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
- Angularjs验证用户输入的字符串是否为日期时间
- Angular4.0中引入laydate.js日期插件的方法教程
- angularjs封装bootstrap时间插件datetimepicker
- bootstrap timepicker在angular中取值并转化为时间戳
- 基于datepicker定义自己的angular时间组件的示例
- AngularJS日期格式化常见操作实例分析
相关文章推荐
- AngularJS实现树形结构(ztree)菜单示例代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- Angularjs实现下拉框联动的示例代码
- CSS3实现文字波浪线效果示例代码
- css实现文字竖排效果示例代码
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- jquery实现div阴影效果示例代码
- jquery 实现上下滚动效果示例代码
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- 一个Android实现图片的倒影效果的代码示例
- 模拟QQ隐藏效果的实现(示例+代码+隐藏类)
- jquery实现div阴影效果示例代码
- AngularJS递归指令实现Tree View效果示例
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)