angularjs时间轴

来源：互联网发布：matlab遍历矩阵元素编辑：程序博客网时间：2024/05/16 15:32

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;    width: 100%;    display: inline-flex;}    /*时间轴线设置*/    .timeaxis:before    {        top: 0;        bottom: 0;        position: absolute;        content: " ";        height: 3px;        background-color: #00ced1;        top: 50%;        width: 100%;    }/*轴线点设置*/.timeaxis-point{    width: 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;    width: 140px;    height: 30px;}a .timeaxis-panel{    background-color: #fff;    float: left;    top: 5px;    border: 1px solid #d4d4d4;    border-radius: 2px;    width: 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{    width: 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 {        width: 100%;        padding-left: 50%;        height: 15px;        background-color: #00ced1;        color: #ffffff;        position: relative;        display: inline-block;    }

完活！！！

0 0