Skip to content

Commit ba11ef1

Browse files
author
Rafael J. Staib
committed
Add next docu part
1 parent 7860f77 commit ba11ef1

File tree

3 files changed

+234
-130
lines changed

3 files changed

+234
-130
lines changed

‎JSteps.v11.suo

0 Bytes
Binary file not shown.

‎JSteps/Views/Documentation/Index.cshtml

+231-129
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</ul>
3131
</nav>
3232
<div class="span9 main">
33-
<section id="initialization">
33+
<section id="init">
3434
<h2 class="page-header">Initialization</h2>
3535
<p class="lead">In this section you will learn how to intialize jQuery Steps and what will happen if you do that.</p>
3636
<h3>Lets get started!</h3>
@@ -80,137 +80,239 @@
8080
});
8181
&lt;/script&gt;
8282
</pre>
83-
84-
-transformation
85-
-id has to be unique
86-
87-
<div class="row-fluid">
88-
<dl class="span6">
89-
<dt>Accessability support</dt>
90-
<dd>Make it visible for everyone without extra work - just use it.</dd>
91-
<dt>Async content loading</dt>
92-
<dd>Load your content asynchronously via <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> by calling e.g. a <abbr title="Representational State Transfer">REST</abbr> service.</dd>
93-
<dt>Cool transition effects</dt>
94-
<dd>Beautiful & sleek transition effects complete the offer.</dd>
95-
<dt>Dynamic Manipulation</dt>
96-
<dd>Add or remove steps dynamically via <abbr title="Application Programming Interface">API</abbr>.</dd>
97-
<dt>Easy Navigation</dt>
98-
<dd>Navigate in various different way using the keyboard, steps or pager - it is up to you.</dd>
99-
<dt>State Persistence</dt>
100-
<dd>Enable the <code>saveState</code> option - this will save your current step position of each individual wizard *.</dd>
101-
</dl>
102-
<dl class="span6">
103-
<dt>Form validation made easy</dt>
104-
<dd>Embed a validation plugin of your choice and customize it like you want - it is just that simple.</dd>
105-
<dt>Embedded iframe content</dt>
106-
<dd>Embed your content via an <code>iframe</code> - it feels like it would be a part of your site.</dd>
107-
<dt>Keyboard navigation</dt>
108-
<dd>Use your keyboard to navigate through your content.</dd>
109-
<dt>Multiple wizards</dt>
110-
<dd>Have multiple wizards on one page or even have nested wizards like you want.</dd>
111-
<dt>Vertical Navigation</dt>
112-
<dd>Switch to vertical navigation if you need.</dd>
113-
<dt>And much more ...</dt>
114-
<dd>Take a look to the examples and learn more about it.</dd>
115-
</dl>
116-
</div>
117-
<p class="muted">
118-
<small>
119-
* The step position will be saved into a cookie after a step change, add or remove.
120-
After a refresh the latest active step becomes active again.
121-
</small>
122-
</p>
123-
<h3>Buy me a beer</h3>
124-
<p>
125-
Hey guys, I invested tons of time and still investing to offer you a great feeling and nice looking component.
126-
So if you like it, I would very appreciate a beer donation ;-) Thanks.
127-
</p>
128-
<p>
129-
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
130-
<input type="hidden" name="cmd" value="_s-xclick">
131-
<input type="hidden" name="hosted_button_id" value="2Q69YA36ZTARW">
132-
<input type="image" src="https://www.paypalobjects.com/en_US/DE/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
133-
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
134-
</form>
135-
</p>
83+
- css
84+
- transformation
85+
- id has to be unique
86+
87+
<p class="alert alert-info"><strong>Info:</strong> </p>
13688
</section>
137-
<section id="download">
138-
<h2 class="page-header">Download</h2>
89+
<section id="options">
90+
<h2 class="page-header">Options</h2>
13991
<p class="lead">
140-
jQuery Steps is an open-source project hosted on GitHub and can be therefore downloaded in many different ways.
141-
The easiest and fastest way to get started is to download the compiled & minified version.
92+
14293
</p>
143-
<div class="row-fluid">
144-
<div class="span6">
145-
<h3>Compiled & Minified</h3>
146-
<p>No documentation included; just the bare <abbr title="JavaScript">JS</abbr> files.</p>
147-
<p><a href="https://github.com/rstaib/jquery-steps/raw/master/build/jquery.steps-1.0.0.zip" class="btn btn-primary btn-large">Download</a></p>
148-
</div>
149-
<div class="span6">
150-
<h3>Source Code</h3>
151-
<p>
152-
Contains the original source files. By using the <code>grunt api</code> command the <abbr title="Application Programming Interface">API</abbr>
153-
documentation will be automatically built.
154-
</p>
155-
<p><a href="https://github.com/rstaib/jquery-steps/archive/master.zip" class="btn btn-large">Download source</a></p>
156-
</div>
157-
</div>
158-
</section>
159-
<section id="basic">
160-
<h2 class="page-header">Basic Example</h2>
161-
<p class="lead">The simplest template to get started is the following.</p>
162-
<p>Everything you need to start is:</p>
163-
<ol>
164-
<li>Include <strong>jQuery</strong> and <strong>jQuery Steps</strong> in your <abbr title="Hypertext Markup Language">HTML</abbr> code.</li>
165-
<li>Then select an element represents the wizard and call the <code>steps</code> method.</li>
166-
</ol>
167-
<pre class="prettyprint linenums">
168-
&lt;!DOCTYPE html&gt;
169-
&lt;html&gt;
170-
&lt;head&gt;
171-
&lt;title&gt;Demo&lt;/title&gt;
172-
&lt;meta charset="utf-8"&gt;
173-
&lt;script src="jquery.js"&gt;&lt;/script&gt;
174-
&lt;script src="jquery.steps.js"&gt;&lt;/script&gt;
175-
&lt;/head&gt;
176-
&lt;body&gt;
177-
&lt;script&gt;
178-
$("#wizard").steps();
179-
&lt;/script&gt;
180-
&lt;div id="wizard"&gt;&lt;/div&gt;
181-
&lt;/body&gt;
182-
&lt;/html&gt;
183-
</pre>
184-
<h3>How to add initial steps?</h3>
185-
<p>There are two ways to add steps and their corresponding content.</p>
186-
<p>1. Add <abbr title="Hypertext Markup Language">HTML</abbr> code into the representing wizard element.</p>
187-
<pre class="prettyprint linenums">
188-
&lt;div id="wizard"&gt;
189-
&lt;h1&gt;First Step&lt;/h1&gt;
190-
&lt;div&gt;First Content&lt;/div&gt;
191-
&lt;h1&gt;Second Step&lt;/h1&gt;
192-
&lt;div&gt;Second Content&lt;/div&gt;
193-
&lt;/div&gt;
194-
</pre>
195-
<p>2. Or use the <abbr title="Application Programming Interface">API</abbr> to add steps dynamically.</p>
196-
<pre class="prettyprint linenums">
197-
// Initialize wizard
198-
var wizard = $("#wizard").steps();
199-
// Add step
200-
wizard.steps("add", {
201-
title: "HTML code",
202-
content: "&lt;strong&gt;HTML code&lt;/strong&gt;"
203-
});
204-
</pre>
205-
</section>
206-
<section id="docs">
207-
<h2 class="page-header">Documentation</h2>
208-
<p class="lead">There are two ways to get the documentation but the recommended way is to use the wiki site.</p>
209-
<ol>
210-
<li>Visit the project specific <a href="https://github.com/rstaib/jquery-steps/wiki" target="_blank">GitHub wiki</a> or</li>
211-
<li>download the source code and use the <code>grunt api</code> command.</li>
212-
</ol>
213-
<p class="alert alert-info"><strong>Info:</strong> The documentation is currently maintained via the GitHub wiki but will be moved to <a href="http://www.jquery-steps.com">jquery-steps.com</a> later this year.</p>
94+
<h3>Appearance</h3>
95+
<table class="table table-bordered table-striped">
96+
<colgroup>
97+
<col class="span3">
98+
<col class="span2">
99+
<col class="span7">
100+
</colgroup>
101+
<thead>
102+
<tr>
103+
<th class="span3">Name</th>
104+
<th class="span2">Type</th>
105+
<th class="span7">Description</th>
106+
</tr>
107+
</thead>
108+
<tbody>
109+
<tr>
110+
<td><code>headerTag</code></td>
111+
<td>String</td>
112+
<td>The header tag is used to find the step button text within the declared wizard area. <em>Default value:</em> <code>h1</code></td>
113+
</tr>
114+
<tr>
115+
<td><code>bodyTag</code></td>
116+
<td>String</td>
117+
<td>The body tag is used to find the step content within the declared wizard area. <em>Default value:</em> <code>div</code></td>
118+
</tr>
119+
<tr>
120+
<td><code>contentContainerTag</code></td>
121+
<td>String</td>
122+
<td>The content container tag which will be used to wrap all step contents. <em>Default value:</em> <code>div</code></td>
123+
</tr>
124+
<tr>
125+
<td><code>actionContainerTag</code></td>
126+
<td>String</td>
127+
<td>The action container tag which will be used to wrap the pagination navigation. <em>Default value:</em> <code>div</code></td>
128+
</tr>
129+
<tr>
130+
<td><code>stepsContainerTag</code></td>
131+
<td>String</td>
132+
<td>The steps container tag which will be used to wrap the steps navigation. <em>Default value:</em> <code>div</code></td>
133+
</tr>
134+
<tr>
135+
<td><code>cssClass</code></td>
136+
<td>String</td>
137+
<td>The css class which will be added to the outer component wrapper. <em>Default value:</em> <code>wizard</code></td>
138+
</tr>
139+
<tr>
140+
<td><code>clearFixCssClass</code></td>
141+
<td>String</td>
142+
<td>The css class which will be used for floating scenarios. <em>Default value:</em> <code>clearfix</code></td>
143+
</tr>
144+
<tr>
145+
<td><code>stepsOrientation</code></td>
146+
<td>String or Integer</td>
147+
<td> <em>Default value:</em> <code>horizontal</code> or <code>0</code></td>
148+
</tr>
149+
</tbody>
150+
</table>
151+
152+
<h3>Templates</h3>
153+
<table class="table table-bordered table-striped">
154+
<colgroup>
155+
<col class="span3">
156+
<col class="span2">
157+
<col class="span7">
158+
</colgroup>
159+
<thead>
160+
<tr>
161+
<th class="span3">Name</th>
162+
<th class="span2">Type</th>
163+
<th class="span7">Description</th>
164+
</tr>
165+
</thead>
166+
<tbody>
167+
<tr>
168+
<td><code>transitionEffect</code></td>
169+
<td>String or Integer</td>
170+
<td>The animation effect which will be used for step transitions. <em>Default value:</em> <code>none</code> or <code>0</code></td>
171+
</tr>
172+
<tr>
173+
<td><code>transitionEffectSpeed</code></td>
174+
<td>Integer</td>
175+
<td>Animation speed for step transitions (in milliseconds). <em>Default value:</em> <code>200</code></td>
176+
</tr>
177+
</tbody>
178+
</table>
179+
180+
<h3>Behaviour</h3>
181+
<table class="table table-bordered table-striped">
182+
<colgroup>
183+
<col class="span3">
184+
<col class="span2">
185+
<col class="span7">
186+
</colgroup>
187+
<thead>
188+
<tr>
189+
<th class="span3">Name</th>
190+
<th class="span2">Type</th>
191+
<th class="span7">Description</th>
192+
</tr>
193+
</thead>
194+
<tbody>
195+
<tr>
196+
<td><code>autoFocus</code></td>
197+
<td>String</td>
198+
<td></td>
199+
</tr>
200+
<tr>
201+
<td><code>enableAllSteps</code></td>
202+
<td>String</td>
203+
<td></td>
204+
</tr>
205+
<tr>
206+
<td><code>enableKeyNavigation</code></td>
207+
<td>String</td>
208+
<td></td>
209+
</tr>
210+
<tr>
211+
<td><code>enablePagination</code></td>
212+
<td>String</td>
213+
<td></td>
214+
</tr>
215+
<tr>
216+
<td><code></code></td>
217+
<td>String</td>
218+
<td></td>
219+
</tr>
220+
<tr>
221+
<td><code></code></td>
222+
<td>String</td>
223+
<td></td>
224+
</tr>
225+
<tr>
226+
<td><code></code></td>
227+
<td>String</td>
228+
<td></td>
229+
</tr>
230+
<tr>
231+
<td><code></code></td>
232+
<td>String</td>
233+
<td></td>
234+
</tr>
235+
<tr>
236+
<td><code></code></td>
237+
<td>String</td>
238+
<td></td>
239+
</tr>
240+
<tr>
241+
<td><code></code></td>
242+
<td>String</td>
243+
<td></td>
244+
</tr>
245+
</tbody>
246+
</table>
247+
248+
<h3>Transition Effects</h3>
249+
<table class="table table-bordered table-striped">
250+
<colgroup>
251+
<col class="span3">
252+
<col class="span2">
253+
<col class="span7">
254+
</colgroup>
255+
<thead>
256+
<tr>
257+
<th class="span3">Name</th>
258+
<th class="span2">Type</th>
259+
<th class="span7">Description</th>
260+
</tr>
261+
</thead>
262+
<tbody>
263+
<tr>
264+
<td><code></code></td>
265+
<td>String</td>
266+
<td></td>
267+
</tr>
268+
</tbody>
269+
</table>
270+
271+
<h3>Events</h3>
272+
<table class="table table-bordered table-striped">
273+
<colgroup>
274+
<col class="span3">
275+
<col class="span2">
276+
<col class="span7">
277+
</colgroup>
278+
<thead>
279+
<tr>
280+
<th class="span3">Name</th>
281+
<th class="span2">Type</th>
282+
<th class="span7">Description</th>
283+
</tr>
284+
</thead>
285+
<tbody>
286+
<tr>
287+
<td><code></code></td>
288+
<td>String</td>
289+
<td></td>
290+
</tr>
291+
</tbody>
292+
</table>
293+
294+
<h3>Labels</h3>
295+
<table class="table table-bordered table-striped">
296+
<colgroup>
297+
<col class="span3">
298+
<col class="span2">
299+
<col class="span7">
300+
</colgroup>
301+
<thead>
302+
<tr>
303+
<th class="span3">Name</th>
304+
<th class="span2">Type</th>
305+
<th class="span7">Description</th>
306+
</tr>
307+
</thead>
308+
<tbody>
309+
<tr>
310+
<td><code></code></td>
311+
<td>String</td>
312+
<td></td>
313+
</tr>
314+
</tbody>
315+
</table>
214316
</section>
215317
</div>
216318
</div>

‎JSteps/Views/Home/Index.cshtml

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@ViewBag.Title = "A jQuery wizard plugin";
1+
@{
2+
ViewBag.Title = "A jQuery wizard plugin";
3+
}
24

35
@section HtmlHeader
46
{

0 commit comments

Comments
 (0)