Skip to content

Commit 7860f77

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

File tree

7 files changed

+258
-3
lines changed

7 files changed

+258
-3
lines changed

JSteps.v12.suo

-81 KB
Binary file not shown.
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
7+
namespace JSteps.Controllers
8+
{
9+
public class DocumentationController
10+
: Controller
11+
{
12+
public ActionResult Index()
13+
{
14+
return View();
15+
}
16+
}
17+
}

JSteps/JSteps.csproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@
133133
<Compile Include="App_Start\RouteConfig.cs" />
134134
<Compile Include="App_Start\WebApiConfig.cs" />
135135
<Compile Include="Controllers\AboutController.cs" />
136+
<Compile Include="Controllers\DocumentationController.cs" />
136137
<Compile Include="Controllers\DonationController.cs" />
137138
<Compile Include="Controllers\ExamplesController.cs" />
138139
<Compile Include="Controllers\GettingStartedController.cs" />
@@ -204,6 +205,7 @@
204205
<Content Include="Views\About\Index.cshtml" />
205206
<Content Include="Views\Donation\Success.cshtml" />
206207
<Content Include="Views\Examples\EmbeddedContent.cshtml" />
208+
<Content Include="Views\Documentation\Index.cshtml" />
207209
</ItemGroup>
208210
<PropertyGroup>
209211
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>

JSteps/Views/About/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@section HtmlHeader
66
{
7-
<link rel="prev" title="jQuery Steps Examples" href="http://www.jquery-steps.com/Examples">
7+
<link rel="prev" title="Documentation for jQuery Steps" href="http://www.jquery-steps.com/Documentation">
88
}
99

1010
@section Header
Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@{
2+
ViewBag.Title = "Documentation";
3+
ViewBag.Prettify = true;
4+
}
5+
6+
@section HtmlHeader
7+
{
8+
<link rel="prev" title="jQuery Steps Examples" href="http://www.jquery-steps.com/Examples">
9+
<link rel="next" title="About Rafael Staib" href="http://www.jquery-steps.com/About">
10+
}
11+
12+
@section Header
13+
{
14+
<header id="banner" role="banner">
15+
<h1>Documentation</h1>
16+
<p>Learn more about jQuery Steps.</p>
17+
</header>
18+
}
19+
20+
<div class="content">
21+
<div class="row-fluid">
22+
<nav id="lefthand" class="span3">
23+
<ul id="lefthand-nav" class="nav nav-list">
24+
<li><a href="#init">Initialization</a></li>
25+
<li><a href="#options">Options</a></li>
26+
<li><a href="#methods">Methods</a></li>
27+
<li><a href="#requirements">Requirements</a></li>
28+
<li><a href="#browser">Browser Support</a></li>
29+
<li><a href="#integration">Integration</a></li>
30+
</ul>
31+
</nav>
32+
<div class="span9 main">
33+
<section id="initialization">
34+
<h2 class="page-header">Initialization</h2>
35+
<p class="lead">In this section you will learn how to intialize jQuery Steps and what will happen if you do that.</p>
36+
<h3>Lets get started!</h3>
37+
<p>To get started we just need two javascript references, a bit <abbr title="Hypertext Markup Language">HTML</abbr> and one line javascript code.</p>
38+
<pre class="prettyprint linenums">
39+
&lt;!DOCTYPE html&gt;
40+
&lt;html&gt;
41+
&lt;head&gt;
42+
&lt;title&gt;Demo&lt;/title&gt;
43+
&lt;meta charset="utf-8"&gt;
44+
&lt;script src="jquery.js"&gt;&lt;/script&gt;
45+
&lt;script src="jquery.steps.js"&gt;&lt;/script&gt;
46+
&lt;/head&gt;
47+
&lt;body&gt;
48+
&lt;script&gt;
49+
$("#wizard").steps();
50+
&lt;/script&gt;
51+
&lt;div id="wizard"&gt;&lt;/div&gt;
52+
&lt;/body&gt;
53+
&lt;/html&gt;
54+
</pre>
55+
<h3>How to add steps?</h3>
56+
<p>As you may noticed in the example above we have not added any steps yet.
57+
However to include steps to your wizard before initialization you have to insert a
58+
bit more <abbr title="Hypertext Markup Language">HTML</abbr>. See the following example.</p>
59+
<pre class="prettyprint linenums">
60+
&lt;div id="wizard"&gt;
61+
&lt;h1&gt;First Step&lt;/h1&gt;
62+
&lt;div&gt;First Content&lt;/div&gt;
63+
&lt;h1&gt;Second Step&lt;/h1&gt;
64+
&lt;div&gt;Second Content&lt;/div&gt;
65+
&lt;/div&gt;
66+
</pre>
67+
<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+
<h3>How to add steps dynamically?</h3>
69+
<p>In the last example we have added two steps by using the <abbr title="Hypertext Markup Language">HTML</abbr> way.
70+
This differs from the dynamic way, because the later requires that the wizard is already initialized.
71+
So in the next example we will just add some more javascript to the existing script block.</p>
72+
<pre class="prettyprint linenums">
73+
&lt;script&gt;
74+
var wizard = $("#wizard").steps();
75+
76+
// Add one step after initialization
77+
wizard.steps("add", {
78+
title: "HTML code",
79+
content: "&lt;strong&gt;HTML code&lt;/strong&gt;"
80+
});
81+
&lt;/script&gt;
82+
</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>
136+
</section>
137+
<section id="download">
138+
<h2 class="page-header">Download</h2>
139+
<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.
142+
</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>
214+
</section>
215+
</div>
216+
</div>
217+
</div>
218+
219+
@section Scripts
220+
{
221+
<script>
222+
$(function () {
223+
$("#lefthand-nav").affix({
224+
offset: {
225+
top: function () {
226+
return $("#topbar").outerHeight() + $("#banner").outerHeight();
227+
}
228+
}
229+
});
230+
231+
prettyPrint();
232+
});
233+
</script>
234+
}

JSteps/Views/Examples/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@section HtmlHeader
77
{
88
<link rel="prev" title="Getting Started with jQuery Steps" href="http://www.jquery-steps.com/GettingStarted">
9-
<link rel="next" title="About Rafael Staib" href="http://www.jquery-steps.com/About">
9+
<link rel="next" title="Documentation for jQuery Steps" href="http://www.jquery-steps.com/Documentation">
1010
}
1111

1212
@section Header

JSteps/Views/Home/Index.cshtml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@section HtmlHeader
1+
@ViewBag.Title = "A jQuery wizard plugin";
2+
3+
@section HtmlHeader
24
{
35
<link rel="next" title="Getting Started with jQuery Steps" href="http://www.jquery-steps.com/GettingStarted">
46
}

0 commit comments

Comments
 (0)