<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="laboratoryIK">
<div class="container page_content ik_lab" ng-init="cfg.isRegistration = true">
<h1 class="page_title">Step navigation</h1>
<nav class="step_navigation step_navigation_laboratory" ng-controller="stepNavigationLabCtrl">
<table>
<tbody>
<tr>
<td ng-repeat="step in stepsList" ng-class="{step_success : step.success, step_active : currentStep.name == step.name}" ng-bind="step.name" data-toggle="tooltip" data-placement="top" title="{{step.title}}" ng-click="changeStep(step, $index)"></td>
</tr>
</tbody>
</table>
</nav>
<div class="ik_form_container">
<div class="content_pad">
<div class="slide-animate-container">
<div class="step_form_contaiener slide-animate" ng-include="currentStep.template" autoscroll=""></div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function(window, angular, $, undefined){
"use strict";
angular.module('laboratoryIK', ['ngAnimate'])
.controller('stepNavigationLabCtrl', ['$scope', '$rootScope', '$timeout', function($scope, $rootScope, $timeout){
$scope.changeStep = function(step, index){
if(step.name === '1' || $rootScope.stepsList[index - 1].success === true){
$rootScope.currentStep = step;
}
};
}])
.controller('step1_ik_Ctrl', ['$scope', '$rootScope', function($scope, $rootScope){
//ctrl code
}])
.controller('step2_ik_Ctrl', [function(){
//ctrl code
}])
.controller('step3_ik_Ctrl', [function(){
//ctrl code
}])
.run(['$rootScope', '$templateCache', '$http', function($rootScope, $templateCache, $http){
$rootScope.cfg = {
isRegistration : false,
templatesPath : ''
};
$rootScope.laboratory = {
};
$rootScope.getLaboratory = function(){
};
$rootScope.saveLaboratory = function(){
};
$rootScope.saveLaboratoryToWebStorage = function(){
};
$rootScope.stepsList = [
{
name : '1',
title : 'Step 1',
success : true,
template : $rootScope.cfg.templatesPath + 'step1.html'
},
{
name : '2',
title : 'Step 2',
success : true,
template : $rootScope.cfg.templatesPath + 'step2.html'
},
{
name : '3',
title : 'Step 3',
success : false,
template : $rootScope.cfg.templatesPath + 'step3.html'
}
];
/* SOLUTION */
$rootScope.stepsList.forEach(function(step){
if(step.template){
$templateCache.put(step.template, $http({method: 'GET', url: step.template, cache: true}));
}
});
/* /SOLUTION */
$rootScope.currentStep = $rootScope.stepsList[0];
}]);
})(window, angular, jQuery);
<h1>Step 1</h1>
<form class="step1_form" name="step1_form" ng-controller="step1_ik_Ctrl">
<fieldset>
Controller form
</fieldset>
</form>
<h1>Step 2</h1>
<form class="step1_form" name="step1_form" ng-controller="step2_ik_Ctrl">
<fieldset>
Controller form
</fieldset>
</form>
<h1>Step 3</h1>
<form class="step1_form" name="step1_form" ng-controller="step3_ik_Ctrl">
<fieldset>
Controller form
</fieldset>
</form>
.ik_form_container .slide-animate-container {
position: relative;
min-height: 800px;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.ik_form_container .slide-animate {
position: relative;
-webkit-transition-property: transform opacity;
-moz-transition-property: transform opacity;
transition-property: transform opacity;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
transition-duration: 600ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.ik_form_container .slide-animate.ng-enter, .ik_form_container .slide-animate.ng-leave {
position: absolute;
top: 0;
}
.ik_form_container .slide-animate.ng-enter {
-webkit-transform: translateX(1000px);
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
-o-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
.ik_form_container .slide-animate.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.ik_form_container .slide-animate.ng-leave {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.ik_form_container .slide-animate.ng-leave.ng-leave-active {
-webkit-transform: translateX(-1000px);
-moz-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
/*other styles*/
.step_navigation table {
border-collapse: separate;
table-layout: fixed;
}
.step_navigation table td {
background: #FFF;
padding: 10px 0;
text-align: center;
border-width: 2px 0 2px 2px;
border-style: solid;
border-color: #cacaca;
cursor: default;
}
.step_navigation table td:nth-last-child(1) {
border-right-width: 2px;
}
.step_navigation table td.step_success {
border-color: #abcc6b;
cursor: pointer;
}
.step_navigation table td.step_success:before {
content: '';
display: inline-block;
*display: inline;
*zoom: 1;
width: 12px;
height: 10px;
background: url(/pics/i/sprite.png) -420px 0 no-repeat;
margin-right: 4px;
}
.step_navigation table td.step_active {
border-color: #ff6600;
border-right-width: 2px;
cursor: default;
}
.step_navigation table td.step_active + td {
border-left-width: 0px;
}
.step_navigation_laboratory table {
width: 100%;
}