jquery的smartWizard插件使用方法

jquery的smartWizard插件常用在一些向導式的,按步驟的功能中,是的用戶按照我們設定的步驟進行操作,這樣一方面有較好的用戶體驗,可以將龐大的表格數據分解成多個步驟,是的每個步驟的數據量減少;另一方面流程比較清晰,先做那個下一步做什麼都是可控可設定的。

下面說一下如何使用,首先html中引入jquery的smartWizard插件對應的jquery.smartWizard-2.0.js

 

html中代碼如下:

 

[html]  

<!–html 中 –>  

<p id="sfxxdj_p" class="swMain">  

    <ul id="sfxxdj_wizard_ul">  

        <li><a href="#sfxxdj_step_1"> <label class="stepNumber">1</label>  

                <span class="stepDesc">選擇身份類型</span> </a>  

        </li>  

        <li><a href="#sfxxdj_step_2"> <label class="stepNumber">1</label>  

                <span class="stepDesc">基本信息表</span> </a>  

        </li>  

        <li><a href="#sfxxdj_step_3"> <label class="stepNumber">2</label>  

                <span class="stepDesc">學歷情況表</span> </a>  

        </li>  

        <li><a href="#sfxxdj_step_4"> <label class="stepNumber">3</label>  

                <span class="stepDesc">工作情況表</span> </a>  

        </li>  

  

    </ul>  

    <p id="sfxxdj_step_1"  style="overflow: auto;">  

        <table cellpadding="0" cellspacing="0" border="0" class="wi-frm-tbl" style="width:100%; height:500px;line-height:50px">  

            <th valign="top"><h1>請選擇身份類型:</h1></br>  

            <h1><input type="radio" name="jjdj_lx" id="jjdj_ctgs" value="1">  

            公司</h1></br>  

            <h1><input type="radio" name="jjdj_lx" id="jjdj_glgs" value="3">  

            個人</h1></th>  

              

        </table>  

    </p>  

    <p id="sfxxdj_step_2"  style="overflow: auto;">  

        <!–內容可直接在這加入,如果內容過大可直接載入html –>  

    </p>  

    <p id="sfxxdj_step_3"  style="overflow: auto;">  

    </p>  

    <p id="sfxxdj_step_4"  style="overflow: auto;">  

    </p>  

</p>  

<!– End SmartWizard Content –>  

 

js代碼如下:

 

[javascript]  

var sfxxdj = {  

    //當點下一步時回調該函數,一般用於當前步驟的校驗  

    nextStepCallback : function(stepObj){  

        var step_num= stepObj.attr('rel');  

        switch (step_num) {  

            case '1':  

                if($('input[name=jjdj_lx]:checked').val()>0){  

                    sfxxdj.jjlx = $('input[name=jjdj_lx]:checked').val();  

                    if(sfxxdj.jjlx=='1'){  

                        $('#sfxxdj_wizard_ul [rel=5]').hide();  

                        $('#sfxxdj_step_5').hide();  

                    }else{  

                        $('#sfxxdj_wizard_ul [rel=2]').hide();  

                    }  

                    return true;//轉下一步  

                }  

                else{  

                    alert("請選擇基金登記類型!");  

                    return false;  

                }  

            case '2':  

                if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){  

                    alert("請輸入基金名稱!");  

                    return false;  

                }else{  

                    sfxxdj.jjmc=$("#sfxxdj_jbqkb_jjmc").val();  

                }  

                return true;  

            case '3':  

                return true;  

            case '4':  

                return true;  

            case '5':  

                return true;  

            case '6':  

            default:  

                break;  

        }  

        return true;  

    },  

    //當現實該步驟時回調該函數,一般用於當前步驟的初始化  

    showStepCallback : function(stepObj){  

        var step_num= stepObj.attr('rel');  

        switch (step_num) {  

        case '2':  

            break;  

        case '3':  

            break;  

        case '4':  

            $("#jjxmmc").text(sfxxdj.jjmc);  

            if(sfxxdj.jjlx=="1"){  

                $('#p .actionBar a.buttonFinish').removeClass("buttonDisabled");  

                $('#p .actionBar a.buttonNext').addClass("buttonDisabled");  

            }  

            break;  

        case '5':  

            if(sfxxdj.b4=="0"){  

                settWtjj();  

            }  

            break;  

        case '6':  

            break;  

        default:  

            break;  

        }  

    }  

}  

  

$(function(){  

    //對象初始化,以及設定相關回調時間  

    $('#sfxxdj_p').smartWizard({  

        keyNavigation: false,   

        onFinish    : sfxxdj.onSubmit,  

        onNextStep  : sfxxdj.nextStepCallback,  

        onShowStep  : sfxxdj.showStepCallback  

    });  

    $( ".actionBar a" ).button();  

    //文件形式初始化各步驟的內容  

    $('#sfxxdj_step_2').html("").load('jbqkb.html');  

    $('#sfxxdj_step_3').html("").load('xlqkb.html');  

    $('#sfxxdj_step_4').html("").load('gzqkb.html');  

}  

 

網上的參考資料不是很多,我也隻是稍微應用瞭一下,最後說一下我瞭解的技巧,默認情況下上一步和下一步以及提交按鈕需要人工來控制,哪些需要對按鈕進行添加移除樣式,如下:

[javascript] 

$('.actionBar a.buttonFinish').removeClass("buttonDisabled");//提交按鈕可用  

$('.actionBar a.buttonFinish').addClass("buttonDisabled");//提交按鈕變灰  

$('.actionBar a.buttonNext').removeClass("buttonDisabled");//下一步按鈕可用  

$('.actionBar a.buttonNext').addClass("buttonDisabled");//下一步按鈕變灰                 

$('.actionBar a.buttonPrevious').removeClass("buttonDisabled");//上一步按鈕可用  

$('.actionBar a.buttonPrevious').addClass("buttonDisabled");//上一步按鈕變灰  

如何手動激活一個步驟的,或者如何跳過步驟呢?操作如下:

 

比如直接激活第四步驟可點擊:

[javascript]  

$('#sfxxdj_wizard_ul [rel=4]').attr("isDone",1);  

$('#sfxxdj_wizard_ul [rel=4]').addClass("done").removeClass("disabled");  

 

這樣不管你進行的是否做到第四步,都可以點擊查看第四步的內容。

比如某些時候我們需要從第一步調轉到第三步:

[javascript]  

$('#sfxxdj_p').smartWizard('skipTo',3);  

發佈留言