Skip to content

Commit 545f5db

Browse files
author
Rafael J. Staib
committed
Add more documentation and fixes for IE8 and IE9
1 parent ba11ef1 commit 545f5db

File tree

9 files changed

+161
-14
lines changed

9 files changed

+161
-14
lines changed

‎JSteps.v11.suo

-43 KB
Binary file not shown.

‎JSteps/Content/custom.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ ol > li, ul > li
229229
.sitewrapper > .content #lefthand-nav.affix
230230
{
231231
top: 7.143em;
232-
width: 270px;
232+
width: 220px;
233233
}
234234

235235
.sitewrapper > .content #lefthand-nav > li > a
@@ -347,6 +347,7 @@ body > footer
347347
.navbar > .navbar-inner
348348
{
349349
background: none #2184be;
350+
filter: none;
350351
border: 0 none;
351352
min-height: 4.286em;
352353

@@ -423,6 +424,14 @@ body > footer
423424
font-weight: 700;
424425
}
425426

427+
@media (min-width: 1200px)
428+
{
429+
.sitewrapper > .content #lefthand-nav.affix
430+
{
431+
width: 270px;
432+
}
433+
}
434+
426435
@media (max-width: 1199px)
427436
{
428437
.sitewrapper > header > p
@@ -432,7 +441,6 @@ body > footer
432441

433442
.sitewrapper > .content #lefthand-nav.affix
434443
{
435-
top: 7.143em;
436444
width: 220px;
437445
}
438446
}

‎JSteps/Views/About/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="span3 me">
2121
<img src="@Url.Content("~/Content/images/me.png")" />
2222
</div>
23-
<div class="span9 main">
23+
<div class="span9 main" role="main">
2424
<section>
2525
<h2>Hi, my name is Rafael Staib.</h2>
2626
<p>I am a software architect with an affinity for design, both UI and software design, living in Germany.

‎JSteps/Views/Documentation/Index.cshtml

Lines changed: 142 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,18 @@
1919

2020
<div class="content">
2121
<div class="row-fluid">
22-
<nav id="lefthand" class="span3">
22+
<nav id="lefthand" class="span3" role="navigation">
2323
<ul id="lefthand-nav" class="nav nav-list">
2424
<li><a href="#init">Initialization</a></li>
25+
<li><a href="#css">CSS</a></li>
2526
<li><a href="#options">Options</a></li>
2627
<li><a href="#methods">Methods</a></li>
2728
<li><a href="#requirements">Requirements</a></li>
2829
<li><a href="#browser">Browser Support</a></li>
2930
<li><a href="#integration">Integration</a></li>
3031
</ul>
3132
</nav>
32-
<div class="span9 main">
33+
<div class="span9 main" role="main">
3334
<section id="init">
3435
<h2 class="page-header">Initialization</h2>
3536
<p class="lead">In this section you will learn how to intialize jQuery Steps and what will happen if you do that.</p>
@@ -86,10 +87,148 @@
8687

8788
<p class="alert alert-info"><strong>Info:</strong> </p>
8889
</section>
90+
<section id="css">
91+
<h2 class="page-header">CSS</h2>
92+
<p class="lead">In this section you will learn about styling and the capabilities you have.</p>
93+
<h3>Transformation</h3>
94+
<p>With transformation is meant the transition of the initial <abbr title="Hypertext Markup Language">HTML</abbr> code
95+
to the transformed <abbr title="Hypertext Markup Language">HTML</abbr> code.
96+
So our initial code looks like that.</p>
97+
<pre class="prettyprint linenums">
98+
&lt;div id="wizard"&gt;
99+
&lt;h1&gt;First Step&lt;/h1&gt;
100+
&lt;div&gt;First Content&lt;/div&gt;
101+
&lt;h1&gt;Second Step&lt;/h1&gt;
102+
&lt;div&gt;Second Content&lt;/div&gt;
103+
&lt;/div&gt;
104+
</pre>
105+
<p>And after the transformation our resulting code looks like this.</p>
106+
<pre class="prettyprint linenums">
107+
&lt;div class="wizard clearfix" id="wizard" role="application"&gt;
108+
&lt;div class="steps clearfix"&gt;
109+
&lt;ul role="tablist"&gt;
110+
&lt;li class="first current" role="tab" aria-disabled="false" aria-selected="true"&gt;
111+
&lt;a id="steps-uid-1-t-0" aria-controls="steps-uid-1-p-0" href="#steps-uid-1-h-0"&gt;&lt;span class="current-info audible"&gt;current step: &lt;/span&gt;&lt;span class="number"&gt;1.&lt;/span&gt; First Step&lt;/a&gt;
112+
&lt;/li&gt;
113+
&lt;li class="disabled" role="tab" aria-disabled="true"&gt;
114+
&lt;a id="steps-uid-1-t-1" aria-controls="steps-uid-1-p-1" href="#steps-uid-1-h-1"&gt;&lt;span class="number"&gt;2.&lt;/span&gt; Second Step&lt;/a&gt;
115+
&lt;/li&gt;
116+
&lt;/ul&gt;
117+
&lt;/div&gt;
118+
&lt;div class="content clearfix"&gt;
119+
&lt;h1 tabindex="-1" class="title current" id="steps-uid-1-h-0"&gt;First Step&lt;/h1&gt;
120+
&lt;div class="body current" id="steps-uid-1-p-0" role="tabpanel" aria-hidden="false" aria-labelledby="steps-uid-1-h-0" style="display: block;"&gt;
121+
First Content
122+
&lt;/div&gt;
123+
&lt;h1 tabindex="-1" class="title" id="steps-uid-1-h-1"&gt;Second Step&lt;/h1&gt;
124+
&lt;div class="body" id="steps-uid-1-p-1" role="tabpanel" aria-hidden="true" aria-labelledby="steps-uid-1-h-1" style="display: none;"&gt;
125+
Second Content
126+
&lt;/div&gt;
127+
&lt;/div&gt;
128+
&lt;div class="actions clearfix"&gt;
129+
&lt;ul role="menu" aria-label="Pagination"&gt;
130+
&lt;li class="disabled" aria-disabled="true"&gt;
131+
&lt;a role="menuitem" href="#previous"&gt;Previous&lt;/a&gt;
132+
&lt;/li&gt;
133+
&lt;li aria-disabled="false" aria-hidden="false"&gt;
134+
&lt;a role="menuitem" href="#next"&gt;Next&lt;/a&gt;
135+
&lt;/li&gt;
136+
&lt;li aria-hidden="true" style="display: none;"&gt;
137+
&lt;a role="menuitem" href="#finish"&gt;Finish&lt;/a&gt;
138+
&lt;/li&gt;
139+
&lt;/ul&gt;
140+
&lt;/div&gt;
141+
&lt;/div&gt;
142+
</pre>
143+
<p>The resulting or transformed code is just for showing you your capabilities and how it is structured.</p>
144+
<h3>CSS classes</h3>
145+
<p>A list of all <abbr title="Cascading Style Sheets">CSS</abbr> classes.</p>
146+
<table class="table table-bordered table-striped">
147+
<colgroup>
148+
<col class="span3">
149+
<col class="span9">
150+
</colgroup>
151+
<thead>
152+
<tr>
153+
<th class="span3">Class name</th>
154+
<th class="span9">Description</th>
155+
</tr>
156+
</thead>
157+
<tbody>
158+
<tr>
159+
<td><code>wizard</code> *</td>
160+
<td>The main <abbr title="Cascading Style Sheets">CSS</abbr> class; it is set on the outer component wrapper.</td>
161+
</tr>
162+
<tr>
163+
<td><code>steps</code></td>
164+
<td></td>
165+
</tr>
166+
<tr>
167+
<td><code>content</code></td>
168+
<td></td>
169+
</tr>
170+
<tr>
171+
<td><code>actions</code></td>
172+
<td></td>
173+
</tr>
174+
<tr>
175+
<td><code>clearfix</code> *</td>
176+
<td></td>
177+
</tr>
178+
<tr>
179+
<td><code>current</code></td>
180+
<td>Marks the active step (the current step, content title and content body).</td>
181+
</tr>
182+
<tr>
183+
<td><code>current-info</code></td>
184+
<td>Adds more information for screenreader on the current step.</td>
185+
</tr>
186+
<tr>
187+
<td><code>audible</code></td>
188+
<td>Labels content that is important for screenreader but not for normal browser.</td>
189+
</tr>
190+
<tr>
191+
<td><code>disabled</code></td>
192+
<td></td>
193+
</tr>
194+
<tr>
195+
<td><code>first</code></td>
196+
<td></td>
197+
</tr>
198+
<tr>
199+
<td><code>last</code></td>
200+
<td></td>
201+
</tr>
202+
<tr>
203+
<td><code>error</code></td>
204+
<td></td>
205+
</tr>
206+
<tr>
207+
<td><code>done</code></td>
208+
<td></td>
209+
</tr>
210+
<tr>
211+
<td><code>number</code></td>
212+
<td></td>
213+
</tr>
214+
<tr>
215+
<td><code>body</code></td>
216+
<td></td>
217+
</tr>
218+
<tr>
219+
<td><code>title</code></td>
220+
<td></td>
221+
</tr>
222+
</tbody>
223+
</table>
224+
<p class="muted">
225+
<small>* The <abbr title="Cascading Style Sheets">CSS</abbr> class name can be customized on initialization by using the options.</small>
226+
</p>
227+
</section>
89228
<section id="options">
90229
<h2 class="page-header">Options</h2>
91230
<p class="lead">
92-
231+
Here you learn about customization.
93232
</p>
94233
<h3>Appearance</h3>
95234
<table class="table table-bordered table-striped">

‎JSteps/Views/Donation/Success.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div class="span3 me">
1616
<img src="@Url.Content("~/Content/images/me.png")" />
1717
</div>
18-
<div class="span9 main">
18+
<div class="span9 main" role="main">
1919
<section>
2020
<h2>Hey cool you did it</h2>
2121
<p>Thanks for the beer I will enjoy it ;-)</p>

‎JSteps/Views/Examples/Index.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<div class="content">
2121
<div class="row-fluid">
22-
<nav id="lefthand" class="span3">
22+
<nav id="lefthand" class="span3" role="navigation">
2323
<ul id="lefthand-nav" class="nav nav-list">
2424
<li><a href="#basic">Basic Example</a></li>
2525
<li><a href="#basic-form">Basic Form Example</a></li>
@@ -31,7 +31,7 @@
3131
<li><a href="#embed">Embedded Content Example</a></li>
3232
</ul>
3333
</nav>
34-
<div class="span9 main">
34+
<div class="span9 main" role="main">
3535
<section id="basic">
3636
<h2 class="page-header">Basic Example</h2>
3737
<div id="wizard-1">

‎JSteps/Views/GettingStarted/Index.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@
1919

2020
<div class="content">
2121
<div class="row-fluid">
22-
<nav id="lefthand" class="span3">
22+
<nav id="lefthand" class="span3" role="navigation">
2323
<ul id="lefthand-nav" class="nav nav-list">
2424
<li><a href="#intro">Quick Introduction</a></li>
2525
<li><a href="#download">Download</a></li>
2626
<li><a href="#basic">Basic Example</a></li>
2727
<li><a href="#docs">Documentation</a></li>
2828
</ul>
2929
</nav>
30-
<div class="span9 main">
30+
<div class="span9 main" role="main">
3131
<section id="intro">
3232
<h2 class="page-header">Quick Introduction</h2>
3333
<p class="lead">jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces.

‎JSteps/Views/Home/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</header>
1717
}
1818

19-
<div class="content startpage">
19+
<div class="content startpage" role="main">
2020
<div class="row-fluid">
2121
<div class="span4 box">
2222
<img src="@Url.Content("~/Content/images/lightweight.png")">

‎JSteps/Views/Shared/_Layout.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
@Html.ActionLink("jQuery Steps", "Index", "Home")
8989
</h1>
9090

91-
<nav>
91+
<nav role="navigation">
9292
<ul>
9393
<li class="@GetActiveClass("GettingStarted")">@Html.ActionLink("Getting Started", "Index", "GettingStarted")</li>
9494
<li class="@GetActiveClass("Examples")">@Html.ActionLink("Examples", "Index", "Examples")</li>
@@ -114,7 +114,7 @@
114114
@RenderBody()
115115
</div>
116116
117-
<footer id="footer">
117+
<footer id="footer" role="contentinfo">
118118
<p>&copy; Copyright @DateTime.Now.Year, <a href="http://www.rafaelstaib.com">Rafael Staib</a></p>
119119
<ul class="links">
120120
<li><a href="https://github.com/rstaib/jquery-steps/issues">Issues</a></li>

0 commit comments

Comments
 (0)