Skip to content

Commit 0aa1c4a

Browse files
author
Rafael J. Staib
committed
Add test version
1 parent 81f2b58 commit 0aa1c4a

17 files changed

+1614
-1
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
dist
2-
build/dist
2+
build
33
docs
44
*~
55
*.diff

test/demo/add-remove.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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="../build/jquery.steps.js"></script>
18+
</head>
19+
<body>
20+
<!--[if lt IE 7]>
21+
<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>
22+
<![endif]-->
23+
24+
<header>
25+
<h1>Wizard Demo</h1>
26+
<nav>
27+
<ul>
28+
<li><a href="index.html">Basic</a></li>
29+
<li><a href="vertical.html">Vertical</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+
});
48+
$("#wizard").steps("add", {
49+
title: "Fifth Step",
50+
content: "New!"
51+
});
52+
$("#wizard").steps("insert", 1, {
53+
title: "Second Step",
54+
content: "New!"
55+
});
56+
$("#wizard").steps("remove", 2);
57+
});
58+
</script>
59+
60+
<div id="wizard">
61+
<h2>First Step</h2>
62+
<section>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
64+
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
65+
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
66+
</section>
67+
68+
<h2>Second Step</h2>
69+
<section>
70+
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
71+
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
72+
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
73+
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
74+
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
75+
Donec non pulvinar urna. Aliquam id velit lacus.</p>
76+
</section>
77+
78+
<h2>Third Step</h2>
79+
<section>
80+
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
81+
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
82+
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
83+
venenatis.</p>
84+
</section>
85+
86+
<h2>Forth Step</h2>
87+
<section>
88+
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
89+
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
90+
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
91+
</section>
92+
</div>
93+
</div>
94+
</body>
95+
</html>

test/demo/css/jquery.steps.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.wizard
2+
{
3+
width: 600px;
4+
}
5+
6+
7+
8+
/* Common */
9+
.wizard a
10+
{
11+
outline: 0;
12+
}
13+
14+
.wizard ol,
15+
.wizard ul
16+
{
17+
list-style: none;
18+
}
19+
20+
21+
22+
/* Accessibility */
23+
.wizard .audible
24+
{
25+
position: absolute;
26+
left: -999em;
27+
}
28+
29+
30+
.wizard > .steps
31+
{
32+
background: #fff;
33+
width: 600px;
34+
height: 30px;
35+
}
36+
37+
.wizard.vertical > .steps
38+
{
39+
float: left;
40+
width: 200px;
41+
height: 330px;
42+
}
43+
44+
.wizard > .steps .number
45+
{
46+
font-size: 22px;
47+
font-weight: bold;
48+
}
49+
50+
.wizard li[role="tab"],
51+
.wizard > .actions li
52+
{
53+
float: left;
54+
}
55+
56+
.wizard li[role="tab"] a
57+
{
58+
background: #999;
59+
}
60+
61+
.wizard li[role="tab"].disabled a
62+
{
63+
background: #ccc;
64+
cursor: default;
65+
}
66+
67+
.wizard li[role="tab"].current a
68+
{
69+
background: rgb(241, 101, 41);
70+
cursor: default;
71+
}
72+
73+
.wizard li[role="tab"].done a
74+
{
75+
background: #4cff00;
76+
}
77+
78+
.wizard li[role="tab"].error a
79+
{
80+
background: #f00;
81+
}
82+
83+
.wizard > .content
84+
{
85+
width: 600px;
86+
height: 300px;
87+
overflow: hidden;
88+
}
89+
90+
.wizard.vertical > .content
91+
{
92+
float: left;
93+
width: 400px;
94+
height: 330px;
95+
}
96+
97+
.wizard > .content > .title
98+
{
99+
position: absolute;
100+
left: -999em;
101+
}
102+
103+
.wizard > .content > .body
104+
{
105+
border: 1px solid #CCC;
106+
float: left;
107+
position: absolute;
108+
width: 600px;
109+
height: 300px;
110+
z-index: -1;
111+
}
112+
113+
.wizard.vertical > .content > .body
114+
{
115+
width: 400px;
116+
}
117+
118+
.wizard > .content > .body > iframe
119+
{
120+
border: 0 none;
121+
width: 100%;
122+
height: 200px;
123+
}
124+
125+
.wizard > .actions
126+
{
127+
width: 600px;
128+
height: 30px;
129+
}
130+
131+
.wizard > .actions [aria-disabled="true"] a
132+
{
133+
color: #aaa;
134+
}
135+
136+
.wizard > .loading
137+
{
138+
}
139+
140+
.wizard > .loading .spinner
141+
{
142+
}

0 commit comments

Comments
 (0)