一个基于HTML与JavaScript的Wizard演示
2016-07-29 00:00
337 查看
整个过程模仿用户注册,分为三步完成,运行效果如下:
全部代码如下:
全部代码如下:
<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>
相关文章推荐
- 一个基于HTML与JavaScript的Wizard演示
- html----javascript----只打开一个新窗口
- 一个用基于智能标签的生成HTML实例
- 《构建iPhone企业级应用—基于HTML, CSS 和JavaScript》已出版
- 一个HTML/CSS/Javascript的在线开发工具 - Fiddle Salad
- 分享一个基于事件时间线的Javascript类库-Chronoline
- 基于HTML标签的JavaScript触发事件处理
- 演示HTML的一个新标签
- HTML+JavaScript实现在一个下拉框中多选,然后提交到另外一个下拉框中的效果
- 一个HTML/CSS/Javascript的在线开发工具 - Fiddle Salad
- 一个HTML/CSS/Javascript的在线开发工具 - Fiddle Salad
- 基于平移算法的一个小演示
- javascript 的参数有长度限制吗?一个细节引起的误区 分类: 网页编程【html、js】 2009-11-10 08:34 1673人阅读 评论(0) 收藏
- 请教各位一个关于HtmlControls与JavaScript的疑问
- Javascript 用本页面文本域中的HTML代码打开一个空白窗口来运行
- 一个Javascript的Logger Console(带演示)
- 一个JavaScript的Hash类 http://www.cnblogs.com/fanrong/archive/2007/02/06/641556.html
- 基于AjaxHelper0.41的相册范例程序演示及一个关于博客园的功能建议
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中