以下是 jquery智能垂直向导js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery智能垂直向导</title>
<link href="styles/style_wizard_vertical.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/SmartWizard.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#smartwizard').smartWizard();
});
</script>
</head><body>
<br>
<center>
<h1>Smart Wizard - a javascript wizard control</h1>
<h2>Example 2 : Vertical Wizard</h2>
</center>
<div id="smartwizard" class="wiz-container">
<ul id="wizard-anchor">
<li><a href="#wizard-1"><h2>Step 1</h2>
<small>Description for step 1</small></a></li>
<li><a href="#wizard-2"><h2>Step 2</h2>
<small>Description for step 2</small></a></li>
<li><a href="#wizard-3"><h2>Step 3</h2>
<small>Description for step 3</small></a></li>
<li><a href="#wizard-4"><h2>Step 4</h2>
<small>Description for step 4</small></a></li>
</ul>
<div id="wizard-body" class="wiz-body">
<div id="wizard-1" >
<div class="wiz-content">
<h2>Step 1 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="wiz-nav">
<input class="next btn" id="next" type="button" value="Next >" />
</div>
</div>
<div id="wizard-2">
<div class="wiz-content">
<h2>Step 2 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="wiz-nav">
<input class="back btn" id="back" type="button" value="< Back" />
<input class="next btn" id="next" type="button" value="Next >" /> </div>
</div>
<div id="wizard-3">
<div class="wiz-content">
<h2>Step 3 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="wiz-nav">
<input class="back btn" id="back" type="button" value="< Back" />
<input class="next btn" id="next" type="button" value="Next >" /> </div>
</div>
<div id="wizard-4">
<div class="wiz-content">
<h2>Step 4 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="wiz-nav">
<input class="back btn" id="back" type="button" value="< Back" />
<input class="btn" id="next" type="button" value="Done" />
</div>
</div>
</div>
</div><br />
<br /><br />
<br />
</body>
</html>JS代码(SmartWizard.js):
/* * SmartWizard * a javascript wizard control * http://tech-laboratory.blogspot.com * * Date:04-AUG-2009 * Version:0.98 */
(function($){
$.fn.smartWizard = function(options){
var defaults ={
selectedStep:0,// Selected Step,0 = first step errorSteps:[],// Array Steps with errors enableAll:false,// Enable All Steps,true/false animation:true,// Animation Effect on navigation,true/false validatorFunc:function(){
return true;
}
// Step validation function,Step index will be passed}
;
var options = $.extend(defaults,options);
return this.each(function(){
obj = $(this);
var wizcurrent = 0;
var steps = $("ul > li > a",obj);
// Apply Default Style to Steps applyCSS($(steps,obj),"wiz-anc-default");
// Hide All Steps on load hideAllSteps();
$(steps,obj).bind("click",function(e){
e.preventDefault();
var isDone = $(this,obj).attr("isDone");
if(isDone == 1){
var selIdx = steps.index(this);
applyCSS($(wizcurrent,obj),"wiz-anc-done");
selectStep(selIdx);
}
}
);
// activates steps up to the selected step for(i=0;
i<steps.length;
i++){
if(i<=options.selectedStep || options.enableAll==true){
activateStep(i);
}
}
// highlight steps with errors $.each(options.errorSteps,function(i,n){
//applyCSS(steps.eq(n),"wiz-anc-error");
setErrorStep(n)}
);
selectStep(options.selectedStep);
//Next Navigation $(".next",obj).bind("click",function(e){
e.preventDefault();
var curStepIdx = $(steps,obj).index(wizcurrent);
if(options.validatorFunc(curStepIdx)){
var nextStepIdx = curStepIdx+1;
applyCSS($(wizcurrent,obj),"wiz-anc-done");
selectStep(nextStepIdx);
}
}
);
//Back Navigation $(".back",obj).bind("click",function(e){
e.preventDefault();
applyCSS($(wizcurrent,obj),"wiz-anc-done");
var prevIdx = $(steps,obj).index(wizcurrent)-1;
selectStep(prevIdx);
}
);
function selectStep(idx){
if(idx < steps.length && idx >= 0){
var selStepAnchor = $(steps,obj).eq(idx);
var selStepIdx =selStepAnchor.attr("href");
hideAllSteps();
selStepAnchor.attr("isDone","1");
if(options.animation==true){
$(selStepIdx,obj).fadeIn("fast");
}
else{
$(selStepIdx,obj).show();
}
applyCSS($(selStepAnchor,obj),"wiz-anc-current");
wizcurrent = selStepAnchor;
}
}
function activateStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isDone","1");
applyCSS($(selStepAnchor,obj),"wiz-anc-done");
}
function setErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","1");
$(selStepAnchor,obj).addClass("wiz-anc-error");
}
function unsetErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","");
$(selStepAnchor,obj).removeClass("wiz-anc-error");
}
function hideAllSteps(){
$(steps,obj).each(function(){
$($(this,obj).attr("href"),obj).hide();
}
);
}
function applyCSS(elm,css){
$(elm,obj).removeClass("wiz-anc-default");
$(elm,obj).removeClass("wiz-anc-current");
$(elm,obj).removeClass("wiz-anc-done");
$(elm,obj).addClass(css);
}
}
);
}
;
}
)(jQuery);
CSS代码(style_wizard.css):
/* - - - - - - CSS Document - - - - - - - - -Title:SmartWizardAuthor:http://tech-laboratory.blogspot.comVersion:0.98- - - - - - - - - - - - - - - - - - - - - */
body{font:normal 12px Verdana,Arial,Helvetica,sans-serif;*font-size:small;**font:x-small;color:#0464BB;margin:0;padding:0;}
.wiz-container{margin:0;padding:0;width:920px;height:400px;left:5%;right:5%;top:20px;margin:1px;background:#F8F8F8;overflow:hidden;position:relative;border:#E0E0E0 solid 1px;padding:0;/*12px 0px 2px 5px;*/
color:#0464BB;text-align:left;-moz-border-radius:8px;-webkit-border-radius:8px;z-index:100;}
.wiz-container ul{margin:0;padding:0;list-style:none;position:relative;padding:3px;display:block;background:#F8F8F8;height:72px;margin-left:3px;margin-right:3px;border-bottom:1px solid #E0E0E0;}
.wiz-container ul li{margin:0;padding:0;position:relative;float:left;border-bottom-width:0 !important;margin:0;margin-right:2px;padding:0;}
.wiz-container ul li a{margin:0;padding:0;display:block;text-decoration:none;padding-left:3px;height:71px;width:210px;color:#0464BB;}
.wiz-container ul li a:hover{color:#0464BB;}
.wiz-anc-default{background-color:#EBEBEB;border:#E0E0E0 solid 1px;-moz-border-radius-bottomright:25px;-moz-border-radius-topright:25px;-moz-border-radius-bottomleft:2px;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px;}
.wiz-anc-current{color:#FFF !important;background-color:#EA8511;border:#EA8511 solid 1px;-moz-border-radius-bottomright:25px;-moz-border-radius-topright:25px;-moz-border-radius-bottomleft:2px;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px;}
.wiz-anc-done{color:#FFF !important;background-color:#0464BB;border:#0464BB solid 1px;-moz-border-radius-bottomright:25px;-moz-border-radius-topright:25px;-moz-border-radius-bottomleft:2px;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px;}
.wiz-anc-error{/*wiz-anc-done */
color:#CD0A0A !important;/*background-color:#FEF1EC;*/
border:#AE1000 solid 1px;}
.wiz-body{display:block;background:transparent;border-bottom:0px solid #E0E0E0;width:auto;}
.wiz-body div.wiz-content{display:block;position:relative;top:0px;left:0px;text-decoration:none;padding:3px;margin:3px;border-bottom:0px solid #E0E0E0;height:270px;width:auto;overflow:auto;}
.wiz-nav{display:block;position:absolute;left:0px;bottom:0px;text-decoration:none;padding:2px 5px 2px 5px;background:#F8F8F8;height:30px;width:99%;margin:0px 0px 5px 0px;border:0px solid #E0E0E0;border-top:1px solid #E0E0E0;}
.wiz-nav #next{float:right;}
.wiz-nav #back{float:left;}
.wiz-nav #done{margin-left:30%;float:left;}
/* Button & Textbox Styles */
h1,h2,h3{margin:0;padding:0;}
.btn{width:100px;-moz-border-radius:8px;-webkit-border-radius:8px;background:#5A5655;color:#FFFFFF;margin:2px 10px 0px 10px;padding:5px 5px 5px 5px;text-align:center;border:1px solid #5A5655;text-decoration:none;}
.btn:hover{background:#EA8511;color:#FFFFFF;border:1px solid #EA8511;text-decoration:none;}
.wiz-body .text{border:1px solid #E0E0E0;width:300px;padding:4px;}
.wiz-body .text:focus{border:1px solid #EA8511;}
.wiz-nav div.error{font:bold 12px Verdana,Arial,Helvetica,sans-serif;display:none;position:relative;left:30%;top:5px;width:400px;padding:5px 5px 5px 10px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;background:#FFE45C;border:1px solid #FED22F;color:#363636;}
/* End Button Styles */
分享到QQ
分享到微博
微信扫一扫
