1、炫酷的图片是开端啊
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">
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;
}
完活。！！