Skip to content

Commit af3976a

Browse files
author
Rafael J. Staib
committed
Add more documentation
1 parent f32c493 commit af3976a

File tree

6 files changed

+77
-45
lines changed

6 files changed

+77
-45
lines changed

JSteps.v11.suo

-18.5 KB
Binary file not shown.

JSteps/Content/custom.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,37 @@ body > footer
424424
font-weight: 700;
425425
}
426426

427+
/* CSS structure tree */
428+
pre.css > span
429+
{
430+
background: #fbfbfc;
431+
padding: 0.1em 0.2em;
432+
margin: 0 0.2em 0.2em 0;
433+
434+
-webkit-border-radius: 3px;
435+
-moz-border-radius: 3px;
436+
border-radius: 3px;
437+
438+
box-shadow: inset 1px 1px 0 #ececf0;
439+
440+
line-height: 20px;
441+
}
442+
443+
pre.css > .tag
444+
{
445+
color: #1e347b;
446+
}
447+
448+
pre.css > .id
449+
{
450+
color: teal;
451+
}
452+
453+
pre.css > .class
454+
{
455+
color: #d14;
456+
}
457+
427458
@media (min-width: 1200px)
428459
{
429460
.sitewrapper > .content #lefthand-nav.affix

JSteps/JSteps.csproj

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,9 @@
206206
<Content Include="Views\Donation\Success.cshtml" />
207207
<Content Include="Views\Examples\EmbeddedContent.cshtml" />
208208
<Content Include="Views\Documentation\Index.cshtml" />
209+
<Content Include="Scripts\jquery.steps.min.js.map">
210+
<DependentUpon>jquery.steps.js</DependentUpon>
211+
</Content>
209212
</ItemGroup>
210213
<PropertyGroup>
211214
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>

JSteps/Scripts/jquery.steps.min.js

Lines changed: 2 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

JSteps/Scripts/jquery.steps.min.js.map

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

JSteps/Views/Documentation/Index.cshtml

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
&lt;div&gt;Second Content&lt;/div&gt;
6666
&lt;/div&gt;
6767
</pre>
68-
<p>The important thing to mention here is that each step is represented by a title and a content element of your choice (more details on this later).</p>
68+
<p>The important thing here to mention is that each step is represented by a title and a content element of your choice (more details on this later).</p>
6969
<h3>How to add steps dynamically?</h3>
7070
<p>In the last example we have added two steps by using the <abbr title="Hypertext Markup Language">HTML</abbr> way.
7171
This differs from the dynamic way, because the later requires that the wizard is already initialized.
@@ -102,45 +102,35 @@
102102
&lt;div&gt;Second Content&lt;/div&gt;
103103
&lt;/div&gt;
104104
</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;
105+
<p>And after transformation our resulting <abbr title="Hypertext Markup Language">HTML</abbr>/<abbr title="Cascading Style Sheets">CSS</abbr> hierarchy tree looks like this.</p>
106+
<pre class="css">
107+
<span class="tag">&lt;div&gt;</span><span class="id">#wizard</span><span class="class">.wizard</span><span class="class">.clearfix</span><span class="class status">.vertical</span>
108+
├── <span class="tag custom">&lt;div&gt;</span><span class="class">.steps</span><span class="class">.clearfix</span>
109+
│ └── <span class="tag">&lt;ul&gt;</span>
110+
│ └── <span class="tag">&lt;li&gt;</span><span class="class status">.first</span><span class="class status">.last</span><span class="class status">.current</span><span class="class status">.disabled</span><span class="class status">.done</span><span class="class status">.error</span>
111+
│ └── <span class="tag">&lt;a&gt;</span><span class="id">#wizard-t-{index}</span>
112+
│ ├── <span class="tag">&lt;span&gt;</span><span class="class">.current-info</span><span class="class">.audible</span>
113+
│ ├── <span class="tag">&lt;span&gt;</span><span class="class">.number</span>
114+
│ └── Text
115+
├── <span class="tag">&lt;div&gt;</span><span class="class">.contents</span><span class="class">.clearfix</span>
116+
│ ├── <span class="tag">&lt;h1&gt;</span><span class="id">#wizard-h-{index}</span><span class="class">.title</span><span class="class status">.current</span>
117+
│ └── <span class="tag">&lt;div&gt;</span><span class="id">#wizard-p-{index}</span><span class="class">.body</span><span class="class status">.current</span>
118+
└── <span class="tag">&lt;div&gt;</span><span class="class">.actions</span><span class="class">.clearfix</span>
119+
└── <span class="tag">&lt;ul&gt;</span>
120+
└── <span class="tag">&lt;li&gt;</span><span class="class status">.disabled</span>
121+
└── <span class="tag">&lt;a&gt;</span>
142122
</pre>
143-
<p>The resulting or transformed code is just for showing you your capabilities and how it is structured.</p>
123+
<p>The following specific charactaristics must be considered:</p>
124+
<ul>
125+
<li><code>.vertical</code> will be added to the outer component wrapper if the <code>stepsOrientation</code> option is set to <code>vertical</code> or <code>0</code>.</li>
126+
<li><code>.first</code> is added to the first step and <code>.last</code> to the last step.</li>
127+
<li><code>.current</code> will be added to the active step, title and panel.</li>
128+
<li><code>.disabled</code> will be added to disabled steps or buttons.</li>
129+
<li><code>.done</code> will be set on valid steps and <code>.error</code> on invalid steps.</li>
130+
<li><code>{index}</code> is a placeholder for the position (zero-based) of steps and their related contents (title and panel).</li>
131+
<li>The <code>div</code> and <code>h1</code> elements can be separatly configured on initialization (please see the next section).</li>
132+
</ul>
133+
144134
<h3>CSS classes</h3>
145135
<p>A list of all <abbr title="Cascading Style Sheets">CSS</abbr> classes.</p>
146136
<table class="table table-bordered table-striped">
@@ -175,6 +165,10 @@
175165
<td><code>clearfix</code> *</td>
176166
<td></td>
177167
</tr>
168+
<tr>
169+
<td><code>vertical</code></td>
170+
<td></td>
171+
</tr>
178172
<tr>
179173
<td><code>current</code></td>
180174
<td>Marks the active step (the current step, content title and content body).</td>

0 commit comments

Comments
 (0)