Skip to content

Commit 96d6583

Browse files
author
Rafael J. Staib
committed
Add tabs demo
1 parent 22bb9dd commit 96d6583

File tree

3 files changed

+197
-2
lines changed

3 files changed

+197
-2
lines changed

‎basic.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ <h4>Other demos</h4>
7272
<li>Advanced Form Example</li>
7373
<li><a href="add-remove.html">Dynamic Manipulation Example</a></li>
7474
<li>Pagination Example</li>
75-
<li>Use as Tab Component Example</li>
75+
<li><a href="tabs.html">Tabs Example</a></li>
76+
<li>Multiple Wizard Example</li>
7677
</ul>
7778
</section>
7879

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ <h3>Overview</h3>
5555
<li>Advanced Form Example</li>
5656
<li><a href="add-remove.html">Dynamic Manipulation Example</a></li>
5757
<li>Pagination Example</li>
58-
<li>Use as Tab Component Example</li>
58+
<li><a href="tabs.html">Tabs Example</a></li>
59+
<li>Multiple Wizard Example</li>
5960
</ul>
6061

6162
<h3>Features</h3>

‎tabs.html

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>jQuery Steps - Tabs Demo</title>
5+
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="author" content="Rafael J. Staib">
9+
<meta name="description" content="A powerful jQuery wizard plugin that supports accessibility and HTML5.">
10+
<meta name="keywords" content="jQuery, plugin, UI, component, wizard, tabs, steps, HTML5, javascript, accessibility, form, validation">
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12+
13+
<!-- Required for Open Graph -->
14+
<meta property="og:title" content="jQuery Steps, a powerful jQuery wizard plugin that supports accessibility and HTML5.">
15+
<meta property="og:site_name" content="jQuery Steps, a powerful jQuery wizard plugin that supports accessibility and HTML5.">
16+
<meta property="og:type" content="website">
17+
<meta property="og:url" content="http://rstaib.github.io/jquery-steps">
18+
19+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Architects+Daughter">
20+
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
21+
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
22+
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
23+
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.steps.css">
24+
25+
<script src="javascripts/jquery-1.9.1.min.js"></script>
26+
<script src="javascripts/jquery.steps.min.js"></script>
27+
<!--[if lt IE 9]>
28+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
29+
<![endif]-->
30+
</head>
31+
<body>
32+
<header>
33+
<div class="inner">
34+
<h1>jquery-steps</h1>
35+
<h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
36+
<a href="https://github.com/rstaib/jquery-steps" class="button"><small>View project on</small>GitHub</a>
37+
<div class="share">
38+
<a href="https://twitter.com/share" class="twitter-share-button" data-via="RafaelStaib" data-hashtags="jquerysteps">Tweet</a>
39+
<iframe src="http://ghbtns.com/github-btn.html?user=rstaib&repo=jquery-steps&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
40+
</div>
41+
</div>
42+
</header>
43+
44+
<div id="content-wrapper">
45+
<div class="inner clearfix">
46+
<section id="main-content">
47+
<script>
48+
$(function ()
49+
{
50+
$("#wizard").steps({
51+
headerTag: "h4",
52+
bodyTag: "section",
53+
transitionEffect: "slideLeft",
54+
autoFocus: true,
55+
enableFinishButton: false,
56+
enablePagination: false,
57+
enableAllSteps: true,
58+
titleTemplate: "#title#"
59+
});
60+
});
61+
</script>
62+
63+
<h3>Tabs Example</h3>
64+
<p>Note: Design for the tabs example will be updated soon!</p>
65+
<div id="wizard">
66+
<h4>Keyboard</h4>
67+
<section>
68+
<p>What is needed to transform it to a tabs component? Not much. Just override some properties and done.</p>
69+
<pre class="highlight"><code>$(<span class="s2">"#wizard"</span>).steps({
70+
<span class="c1">// Disables the finish button (required if pagination is enabled)</span>
71+
enableFinishButton: <span class="kc">false</span>,
72+
<span class="c1">// Disables the next and previous buttons (optional)</span>
73+
enablePagination: <span class="kc">false</span>,
74+
<span class="c1">// Enables all steps from the begining</span>
75+
enableAllSteps: <span class="kc">true</span>,
76+
<span class="c1">// Removes the number from the title</span>
77+
titleTemplate: <span class="s2">"#title#"</span>
78+
});</code></pre>
79+
</section>
80+
81+
<h4>Other demos</h4>
82+
<section>
83+
<ul>
84+
<li><a href="basic.html">Basic Example</a></li>
85+
<li>Async Example</li>
86+
<li><a href="iframe.html">Embedded Iframe Example</a></li>
87+
<li><a href="basic-form.html">Basic Form Example</a></li>
88+
<li>Advanced Form Example</li>
89+
<li><a href="add-remove.html">Dynamic Manipulation Example</a></li>
90+
<li>Pagination Example</li>
91+
<li>Multiple Wizard Example</li>
92+
</ul>
93+
</section>
94+
95+
<h4>Documentation</h4>
96+
<section>
97+
<p>For more information <a href="https://github.com/rstaib/jquery-steps/wiki">check out the documentation</a>!</p>
98+
</section>
99+
100+
<h4>Download</h4>
101+
<section>
102+
<p>You could easily download the latest version direct from here!</p>
103+
<ul>
104+
<li><a href="https://github.com/rstaib/jquery-steps/blob/master/README.md">Readme</a></li>
105+
<li><a href="downloads/jquery.steps.min.js">Minified</a></li>
106+
<li><a href="downloads/jquery.steps.js">Uncompressed</a></li>
107+
</ul>
108+
</section>
109+
</div>
110+
111+
<h3>License</h3>
112+
<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>
113+
</section>
114+
115+
<aside id="sidebar">
116+
<a href="https://github.com/rstaib/jquery-steps/zipball/master" class="button">
117+
<small>Download</small>
118+
.zip file
119+
</a>
120+
<a href="https://github.com/rstaib/jquery-steps/tarball/master" class="button">
121+
<small>Download</small>
122+
.tar.gz file
123+
</a>
124+
125+
<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>
126+
127+
<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>
128+
</aside>
129+
</div>
130+
</div>
131+
132+
<script>
133+
// GitHub Star Button
134+
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
135+
136+
// Google Analytics
137+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
138+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
139+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
140+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
141+
142+
ga('create', 'UA-40997516-1', 'rstaib.github.io');
143+
ga('send', 'pageview');
144+
145+
// Anchor Event Tracking
146+
$(function()
147+
{
148+
var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3|js|md)$/i,
149+
baseHref = "";
150+
if ($("base").attr("href") != undefined)
151+
{
152+
baseHref = $("base").attr("href");
153+
}
154+
155+
$("a").each(function()
156+
{
157+
var href = $(this).attr("href");
158+
if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain)))
159+
{
160+
$(this).click(function()
161+
{
162+
ga("send", "event", "External", "Click", href.replace(/^https?\:\/\//i, ""));
163+
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
164+
{
165+
setTimeout(function() { location.href = href; }, 200);
166+
return false;
167+
}
168+
});
169+
}
170+
else if (href && href.match(/^mailto\:/i))
171+
{
172+
$(this).click(function()
173+
{
174+
ga("send", "event", "Email", "Click", href.replace(/^mailto\:/i, ""));
175+
});
176+
}
177+
else if (href && href.match(filetypes))
178+
{
179+
$(this).click(function()
180+
{
181+
ga("send", "event", "Download", "Click", href);
182+
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
183+
{
184+
setTimeout(function() { location.href = baseHref + href; }, 200);
185+
return false;
186+
}
187+
});
188+
}
189+
});
190+
});
191+
</script>
192+
</body>
193+
</html>

0 commit comments

Comments
 (0)