• angularjs时间轴


    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;
        }



    完活。!!


  • 相关阅读:
    菜单按钮及导航
    实现点击箭头切换图片页和相册滚动
    网页设计的基本原则
    网格系统
    表单系列2
    类与对象学习总结
    汉诺塔的最简的步骤思路
    3.31作业解答
    初学java 用if语句做几个小程序
    做三个java初期学习的练习Var1~3为头目标
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/6892738.html
Copyright © 2020-2023  润新知