一個基于HTML與JavaScript的向導Wizard演示
整個過程模仿用戶注冊，分為三步完成，運行效果如下：
全部代碼如下：
<html>
<head>
<title>JavaScript Create User Wizard Example</title>
<script type="text/javascript">
function handleWizardNext()
{
if (document.getElementById('ButtonNext').name == 'step2')
{
document.getElementById('step1').style.display = 'none';
document.getElementById('step2').style.display = '';
document.getElementById('ButtonNext').name = 'step3';
document.getElementById('ButtonPrevious').name = 'step1';
document.getElementById('ButtonPrevious').disabled = '';
document.getElementById('headstep1').style.backgroundColor = 'silver';
document.getElementById('headstep2').style.backgroundColor = 'white';
}
else if(document.getElementById('ButtonNext').name == 'step3')
{
document.getElementById('step2').style.display = 'none';
document.getElementById('step3').style.display = '';
document.getElementById('ButtonNext').name = '';
document.getElementById('ButtonNext').disabled = 'disabled';
document.getElementById('ButtonPrevious').name = 'step2';
document.getElementById('ButtonPrevious').disabled = '';
document.getElementById('SubmitFinal').disabled = '';
document.getElementById('headstep2').style.backgroundColor = 'silver';
document.getElementById('headstep3').style.backgroundColor = 'white';
}
}
function handleWizardPre() {
// console.log("this is to go back previous page");
if (document.getElementById('ButtonPrevious').name == 'step1') {
// display/hide the relevative fieldset
document.getElementById('step2').style.display = 'none';
document.getElementById('step1').style.display = '';
// enable/disable buttons
document.getElementById('ButtonNext').name = 'step2';
document.getElementById('ButtonPrevious').name = '';
document.getElementById('ButtonPrevious').disabled = 'disabled';
document.getElementById('SubmitFinal').disabled = 'disabled';
document.getElementById('SubmitFinal').name = '';
// change navigation color
document.getElementById('headstep2').style.backgroundColor = 'silver';
document.getElementById('headstep1').style.backgroundColor = 'white';
} else if(document.getElementById('ButtonPrevious').name == 'step2') {
// display/hide the relevative fieldset
document.getElementById('step3').style.display = 'none';
document.getElementById('step2').style.display = '';
// enable/disable buttons
document.getElementById('ButtonNext').name = 'step3';
document.getElementById('ButtonNext').disabled = '';
document.getElementById('ButtonPrevious').name = 'step1';
document.getElementById('ButtonPrevious').disabled = '';
document.getElementById('SubmitFinal').name = '';
document.getElementById('SubmitFinal').disabled = 'disabled';
// change navigation color
document.getElementById('headstep3').style.backgroundColor = 'silver';
document.getElementById('headstep2').style.backgroundColor = 'white';
}
}
</script>
<style type="text/css">
#userregisterizard {
width:500px;
height: 350px;
background-color:#EFEFEF;
border-style:solid;
border-width:5px;
border-color:#001111;
}
#userregisterizard #wizardpanel{
padding: 5px;
height: 250;
}
#userregisterizard #buttons{
padding: 5px;
height: 40;
}
#navigationbar {
padding: 2px;
height: 50px;
background-color:silver;
}
</style>
</head>
<body>
<div id="userregisterizard">
<div id="navigationbar">
<label id="headstep1" style="background-color:white">Step 1: Register</label>
<label id="headstep2" style="background-color:silver">Step 2: Detail Profile</label>
<label id="headstep3" style="background-color:silver">Step 3: Finalize</label>
</div>
<div id="wizardpanel">
<fieldset id="step1">
<legend>Create User</legend>
<label>Name<font color="red">*</font>: Enter your preferred user name</label><br>
<input name="wsname" type="text"></br>
<label>Password<font color="red">*</font>: Please use 8~16 characters that will protect your user account</label><br>
<input name="uspassword" type="password"></br>
</fieldset>
<!-- edit yourself profile -->
<fieldset id="step2" style="display:none">
<legend>Edit Profile</legend>
<label>Occupation<font color="red">*</font>: What do you do?</label><br>
<input name="wsname" type="text"></br>
<label>Company<font color="red">*</font>: Which company you are working for</label><br>
<input name="company" type="text"></br>
<label>Hometown<font color="red">*</font>: Where is you hometown</label><br>
<input name="hometown" type="text"></br>
<label>Mobilephone Number<font color="red">*</font>: Can we get your phone number?</label><br>
<input name="phonenumber" type="text"></br>
</fieldset>
<fieldset id="step3" style="display:none">
<legend>Welcome you</legend>
<p>you can see the your user profile what you have entered.<p>
</fieldset>
</div>
<div id="buttons">
<input id="ButtonPrevious" type="button" value="Previous" disabled="disabled" name="" onclick="handleWizardPre()"/>
<input id="ButtonNext" type="button" value="Next" name="step2" onclick="handleWizardNext()" />
<input id="SubmitFinal" type="submit" value="Finish" disabled="disabled" />
</div>
</div>
</body>
</html> 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！