Rumah > hujung hadapan web > tutorial js > angularjs实现时间轴效果分享

angularjs实现时间轴效果分享

小云云
Lepaskan: 2018-01-05 13:32:03
asal
2361 orang telah melayarinya

本文主要介绍了angularjs实现时间轴效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

一 引入包

引入angular-timeline包。

下载地址:angular-timeline.zip

在index.html中引入


1

2

<link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet">

<script src="lib/angular-timeline/dist/angular-timeline.js"></script>

Salin selepas log masuk

app.js中引用,不引用就没有效果。


二 改写css

根据需求改写css,核心部分的改写。

可以写在style.css中,也可以新建一个css文件,但是一定要在index.html中引用。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

/* 时间轴 */

.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: &#39;PingFangSC-Regular&#39;;

}

 

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: &#39;PingFangSC-Medium&#39;;

}

 

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;

}

Salin selepas log masuk

三 页面

准备工作做完了,下面是页面的编写。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!--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>

     <p class="detail" ng-repeat="item in event.data">

      <span class="linename">{{item.customerName}}</span>

      <p style="float: right;">

         <span class="linenum">

         {{item.reserveNumber}}人

         </span>

      </p>

 

     </p>

    </timeline-panel>

   </timeline-event>

  </timeline>

 

 </ion-content>

</ion-view>

Salin selepas log masuk


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

//controller

angular.module(&#39;studyApp.controllers&#39;)

 

 .controller(&#39;TimeLineCtrl&#39;, function ($scope, $rootScope, $location) {

  $scope.title = &#39;时间轴&#39;;

 

  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"

     }]

 

    }

   ];

 

  }

 

 });

Salin selepas log masuk

四 效果图

相关推荐:

几款Jquery实现的漂亮时间轴教程

关于时间轴的效果解析

使用纯CSS3实现时间轴切换焦点图实例代码

Atas ialah kandungan terperinci angularjs实现时间轴效果分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan