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 相关文章推荐
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
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
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
深入探讨前端框架react
2015/12/09 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python Pandas 箱线图的实现
2019/07/23 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python3字符串输出常见面试题总结
2020/12/01 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
网络书店创业计划书
2014/02/07 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
户籍证明模板
2014/09/28 职场文书
CAD实训总结范文
2015/08/03 职场文书