This repository has been archived by the owner on Aug 15, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 34
/
examplealtstate.html
113 lines (93 loc) · 2.9 KB
/
examplealtstate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.5");
</script>
<script type="text/javascript" src="jquery.multipage.js"></script>
<link rel="stylesheet" href="jquery.multipage.css" />
<script type="text/javascript">
$(window).ready(function() {
$('#multipage').multipage({transitionFunction:transition,stateFunction: textpages});
$('form').submit(function(){ alert("Submitted!"); return false;});
});
function generateTabs(tabs) {
html = '';
for (var i in tabs) {
tab = tabs[i];
html = html + '<li class="multipage_tab"><a href="#" onclick="return $(\'#multipage\').gotopage(' + tab.number + ');">' + tab.title + '</a></li>';
}
$('<ul class="multipage_tabs" id="multipage_tabs">'+html+'<div class="clearer"></div></ul>').insertBefore('#multipage');
}
function setActiveTab(selector,page) {
$('#multipage_tabs li').each(function(index){
if ((index+1)==page) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
function transition(from,to) {
$(from).fadeOut('fast',function(){$(to).fadeIn('fast');});
}
function textpages(obj,page,pages) {
$(obj).html(page + ' of ' + pages);
}
</script>
<style type='text/css'>
body { font-family:helvetica;}
p.input label { display:block; }
p.input input { width: 200px; }
.clearer { clear:both; width:100%; height:0px; }
</style>
</head>
<body>
<h1>jQuery Multipage Form Plugin</h1>
<p>Add custom transitions to your form</p>
<a href="example.html">Turn into multipage form</a><br />
OR<br />
<a href="exampletabs.html">Turn into tabbed form</a>
<div style="width:500px; margin:20px; padding:10px; border:20px solid #F0F0F0;">
<form id="multipage">
<fieldset id="page_one">
<legend>Basic Details</legend>
<p class="input">
<label for="email">Email</label>
<input name="email" id="email" value="" />
</p>
<p class="input">
<label for="pass">Pass</label>
<input name="pass" id="pass" value="" />
</p>
</fieldset>
<fieldset id="page_two">
<legend>About You</legend>
<p class="input">
<label for="name">Name</label>
<input name="name" id="name" value="" />
</p>
<p class="input">
<label for="loc">Location</label>
<input name="loc" id="loc" value="" />
</p>
<p class="input">
<label for="tags">
Tags</label>
<input name="tags" id="tags" value="foo,bar,baz,booda" />
</p>
</fieldset>
<fieldset id="page_three">
<legend>Stuff</legend>
<p class="input">
<label for="age">Age</label>
<input name="age" id="age" value="" />
</p>
<p class="input">
<label for="loc">Location</label>
<input name="loc" id="loc" value="" />
</p>
</fieldset>
<input type="submit" value="Create User" />
</form>
</div>
</body>