Skip to content

Commit 0e97ce5

Browse files
author
Rafael J. Staib
committed
Add first version for the basic form demo
1 parent 0b4603d commit 0e97ce5

File tree

4 files changed

+1639
-1
lines changed

4 files changed

+1639
-1
lines changed

‎basic-form.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>jQuery Steps by rstaib</title>
5+
<meta charset='utf-8'>
6+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
7+
<meta name="description" content="A powerful jQuery wizard plugin that supports accessibility and HTML5.">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9+
10+
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel="stylesheet" type="text/css">
11+
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
12+
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
13+
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
14+
<link rel="stylesheet" href="stylesheets/jquery.steps.css">
15+
16+
<script src="javascripts/jquery-1.9.1.min.js"></script>
17+
<script src="javascripts/jquery.steps.min.js"></script>
18+
<script src="javascripts/jquery.validate-1.11.1.js"></script>
19+
<!--[if lt IE 9]>
20+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
21+
<![endif]-->
22+
</head>
23+
<body>
24+
<header>
25+
<div class="inner">
26+
<h1>jquery-steps</h1>
27+
<h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
28+
<a href="https://github.com/rstaib/jquery-steps" class="button"><small>View project on</small>GitHub</a>
29+
</div>
30+
</header>
31+
32+
<div id="content-wrapper">
33+
<div class="inner clearfix">
34+
<section id="main-content">
35+
<script>
36+
$(function ()
37+
{
38+
$("#form").validate();
39+
40+
$("#wizard").steps({
41+
headerTag: "h4",
42+
bodyTag: "section",
43+
transitionEffect: "slideLeft",
44+
onStepChanging: function (event, currentIndex, newIndex)
45+
{
46+
$("#form").validate().settings.ignore = ":disabled,:hidden";
47+
return $("#form").valid();
48+
},
49+
onFinishing: function (event, currentIndex)
50+
{
51+
$("#form").validate().settings.ignore = ":disabled";
52+
return $("#form").valid();
53+
}
54+
});
55+
});
56+
</script>
57+
58+
<h3>Basic Example</h3>
59+
<form id="form" action="#">
60+
<div id="wizard">
61+
<h4>Account</h4>
62+
<section>
63+
<label for="userName">User name *</label><br>
64+
<input id="userName" name="userName" type="text" class="required"><br>
65+
<label for="password">Password *</label><br>
66+
<input id="password" name="password" type="text" class="required"><br>
67+
<label for="confirm">Confirm Password *</label><br>
68+
<input id="confirm" name="confirm" type="text" class="required"><br>
69+
<p>(*) Mandatory</p>
70+
</section>
71+
72+
<h4>Profile</h4>
73+
<section>
74+
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
75+
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
76+
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
77+
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
78+
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
79+
Donec non pulvinar urna. Aliquam id velit lacus.</p>
80+
</section>
81+
82+
<h4>Confirm</h4>
83+
<section>
84+
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
85+
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
86+
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
87+
venenatis.</p>
88+
</section>
89+
90+
<h4>Finish</h4>
91+
<section>
92+
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
93+
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
94+
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
95+
</section>
96+
</div>
97+
</form>
98+
99+
<h3>License</h3>
100+
<p>Copyright (c) 2013 Rafael J. Staib Licensed under the <a href="https://github.com/rstaib/jquery-steps/blob/master/LICENSE.txt">MIT license</a>.</p>
101+
</section>
102+
103+
<aside id="sidebar">
104+
<a href="https://github.com/rstaib/jquery-steps/zipball/master" class="button">
105+
<small>Download</small>
106+
.zip file
107+
</a>
108+
<a href="https://github.com/rstaib/jquery-steps/tarball/master" class="button">
109+
<small>Download</small>
110+
.tar.gz file
111+
</a>
112+
113+
<p class="repo-owner"><a href="https://github.com/rstaib/jquery-steps"></a>is maintained by <a href="https://github.com/rstaib">rstaib</a>.</p>
114+
115+
<p>This page was generated by <a href="pages.github.com">GitHub Pages</a> using the Architect theme by <a href="http://twitter.com/jasonlong">Jason Long</a>.</p>
116+
</aside>
117+
</div>
118+
</div>
119+
120+
<script>
121+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
122+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
123+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
124+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
125+
126+
ga('create', 'UA-40997516-1', 'rstaib.github.io');
127+
ga('send', 'pageview');
128+
</script>
129+
</body>
130+
</html>

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h3>Overview</h3>
3737
<li><a href="basic.html">Basic Example</a></li>
3838
<li>Async Example</li>
3939
<li><a href="iframe.html">Embedded Iframe Example</a></li>
40-
<li>Basic Form Example</li>
40+
<li><a href="basic-form.html">Basic Form Example</a></li>
4141
<li>Advanced Form Example</li>
4242
<li><a href="add-remove.html">Dynamic Manipulation Example</a></li>
4343
</ul>

0 commit comments

Comments
 (0)