Jquery formwizard 入门 【前台 向导功能】

最近项目中需要用到前台类似于向导的功能，在网上查了下发现 Jquery wizard挺适合的。

官方地址：http://thecodemine.org/ 包含演示效果和源代码

 

我用到的知识点：

我的需求是只需要向导功能，并不需要“Submit,Action”等form的功能， 所以form不需要写action的地址，submit也需要稍微处理下

 第一个wizard子项 id="first"，非第一个wizard项的id可随意指定

wizard项不必是demo中的span，但必须指定 class="step"

 

如需要加些验证功能，可以和jquery validation一起使用

 

自己的demo代码如下：

 

<!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>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/bbq.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#wizard").formwizard({
                formPluginEnabled: true,
                validationEnabled: true,
                focusFirstInput: true,
                formOptions: {
                    success: function (data) { },
                    beforeSubmit: function (data) {
                        alert(data.toLocaleString()); //不需要from默认提交的方法 ，在此自己处理
                    },
                    dataType: 'json',
                    resetForm: true
                }
            });

            $("#back").click(function () {
                $("#wizard").formwizard("back");
            });

            $("#next").click(function () {
                $("#wizard").formwizard("next");
            });
        });
    </script>
</head>
<body>
    <form id="wizard" action="#">
    <div id="first" class="step">
        <label for='username'>
            用户名：</label>
        <input id='username' name='username' />
        <br />
        <label for='password'>
            密码：</label>
        <input id='password' name='password' />
        <br />
    </div>
    <div id="wizardItem2" class="step">
        <label for='username2'>
            用户名：</label>
        <input id='username2' name='username2' />
        <br />
        <label for='password2'>
            密码：</label>
        <input id='password2' name='password2' />
        <br />
    </div>

        <div id="wizardItem3" class="step">
        <label for='username3'>
            用户名：</label>
        <input id='username3' name='username3' />
        <br />
        <label for='password3'>
            密码：</label>
        <input id='password3' name='password3' />
        <br />
    </div>
    </form>
    <div>
        <button id="back">上一步 </button>
        <button id="next">下一步</button>
    </div>
</body>
</html>

 

 

 

posted @ 2012-09-12 22:18  如坐夕阳  Views(2265)  Comments(0)    收藏  举报