网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网站建设 >> Javascript >> 正文
最新文章
· Jquery插件原来就这么简单
· 21个值得收藏的Javascript技巧
· JavaScript中的原型和继承
· JS对select动态添加options操作
· js获取表单值的两种方法
· 关闭网页弹出加入收藏,刷新不弹出加
· 如何判断是关闭还是刷新网页
· 命名JavaSript函数名时注意
· javascript中的setAttribute()浏览器
· JS实现IE6下PNG图片透明且链接正常的
热门文章
 JS实现两个页面传值
 实现对文字自动排版的网页特效
 JS获取指定ID标签之间的内容
 JS实现IE6下PNG图片透明且链接正常
 JS计数器
 通过js改变页面中元素的内容
 js切换文本框的只读与可写的动态切
 JS实现cookie的添加、获取、删除
 js在线编辑器常用函数大全
 javascript中的setAttribute()浏览
相关文章
IE与Firefox在JavaScript上的7个不同句法
CSS和JavaScript标签对照表(部分)
JavaScript标签元素添加事件
javascript获取html中的图片地址
浏览器兼容手册(JavaScript+CSS)
网页制作之Javascript代码技巧
精用JavaScript制作向导程序
来源:天地盟网络科技 更新时间:2009/12/21 0:29:11 阅读次数:
字体:[ ] 我要投稿

良好的网页设计不只是您的网站设计美丽,而且在功能上也是给用户带来友好才行。其中能给用户带来最友好的工具就是网站向导。在这一部分中,我将使用JavaScript来制作一个向导程序且不参于服务器交互,直到我们完成。

在这里的演示程序大致分为四个功能模块:

1、信息提示。即该向导将要带领用户做什么?给用户一个提示。

2、分步骤让用户填写资料。

3、信息审核(这一步重要)。以提示用户确保所录入的信息正确。

4、提交完成。

代码如下:

以下为引用的内容:
<html>
<head>
<!---------------------------------
来源:齐并网络
http://www.ahqibing.net
----------------------------------->
    <title>JavaScript Subscription Wizard Example</title>
    <script type="text/javascript">  
         function handleWizardNext()
        {
            if (document.getElementById('ButtonNext').name == 'Step2')
            {
                document.getElementById('ButtonNext').name = 'Step3';
                document.getElementById('ButtonPrevious').name = 'Step1';
                document.getElementById('ButtonPrevious').disabled = '';
                document.getElementById('Step1').style.display = 'none';
                document.getElementById('Step2').style.display = '';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep1').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonNext').name == 'Step3')
            {
                document.getElementById('ButtonNext').name = 'Step4';
                document.getElementById('ButtonPrevious').name = 'Step2';
                document.getElementById('Step2').style.display = 'none';
                document.getElementById('Step3').style.display = '';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonNext').name == 'Step4')
            {
                document.getElementById('ButtonNext').name = 'Step5';
                document.getElementById('ButtonPrevious').name = 'Step3';
                document.getElementById('Step3').style.display = 'none';
                document.getElementById('Step4').style.display = '';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonNext').name == 'Step5')
            {
                document.getElementById('ButtonNext').name = '';
                document.getElementById('ButtonPrevious').name = 'Step4';
                document.getElementById('ButtonNext').disabled = 'disabled';
                document.getElementById('SubmitFinal').disabled = '';
                document.getElementById('Step4').style.display = 'none';
                document.getElementById('Step5').style.display = '';
                document.getElementById('HeaderTableStep5').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Silver';
                loadStep5Review();
            }
        }

      

        function handleWizardPrevious()
        {
            if (document.getElementById('ButtonPrevious').name == 'Step1')
            {
                document.getElementById('ButtonNext').name = 'Step2';
                document.getElementById('ButtonPrevious').name = '';
                document.getElementById('ButtonPrevious').disabled = 'disabled';
                document.getElementById('Step2').style.display = 'none';
                document.getElementById('Step1').style.display = '';
                document.getElementById('HeaderTableStep1').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonPrevious').name == 'Step2')
            {
                document.getElementById('ButtonNext').name = 'Step3';
                document.getElementById('ButtonPrevious').name = 'Step1';
                document.getElementById('Step3').style.display = 'none';
                document.getElementById('Step2').style.display = '';
                document.getElementById('HeaderTableStep2').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonPrevious').name == 'Step3')
            {
                document.getElementById('ButtonNext').name = 'Step4';
                document.getElementById('ButtonPrevious').name = 'Step2';
                document.getElementById('Step4').style.display = 'none';
                document.getElementById('Step3').style.display = '';
                document.getElementById('HeaderTableStep3').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Silver';
            }
            else if (document.getElementById('ButtonPrevious').name == 'Step4')
            {
                document.getElementById('ButtonNext').name = 'Step5';
                document.getElementById('ButtonPrevious').name = 'Step3';
                document.getElementById('ButtonNext').disabled = '';
                document.getElementById('SubmitFinal').disabled = 'disabled';
                document.getElementById('Step5').style.display = 'none';
                document.getElementById('Step4').style.display = '';
                document.getElementById('HeaderTableStep4').style.backgroundColor = 'Yellow';
                document.getElementById('HeaderTableStep5').style.backgroundColor = 'Silver';
            }

        }

      

        function loadStep5Review()
        {
            document.getElementById('ReviewFirstName').innerHTML = document.getElementById('TextFirstName').value;
            document.getElementById('ReviewMiddleName').innerHTML = document.getElementById('TextMiddleName').value;
            document.getElementById('ReviewLastName').innerHTML = document.getElementById('TextLastName').value;
            document.getElementById('ReviewEmail').innerHTML = document.getElementById('TextEmail').value;
            if (document.getElementById('CheckboxHtmlGoodies').checked == 1)
            {
                document.getElementById('ReviewHtmlGoodies').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewHtmlGoodies').innerHTML = 'No';
            }

            if (document.getElementById('CheckboxJavaScript').checked == 1)
            {
                document.getElementById('ReviewJavaScript').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewJavaScript').innerHTML = 'No';
            }

            if (document.getElementById('CheckboxWdvl').checked == 1)
            {
                document.getElementById('ReviewWdvl').innerHTML = 'Yes';
            }
            else
            {
                document.getElementById('ReviewWdvl').innerHTML = 'No';
            }


            var iCounter = 1;
            var iCharacterCount = document.getElementById('TextPassword').value.length;
            var passwordMasked = '';
            for (iCounter = 1; iCounter <= iCharacterCount; iCounter++)
            {
                passwordMasked = passwordMasked + '*';
            }
            document.getElementById('ReviewPassword').innerHTML = passwordMasked;
        }
    </script>
</head>

<body>
<form id="SubscriptionWizard" action="" method="post">
    <table border="1" cellpadding="5" cellspacing="0" id="HeaderTable">
        <tr>
            <td id="HeaderTableStep1" style="background-color:Yellow">
                Step 1: Getting Started</td>
            <td id="HeaderTableStep2" style="background-color:Silver">
                Step 2: Name</td>
            <td id="HeaderTableStep3" style="background-color:Silver">
                Step 3:&nbsp; Account Access</td>
            <td id="HeaderTableStep4" style="background-color:Silver">
                Step 4: Select subscriptions</td>
            <td id="HeaderTableStep5" style="background-color:Silver">
                Step:5 Finalize &amp; Submit</td>
        </tr>
    </table>
    <br />
<span id="Step1"><strong>
    Welcome to our Subscription Wizard!<br />
    </strong>
        <br />
    This wizard simulates subscribing for access to website content. Each step is highlighted in the header.
    <br />

    This step is intended to provide the user with everything they need to know to get started.

    <br />
</span>
<span id="Step2" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="right">
                First name:</td>
            <td>
                <input id="TextFirstName" name="FirstName" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Middle name:</td>
            <td>
                <input id="TextMiddleName" name="MiddleName" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Last name:</td>
            <td>
                <input id="TextLastName" name="LastName" type="text" /></td>
        </tr>
    </table>
</span>

<span id="Step3" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="right">
                Email:</td>
            <td>
                <input id="TextEmail" name="Email" type="text" /></td>
        </tr>
        <tr>
            <td align="right">
                Password:</td>
            <td>
                <input id="TextPassword" name="Password" type="password" /></td>
        </tr>
    </table>
</span>

<span id="Step4" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td align="left" colspan="2">
                <strong>
                Select your subscription:</strong></td>
        </tr>
        <tr>
            <td align="right">
                www.ahqibing.net:</td>
            <td>
                <input id="CheckboxHtmlGoodies" name="CheckboxHtmlGoodies" type="checkbox" value="Yes" /></td>
        </tr>
    </table>
</span>

<span id="Step5" style="display:none">
    <table border="0" cellpadding="5" cellspacing="0">
        <tr>
            <td colspan="2">
                <strong>Final Review:</strong></td>
        </tr>
        <tr>
            <td align="right">
                First name:</td>
            <td id="ReviewFirstName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Middle name:</td>
            <td id="ReviewMiddleName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Last name:</td>
            <td id="ReviewLastName">
                </td>
        </tr>
        <tr>
            <td align="right">
                Email:</td>
            <td id="ReviewEmail">
            </td>
        </tr>
        <tr>
            <td align="right">
                Password:</td>
            <td id="ReviewPassword">
            </td>
        </tr>
        <tr>
            <td align="left">
                <strong>
                Subscribed to:</strong></td>
            <td>
            </td>
        </tr>
        <tr>
            <td align="right">
                www.ahqibing.net:</td>
            <td id="ReviewHtmlGoodies">
            </td>
        </tr>
    </table>
</span>
<br />  
<table border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td>
            <input id="ButtonPrevious" type="button" value="Previous" disabled="disabled" name=""

onclick="handleWizardPrevious()" /></td>
        <td>
            <input id="ButtonNext" type="button" value="Next" name="Step2" onclick="handleWizardNext()" /></td>
        <td>
            <input id="SubmitFinal" type="submit" value="Finish" disabled="disabled" /></td>
    </tr>
</table>
</form>
</body>
</html>
 


可以了,如果想让该程序制作的更完美些,可以试着添加其它功能,如验证等。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号