1、炫酷的图片是开端啊
2、前端html 代码
<div class="container-fluid row"> <timelineaxis ng-show="paramId>0"> <timeaxis-item ng-repeat="item in items"> <a href="#/taxrm/edit/{{item.versionid}}" ng-class="{'active':paramId==item.versionid}"> <timeaxis-point></timeaxis-point> <timeaxis-panel>{{item.content}}</timeaxis-panel> </a> </timeaxis-item> </timelineaxis> <div class="timeaxis-hide" ng-show="paramId>0" timeaxis-hide ng-click="hide()"></div> </div>
3、angular directive
var TaxApp = angular.module('MyApp'); TaxApp.directive("timelineaxis", function () { return { restrict: 'AE', transclude: true, template: '<div class="timeaxis-warpper" ><ul class="timeaxis" ng-transclude></ul></div>' }; }); TaxApp.directive("timeaxisItem", function () { return { require: '^timeaxis', restrict: 'AE', transclude: true, template: '<li ng-class-even="'timeaxis-inverted'" ng-transclude ></li>' }; }); TaxApp.directive("timeaxisPoint", function () { return { require: '^timeaxisItem', restrict: 'AE', transclude: true, template: '<div class="timeaxis-point"><span></span></div>' }; }); TaxApp.directive("timeaxisPanel", function () { return { require: '^timeaxis', restrict: 'AE', transclude: true, template: '<div class="timeaxis-panel" ng-transclude></div>' }; }); TaxApp.directive("timeaxisHide", function () { return { require: '^timeaxisWarpper', restrict: 'AE', transclude: true, template: '<span class="glyphicon glyphicon-menu-up"></span>' }; });
4、angular controller
angular.module('MyApp').controller('taxrmedit',function($scope,$routeParams){ $scope.paramId = $routeParams.id; if ($scope.paramId > 0) { $scope.timeaxis = function () { $scope.items = [{ versionid: 10, content: '2015.07.01~' }, { versionid: 9, content: '2015.05.01~2015.07.01' }, { versionid: 8, content: '2014.12.01~2015.05.01' }, { versionid: 7, content: '2014.01.01~2014.12.01' }, { versionid: 6, content: '2013.10.01~2014.01.01' }]; }; $scope.timeaxis(); } $scope.hide = function () { if (angular.element("timelineaxis").attr("style") === undefined || angular.element("timelineaxis").attr("style") != "display: none;") { angular.element("timelineaxis").hide(); angular.element(".timeaxis-hide>span").removeClass("glyphicon-menu-up"); angular.element(".timeaxis-hide>span").addClass("glyphicon-menu-down"); } else { angular.element("timelineaxis").show(); angular.element(".timeaxis-hide>span").removeClass("glyphicon-menu-down"); angular.element(".timeaxis-hide>span").addClass("glyphicon-menu-up"); } }; });
5、样式表
/*时间轴主区设置*/ .timeaxis-warpper { overflow-x: auto; overflow-y: hidden; display: block; margin-right: 15px; padding-left: 15px; overflow-x: auto; overflow-y: hidden; } /*时间轴箭头设置*/ .timeaxis-warpper:before { position: relative; top: 63px; left: -15px; display: inline-block; border-top: 7px solid transparent; border-left: 0 solid #00ced1; border-right: 15px solid #00ced1; border-bottom: 7px solid transparent; content: " "; } .timeaxis { padding: 0; list-style: none; height: 100px; position: relative; 100%; display: inline-flex; } /*时间轴线设置*/ .timeaxis:before { top: 0; bottom: 0; position: absolute; content: " "; height: 3px; background-color: #00ced1; top: 50%; 100%; } /*轴线点设置*/ .timeaxis-point { 8px; height: 8px; top: 48px; margin-left: 65px; border-radius: 4px; border: 1px solid #00ced1; background-color: #ffffff; background-repeat: no-repeat; position: absolute; } .timeaxis-point span { color: #bab9c9; font-size: 10px; padding: 0; margin: 0; position: relative; left: -5px; } /*设置区域*/ .timeaxis li { float: left; 140px; height: 30px; } a .timeaxis-panel { background-color: #fff; float: left; top: 5px; border: 1px solid #d4d4d4; border-radius: 2px; 100%; height: 100%; position: relative; padding: 5px 5px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175); } a .timeaxis-panel span { color: #333333; } .timeaxis-panel:before { position: absolute; bottom: -13px; top: auto; left: 57px; display: inline-block; border-top: 13px solid #ccc; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 0px solid #ccc; content: " "; } .timeaxis-panel:after { position: absolute; bottom: -12px; top: auto; left: 58px; border-top: 12px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0px solid #fff; content: " "; } a.active .timeaxis-panel, a:focus .timeaxis-panel { border: 1px solid #00ced1; background-color: #00ced1; } a.active .timeaxis-panel span, a:focus .timeaxis-panel span { color: #ffffff; } a.active .timeaxis-panel:before, a:focus .timeaxis-panel:before { position: absolute; bottom: -13px; top: auto; left: 57px; display: inline-block; border-top: 13px solid #00ced1; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 0px solid #00ced1; content: " "; } a.active .timeaxis-panel:after, a:focus .timeaxis-panel:after { position: absolute; bottom: -12px; top: auto; left: 58px; border-top: 12px solid #00ced1; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0px solid #00ced1; content: " "; } a.active .timeaxis-point { 8px; height: 8px; top: 48px; margin-left: 65px; border-radius: 4px; border: 2px solid #ffffff; background-color: #00ced1; background-repeat: no-repeat; position: absolute; } .timeaxis-inverted .timeaxis-panel { top: 67px; } .timeaxis-inverted .timeaxis-panel:before { position: absolute; bottom: auto; top: -12px; left: 57px; display: inline-block; border-top: 0px solid #ccc; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 12px solid #ccc; content: " "; } .timeaxis-inverted .timeaxis-panel:after { position: absolute; bottom: auto; top: -11px; left: 58px; border-top: 0px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 11px solid #fff; content: " "; } .timeaxis-inverted a.active .timeaxis-panel:before, .timeaxis-inverted a:focus .timeaxis-panel:before { position: absolute; bottom: auto; top: -12px; left: 57px; display: inline-block; border-top: 0px solid #00ced1; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 12px solid #00ced1; content: " "; } .timeaxis-inverted a.active .timeaxis-panel:after, .timeaxis-inverted a:focus .timeaxis-panel:after { position: absolute; bottom: auto; top: -11px; left: 58px; display: inline-block; border-top: 0px solid #00ced1; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 11px solid #00ced1; content: " "; } .timeaxis-hide { 100%; padding-left: 50%; height: 15px; background-color: #00ced1; color: #ffffff; position: relative; display: inline-block; }