angularjs时间轴

页面导航:首页 > 网络编程 > JavaScript > angularjs时间轴

angularjs时间轴

来源: 作者: 时间:2016-01-22 08:40 【

1、炫酷的图片是开端啊

\

2、前端html 代码

 

div class=container-fluid row>
            0>
                
                    
                
            
            
0 timeaxis-hide ng-click=hide()>

3、angular directive

 

 

var TaxApp = angular.module('MyApp');
TaxApp.directive(timelineaxis, function () {
    return {
        restrict: 'AE',
        transclude: true,
        template: '
    ' }; }); TaxApp.directive(timeaxisItem, function () { return { require: '^timeaxis', restrict: 'AE', transclude: true, template: '
    •  
    • ' }; }); TaxApp.directive(timeaxisPoint, function () { return { require: '^timeaxisItem', restrict: 'AE', transclude: true, template: '
       
      ' }; }); TaxApp.directive(timeaxisPanel, function () { return { require: '^timeaxis', restrict: 'AE', transclude: true, template: '
       
      ' }; }); TaxApp.directive(timeaxisHide, function () { return { require: '^timeaxisWarpper', restrict: 'AE', transclude: true, template: '' }; });
      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;
          }


       

       

      完活!!!

       

       

    Tags:

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <