<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="jquery.tools.min.js"></script>
<style>
/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:1px solid #666;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
}
/* link inside the tab. uses a background image */
ul.tabs a {
background: url(/media/img/tabs/blue.png) no-repeat -420px 0;
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
background-color:red;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
background-position: -420px -31px;
color:#fff;
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor:default !important;
color:#000 !important;
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; background-color:white;}
ul.tabs a.s:hover { background-position: -553px -31px;; background-color:#cccccc; }
ul.tabs a.s.current { background-position: -553px -62px; }
/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px;; background-color:white; }
ul.tabs a.l:hover { background-position: -248px -31px; background-color:#cccccc; }
ul.tabs a.l.current { background-position: -248px -62px; }
/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px;background-color:white; }
ul.tabs a.xl:hover { background-position: 0 -31px; ; background-color:#cccccc;}
ul.tabs a.xl.current { background-position: 0 -62px; }
/* initially all panes are hidden */
.panes .pane {
display:none;
}
/* tab pane styling */
.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
body {
padding:50px 80px;
font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
div.panes div {
background:#fff url(h300.png) repeat-x 0 5px;
-background:#fff;
height:172px;
}
div.panes label {
margin-bottom:15px;
display:block;
}
label.error {
color:red;
}
</style>
</head>
<body><div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li><a href="#" class="l">Personal info</a></li>
<li><a href="#" class="l">Shopping basket</a></li>
<li><a href="#" class="l">Review order</a></li>
<li><a href="#" class="l">More</a></li>
</ul>
<!-- panes -->
<div class="panes">
<div>
<label>
Username <br />
<input name="username"/>
</label>
<label>
Email <br />
<input name="email"/>
</label>
<label>
<input id="terms" type="checkbox" />
I accept <a href="#">these</a> terms and conditions
</label>
<p>
<button class="next">Next »</button>
</p>
</div>
<div>
<h2>An imaginary basket is here...</h2>
<p>
<button class="prev">« Prev</button>
<button class="next">Next »</button>
</p>
</div>
<div>
<h2>An imaginary order is here...</h2>
<p>
<button class="prev">« Prev</button>
</p>
</div>
<div>
<h2>More...</h2>
<p>
<button class="prev">« Prev</button>
</p>
</div>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
var wizard = $("#wizard_tabs").expose({color: '#789', lazy: true});
wizard.click(function() {
$(this).expose().load();
});
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {
var terms = $("#terms");
if (index > 0 && !terms.get(0).checked) {
terms.parent().addClass("error");
return false;
}
terms.parent().removeClass("error");
});
var api = $("ul.tabs", wizard).data("tabs");
$("button.next", wizard).click(function() {
api.next();
});
$("button.prev", wizard).click(function() {
api.prev();
});
});
</script>