You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<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 <abbrtitle="Hypertext Markup Language">HTML</abbr>. See the following example.</p>
59
+
<preclass="prettyprint linenums">
60
+
<div id="wizard">
61
+
<h1>First Step</h1>
62
+
<div>First Content</div>
63
+
<h1>Second Step</h1>
64
+
<div>Second Content</div>
65
+
</div>
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 <abbrtitle="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
+
<preclass="prettyprint linenums">
73
+
<script>
74
+
var wizard = $("#wizard").steps();
75
+
76
+
// Add one step after initialization
77
+
wizard.steps("add", {
78
+
title:"HTML code",
79
+
content:"<strong>HTML code</strong>"
80
+
});
81
+
</script>
82
+
</pre>
83
+
84
+
-transformation
85
+
-id has to be unique
86
+
87
+
<divclass="row-fluid">
88
+
<dlclass="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 <abbrtitle="Asynchronous JavaScript and XML">AJAX</abbr> by calling e.g. a <abbrtitle="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 <abbrtitle="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
+
<dlclass="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
+
<pclass="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.
<inputtype="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!">
<p>There are two ways to add steps and their corresponding content.</p>
186
+
<p>1. Add <abbrtitle="Hypertext Markup Language">HTML</abbr> code into the representing wizard element.</p>
187
+
<preclass="prettyprint linenums">
188
+
<div id="wizard">
189
+
<h1>First Step</h1>
190
+
<div>First Content</div>
191
+
<h1>Second Step</h1>
192
+
<div>Second Content</div>
193
+
</div>
194
+
</pre>
195
+
<p>2. Or use the <abbrtitle="Application Programming Interface">API</abbr> to add steps dynamically.</p>
196
+
<preclass="prettyprint linenums">
197
+
// Initialize wizard
198
+
var wizard = $("#wizard").steps();
199
+
// Add step
200
+
wizard.steps("add", {
201
+
title:"HTML code",
202
+
content:"<strong>HTML code</strong>"
203
+
});
204
+
</pre>
205
+
</section>
206
+
<sectionid="docs">
207
+
<h2class="page-header">Documentation</h2>
208
+
<pclass="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 <ahref="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
+
<pclass="alert alert-info"><strong>Info:</strong> The documentation is currently maintained via the GitHub wiki but will be moved to <ahref="http://www.jquery-steps.com">jquery-steps.com</a> later this year.</p>
0 commit comments