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去除空格的几种方法
Oct 03 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
Nuxt.js 静态资源和打包的操作
Nov 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中 map()函数的用法详解
2018/07/10 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
森林防火工作方案
2014/02/14 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
公司离职证明标准范本
2014/10/05 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
高中运动会前导词
2015/07/20 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS