Skip to content

Commit 60bbde7

Browse files
author
Rafael J. Staib
committed
Add vertical orientation
1 parent 780bfe5 commit 60bbde7

File tree

7 files changed

+168
-5
lines changed

7 files changed

+168
-5
lines changed

‎GHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
- Nested tags which have the same node name as the body tag cause an exception. Closes issue [#4](https://github.com/rstaib/jquery-steps/issues/4)
66
- Improved architecture under the hood (data and UI changes are separated into layer)
77
- Improved code for better minification
8+
- Configurable clearfix css class
9+
- Vertical step navigation (default: horizontal)
810

911
## 0.9.7
1012

‎demo/css/jquery.steps.css

+23
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,18 @@
2929

3030
.wizard > .steps
3131
{
32+
background: #fff;
3233
width: 600px;
3334
height: 30px;
3435
}
3536

37+
.wizard.vertical > .steps
38+
{
39+
float: left;
40+
width: 200px;
41+
height: 330px;
42+
}
43+
3644
.wizard > .steps .number
3745
{
3846
font-size: 22px;
@@ -76,6 +84,14 @@
7684
{
7785
width: 600px;
7886
height: 300px;
87+
overflow: hidden;
88+
}
89+
90+
.wizard.vertical > .content
91+
{
92+
float: left;
93+
width: 400px;
94+
height: 330px;
7995
}
8096

8197
.wizard > .content > .title
@@ -91,6 +107,12 @@
91107
position: absolute;
92108
width: 600px;
93109
height: 300px;
110+
z-index: -1;
111+
}
112+
113+
.wizard.vertical > .content > .body
114+
{
115+
width: 400px;
94116
}
95117

96118
.wizard > .content > .body > iframe
@@ -103,6 +125,7 @@
103125
.wizard > .actions
104126
{
105127
width: 600px;
128+
height: 30px;
106129
}
107130

108131
.wizard > .actions [aria-disabled="true"] a

‎demo/vertical.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>jQeury.steps Demos</title>
10+
<meta name="description" content="">
11+
<meta name="viewport" content="width=device-width">
12+
<link rel="stylesheet" href="css/normalize.css">
13+
<link rel="stylesheet" href="css/main.css">
14+
<link rel="stylesheet" href="css/jquery.steps.css">
15+
<script src="../lib/modernizr-2.6.2.min.js"></script>
16+
<script src="../lib/jquery-1.9.1.min.js"></script>
17+
<script src="../lib/jquery.cookie-1.3.1.js"></script>
18+
<script src="../build/jquery.steps.js"></script>
19+
</head>
20+
<body>
21+
<!--[if lt IE 7]>
22+
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
23+
<![endif]-->
24+
25+
<header>
26+
<h1>Wizard Demo</h1>
27+
<nav>
28+
<ul>
29+
<li><a href="index.html">Basic</a></li>
30+
<li><a href="multiple.html">Multiple Wizard</a></li>
31+
<li><a href="async-iframe.html">Async/Iframe Content</a></li>
32+
<li><a href="form.html">Step Validation</a></li>
33+
<li><a href="add-remove.html">Add/Remove Steps via API</a></li>
34+
</ul>
35+
</nav>
36+
</header>
37+
38+
<div class="content">
39+
<h1>Basic Demo</h1>
40+
41+
<script>
42+
$(function ()
43+
{
44+
$("#wizard").steps({
45+
headerTag: "h2",
46+
bodyTag: "section",
47+
transitionEffect: "slideLeft",
48+
stepsOrientation: "vertical"
49+
});
50+
});
51+
</script>
52+
53+
<div id="wizard">
54+
<h2>First Step</h2>
55+
<section>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
57+
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
58+
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
59+
</section>
60+
61+
<h2>Second Step</h2>
62+
<section>
63+
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
64+
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
65+
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
66+
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
67+
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
68+
Donec non pulvinar urna. Aliquam id velit lacus.</p>
69+
</section>
70+
71+
<h2>Third Step</h2>
72+
<section>
73+
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
74+
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
75+
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
76+
venenatis.</p>
77+
</section>
78+
79+
<h2>Forth Step</h2>
80+
<section>
81+
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
82+
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
83+
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
84+
</section>
85+
</div>
86+
</div>
87+
</body>
88+
</html>

‎src/banner.js

-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
* - Add tests and styles for loading animation (Spinner)
1717
* - Add tests for add, insert and remove
1818
* - Add tests in general
19-
* - Shrink the comprehensive code
2019
*
2120
* Planed Features:
2221
* - Progress bar
@@ -27,7 +26,6 @@
2726
* - Jump from any page to a specific step (via uri hash tag test.html#steps-uid-1-3)
2827
* - Add Swipe gesture for devices that support touch
2928
* - Allow clicking on the next step even if it is disabled (so that people can decide whether they use prev button or the step button next to the current step)
30-
* - Property to set the step orientation (horizontal/vertical) [stepOrientation: "horizontal" v 0]
3129
*
3230
*/
3331

‎src/defaults.js

+20
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,26 @@ var defaults = $.fn.steps.defaults = {
7878
**/
7979
cssClass: "wizard",
8080

81+
/**
82+
* The css class which will be used for floating scenarios.
83+
*
84+
* @property clearFixCssClass
85+
* @type String
86+
* @default "clearfix"
87+
* @for defaults
88+
**/
89+
clearFixCssClass: "clearfix",
90+
91+
/**
92+
* The css class which will be used for floating scenarios.
93+
*
94+
* @property clearFixCssClass
95+
* @type String
96+
* @default "clearfix"
97+
* @for defaults
98+
**/
99+
stepsOrientation: stepsOrientation.horizontal,
100+
81101
/*
82102
* Tempplates
83103
*/

‎src/enums.js

+28
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,34 @@ var contentMode = $.fn.steps.contentMode = {
3636
async: 2
3737
};
3838

39+
/**
40+
* An enum represents the orientation of the steps navigation.
41+
*
42+
* @class stepsOrientation
43+
* @for steps
44+
**/
45+
var stepsOrientation = $.fn.steps.stepsOrientation = {
46+
/**
47+
* Horizontal orientation
48+
*
49+
* @readOnly
50+
* @property horizontal
51+
* @type Integer
52+
* @for stepsOrientation
53+
**/
54+
horizontal: 0,
55+
56+
/**
57+
* Vertical orientation
58+
*
59+
* @readOnly
60+
* @property vertical
61+
* @type Integer
62+
* @for stepsOrientation
63+
**/
64+
vertical: 1
65+
};
66+
3967
/**
4068
* An enum that represents the various transition animations.
4169
*

‎src/privates.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -857,14 +857,16 @@ function render(wizard, options, state)
857857
{
858858
// Create a content wrapper and copy HTML from the intial wizard structure
859859
var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
860+
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
861+
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
860862
contentWrapper = $(format(wrapperTemplate, options.contentContainerTag, "content", wizard.html())),
861863
stepsWrapper = $(format(wrapperTemplate, options.stepsContainerTag, "steps", "<ul role=\"tablist\"></ul>")),
862864
stepTitles = contentWrapper.children(options.headerTag),
863865
stepContents = contentWrapper.children(options.bodyTag);
864866

865867
// Transform the wizard wrapper and remove the inner HTML
866-
wizard.attr("role", "application").addClass(options.cssClass).empty()
867-
.append(stepsWrapper).append(contentWrapper);
868+
wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
869+
.addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
868870

869871
// Add WIA-ARIA support
870872
stepContents.each(function (index)
@@ -1089,10 +1091,12 @@ function startTransitionEffect(wizard, options, state, index, oldIndex)
10891091
posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
10901092
posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);
10911093

1094+
var currentPos = currentStep.position().left;
1095+
10921096
currentStep.animate({ left: posFadeOut }, effectSpeed,
10931097
function () { $(this).hideAria(); }).promise();
10941098
newStep.css("left", posFadeIn + "px").showAria()
1095-
.animate({ left: 0 }, effectSpeed).promise();
1099+
.animate({ left: currentPos }, effectSpeed).promise();
10961100
break;
10971101

10981102
default:

0 commit comments

Comments
 (0)