angularjs实现时间轴效果的示例代码


Posted in Javascript onNovember 29, 2017

一 引入包

引入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中引用,不引用就没有效果。

angularjs实现时间轴效果的示例代码

二 改写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实现时间轴效果的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
bootstrap响应式工具使用详解
Nov 29 #Javascript
JavaScript的setter与getter方法
Nov 29 #Javascript
解析Vue 2.5的Diff算法
Nov 28 #Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 #Javascript
9种改善AngularJS性能的方法
Nov 28 #Javascript
JS异步函数队列功能实例分析
Nov 28 #Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php实现三级级联下拉框
2016/04/17 PHP
php PDO异常处理详解
2016/11/20 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解webpack 热更新优化
2018/09/13 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
urllib2自定义opener详解
2014/02/07 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python3分析处理声音数据的例子
2019/08/27 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
信息管理专业自荐书
2014/06/05 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
简短清晨问候语
2015/11/10 职场文书
检讨书格式
2019/04/25 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android