Maison >interface Web >js tutoriel >Exemple de code pour AngularJS pour obtenir un effet de chronologie
AngularJS est un framework JavaScript. C'est une bibliothèque écrite en JavaScript. Il peut être ajouté aux pages HTML via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Le HTML est étendu via des directives et les données sont liées au HTML via des expressions. Il est publié sous forme de fichier JavaScript et peut être ajouté aux pages Web via la balise script. Cet article présente principalement l'exemple de code d'angularjs pour obtenir un effet de chronologie.
1 Présentation du package
Présentation du package angulaire-timeline.
Adresse de téléchargement : angulaire-timeline.zip
Introduire
<link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/angular-timeline.js"></script>dans index.html
est cité dans app.js. S'il n'est pas cité, cela n'aura aucun effet.
2 Réécrire le CSS
Réécrire le CSS selon les besoins, réécrire la partie principale.
peut être écrit en style.css, ou vous pouvez créer un nouveau fichier css, mais il doit être cité dans 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; }
Trois pages
Les préparatifs sont terminés, voici les pages écrire.
<!--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>
//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" }] } ]; } });
Quatre rendus
Tutoriels associés :
Comment implémenter l'effet timeline en CSS3
Implémentation PHP de la fonction timeline code_PHP tutoriel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!