Skip to content

Commit 3389ba4

Browse files
author
Rafael J. Staib
committed
Add first example layout
1 parent ab6455e commit 3389ba4

File tree

6 files changed

+380
-5
lines changed

6 files changed

+380
-5
lines changed

‎JSteps.v11.suo

69.5 KB
Binary file not shown.

‎JSteps/Content/examples.css

Lines changed: 300 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,300 @@
1-

1+
/*
2+
Common
3+
*/
4+
5+
.wizard,
6+
.tabcontrol
7+
{
8+
display: block;
9+
width: 100%;
10+
overflow: hidden;
11+
}
12+
13+
.wizard a,
14+
.tabcontrol a
15+
{
16+
outline: 0;
17+
}
18+
19+
.wizard ul,
20+
.tabcontrol ul
21+
{
22+
list-style: none !important;
23+
padding: 0;
24+
margin: 0;
25+
}
26+
27+
.wizard ul > li,
28+
.tabcontrol ul > li
29+
{
30+
display: block;
31+
padding: 0;
32+
}
33+
34+
/* Accessibility */
35+
.wizard > .steps .current-info,
36+
.tabcontrol > .steps .current-info
37+
{
38+
position: absolute;
39+
left: -999em;
40+
}
41+
42+
.wizard > .content > .title,
43+
.tabcontrol > .content > .title
44+
{
45+
position: absolute;
46+
left: -999em;
47+
}
48+
49+
50+
51+
/*
52+
Wizard
53+
*/
54+
55+
.wizard > .steps
56+
{
57+
position: relative;
58+
display: block;
59+
width: 100%;
60+
}
61+
62+
.wizard > .steps .number
63+
{
64+
font-size: 1.429em;
65+
}
66+
67+
.wizard > .steps > ul > li
68+
{
69+
width: 25%;
70+
}
71+
72+
.wizard > .steps > ul > li,
73+
.wizard > .actions > ul > li
74+
{
75+
float: left;
76+
}
77+
78+
.wizard > .steps a
79+
{
80+
display: block;
81+
width: auto;
82+
height: 2.5em;
83+
padding: 0.5em 1em;
84+
background: #9ddcff;
85+
color: #2268b2;
86+
}
87+
88+
.wizard > .steps .disabled a
89+
{
90+
background: #9ddcff;
91+
color: #fff;
92+
cursor: default;
93+
}
94+
95+
.wizard > .steps .current a
96+
{
97+
background: #2879d0;
98+
color: #fff;
99+
cursor: default;
100+
}
101+
102+
.wizard > .steps .done a
103+
{
104+
background: #9ddcff;
105+
color: #2268b2;
106+
}
107+
108+
.wizard > .steps .error a
109+
{
110+
background: #f00;
111+
color: #474747;
112+
}
113+
114+
.wizard > .content
115+
{
116+
position: relative;
117+
display: block;
118+
width: auto;
119+
height: 300px;
120+
overflow: hidden;
121+
}
122+
123+
.wizard > .content > .body
124+
{
125+
float: left;
126+
position: absolute;
127+
width: auto;
128+
height: auto;
129+
padding: 0.5em;
130+
}
131+
132+
.wizard > .content > .body ul
133+
{
134+
list-style: disc !important;
135+
}
136+
137+
.wizard > .content > .body ul > li
138+
{
139+
display: list-item;
140+
}
141+
142+
.wizard > .content > .body > iframe
143+
{
144+
border: 0 none;
145+
width: 100%;
146+
height: 100%;
147+
}
148+
149+
.wizard > .content > .body input
150+
{
151+
border: 1px solid #ccc;
152+
}
153+
154+
.wizard > .content > .body input.error
155+
{
156+
background: rgb(251, 227, 228);
157+
border: 1px solid #fbc2c4;
158+
color: #8a1f11;
159+
}
160+
161+
.wizard > .content > .body label.error
162+
{
163+
font-size: .85em;
164+
color: #8a1f11;
165+
}
166+
167+
.wizard > .actions
168+
{
169+
position: relative;
170+
display: block;
171+
width: auto;
172+
height: 2.5em;
173+
text-align: right;
174+
margin-top: 1em;
175+
}
176+
177+
.wizard > .actions > ul
178+
{
179+
display: inline-block;
180+
text-align: right;
181+
}
182+
183+
.wizard > .actions > ul > li
184+
{
185+
margin: 0 0.5em;
186+
}
187+
188+
.wizard > .actions a
189+
{
190+
display: block;
191+
color: #fff;
192+
background: #2879d0;
193+
height: 2em;
194+
padding: 0.5em;
195+
}
196+
197+
.wizard > .actions .disabled a
198+
{
199+
background: #9ddcff;
200+
}
201+
202+
.wizard > .loading
203+
{
204+
}
205+
206+
.wizard > .loading .spinner
207+
{
208+
}
209+
210+
211+
212+
/*
213+
Tabcontrol
214+
*/
215+
216+
.tabcontrol > .steps
217+
{
218+
position: relative;
219+
display: block;
220+
width: 600px;
221+
}
222+
223+
.tabcontrol > .steps > ul
224+
{
225+
position: relative;
226+
margin: 6px 0 0 0;
227+
top: 1px;
228+
z-index: 1;
229+
}
230+
231+
.tabcontrol > .steps > ul > li
232+
{
233+
background: #edecec;
234+
border: 1px solid #bbb;
235+
float: left;
236+
margin: 5px -1px 0 0;
237+
}
238+
239+
.tabcontrol > .steps > ul > li:hover
240+
{
241+
background: #fff;
242+
}
243+
244+
.tabcontrol > .steps > ul > li.current
245+
{
246+
background: #fff;
247+
border-bottom: 0 none;
248+
padding-bottom: 1px;
249+
margin-top: 0;
250+
}
251+
252+
.tabcontrol > .steps > ul > li > a
253+
{
254+
display: inline-block;
255+
font: 1em/1em Arial, Verdana, sans-serif;
256+
border: 0 none;
257+
margin: 0;
258+
padding: 10px 30px;
259+
color: #5f5f5f;
260+
}
261+
262+
.tabcontrol > .steps > ul > li > a:hover
263+
{
264+
text-decoration: none;
265+
}
266+
267+
.tabcontrol > .steps > ul > li.current > a
268+
{
269+
padding: 15px 30px 10px 30px;
270+
}
271+
272+
.tabcontrol > .content
273+
{
274+
position: relative;
275+
display: inline-block;
276+
width: 600px;
277+
height: 300px;
278+
overflow: hidden;
279+
border-top: 1px solid #bbb;
280+
padding-top: 20px;
281+
}
282+
283+
.tabcontrol > .content > .body
284+
{
285+
float: left;
286+
position: absolute;
287+
width: 580px;
288+
height: 280px;
289+
padding: 10px;
290+
}
291+
292+
.tabcontrol > .content > .body ul
293+
{
294+
list-style: disc !important;
295+
}
296+
297+
.tabcontrol > .content > .body ul > li
298+
{
299+
display: list-item;
300+
}

‎JSteps/Views/About/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<h2>Hi, my name is Rafael Staib.</h2>
2121
<p>I am a software architect with an affinity for design, both UI and software design, living in Germany.
2222
I have been programming since 2000 and am familiar with .Net, C#, JavaScript, HTML, CSS and more.
23-
I love to think abstract, solve problems and be very interested in future technologies.</p>
23+
I love to think abstract, solve problems and am very interested in future technologies.</p>
2424
<p>If you would like to contact me, do not hesitate to send me a message on twitter <a href="http://twitter.com/RafaelStaib" target="_blank">@@RafaelStaib</a> or email me to <a href="mailto:me@rafaelstaib.com">me@rafaelstaib.com</a>.
2525
However in case you want to post bug reports or other contributions (e.g. enhancements or features) please go to <a href="https://github.com/rstaib/jquery-steps/issues" target="_blank">GitHub issue tracker</a>.</p>
2626
<h3>Buy me a beer</h3>

‎JSteps/Views/Examples/Index.cshtml

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,81 @@
1313

1414
<div class="content">
1515
<div class="row-fluid">
16+
<nav id="lefthand" class="span3">
17+
<ul id="lefthand-nav" class="nav nav-list">
18+
<li><a href="#basic">Basic Example</a></li>
19+
<li><a href="#basic-form">Basic Form Example</a></li>
20+
<li><a href="#advanced-form">Advanced Form Example</a></li>
21+
<li><a href="#manipulation">Dynamic Manipulation Example</a></li>
22+
<li><a href="#tabs">Tabs Example</a></li>
23+
<li><a href="#vertical">Vertical Steps Example</a></li>
24+
<li><a href="#async">Async Content Loading Example</a></li>
25+
<li><a href="#embed">Embedded Content Example</a></li>
26+
</ul>
27+
</nav>
28+
<div class="span9 main">
29+
<section id="basic">
30+
<h2 class="page-header">Basic Example</h2>
31+
<div id="wizard-1">
32+
<h3>Keyboard</h3>
33+
<section>
34+
<p>Try the keyboard navigation by clicking arrow left or right!</p>
35+
</section>
36+
37+
<h3>Transition Effects</h3>
38+
<section>
39+
<p>ljlkjlk</p>
40+
</section>
41+
42+
<h3>Pager</h3>
43+
<section>
44+
<p>jggj</p>
45+
</section>
46+
</div>
47+
</section>
48+
<section id="basic-form">
49+
<h2 class="page-header">Basic Form Example</h2>
50+
51+
</section>
52+
<section id="advanced-form">
53+
<h2 class="page-header">Advanced Form Example</h2>
54+
55+
</section>
56+
<section id="manipulation">
57+
<h2 class="page-header">Dynamic Manipulation Example</h2>
58+
59+
</section>
60+
<section id="tabs">
61+
<h2 class="page-header">Tabs Example</h2>
62+
63+
</section>
64+
<section id="vertical">
65+
<h2 class="page-header">Vertical Steps Example</h2>
66+
67+
</section>
68+
<section id="async">
69+
<h2 class="page-header">Async Content Loading Example</h2>
70+
71+
</section>
72+
<section id="embed">
73+
<h2 class="page-header">Embedded Content Example</h2>
74+
75+
</section>
76+
</div>
1677
</div>
17-
</div>
78+
</div>
79+
80+
@section Scripts
81+
{
82+
<script>
83+
$(function ()
84+
{
85+
$("#wizard-1").steps({
86+
headerTag: "h3",
87+
bodyTag: "section",
88+
transitionEffect: "slideLeft",
89+
autoFocus: true
90+
});
91+
});
92+
</script>
93+
}

0 commit comments

Comments
 (0)