海南苯概企业管理有限公司

jquery 的smartWizard插件常用在一些向?qū)降?，按步驟的功能中，是的用戶按照我們設(shè)定的步驟進(jìn)行操作，這樣一方面有較好的用戶體驗(yàn)，可以將龐大的表格 數(shù)據(jù)分解成多個(gè)步驟，是的每個(gè)步驟的數(shù)據(jù)量減少；另一方面流程比較清晰，先做那個(gè)下一步做什么都是可控可設(shè)定的。

下面說一下如何使用，首先html中引入jquery的smartWizard插件對應(yīng)的jquery.smartWizard-2.0.js

<!--html 中 -->  
<div id="sfxxdj_div" 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">學(xué)歷情況表</span> </a>  
        </li>  
        <li><a href="#sfxxdj_step_4"> <label class="stepNumber">3</label>  
                <span class="stepDesc">工作情況表</span> </a>  
        </li>  
 
    </ul>  
    <div 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">  
            個(gè)人</h1></th>  
              
        </table>  
    </div>  
    <div id="sfxxdj_step_2"  style="overflow: auto;">  
        <!--內(nèi)容可直接在這加入，如果內(nèi)容過大可直接載入html -->  
    </div>  
    <div id="sfxxdj_step_3"  style="overflow: auto;">  
    </div>  
    <div id="sfxxdj_step_4"  style="overflow: auto;">  
    </div>  
</div>  
<!-- End SmartWizard Content --> 


js代碼如下：

 var sfxxdj = {  
    //當(dāng)點(diǎn)下一步時(shí)回調(diào)該函數(shù)，一般用于當(dāng)前步驟的校驗(yàn)  
    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;//轉(zhuǎn)下一步  
                }  
                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;  
    },  
    //當(dāng)現(xiàn)實(shí)該步驟時(shí)回調(diào)該函數(shù)，一般用于當(dāng)前步驟的初始化  
    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"){  
                $('#div .actionBar a.buttonFinish').removeClass("buttonDisabled");  
                $('#div .actionBar a.buttonNext').addClass("buttonDisabled");  
            }  
            break;  
        case '5':  
            if(sfxxdj.b4=="0"){  
                settWtjj();  
            }  
            break;  
        case '6':  
            break;  
        default:  
            break;  
        }  
    }  
}  
 
$(function(){  
    //對象初始化，以及設(shè)定相關(guān)回調(diào)時(shí)間  
    $('#sfxxdj_div').smartWizard({  
        keyNavigation: false,   
        onFinish    : sfxxdj.onSubmit,  
        onNextStep  : sfxxdj.nextStepCallback,  
        onShowStep  : sfxxdj.showStepCallback  
    });  
    $( ".actionBar a" ).button();  
    //文件形式初始化各步驟的內(nèi)容  
    $('#sfxxdj_step_2').html("").load('jbqkb.html');  
    $('#sfxxdj_step_3').html("").load('xlqkb.html');  
    $('#sfxxdj_step_4').html("").load('gzqkb.html'); 


網(wǎng)上的參考資料不是很多，我也只是稍微應(yīng)用了一下，最后說一下我了解的技巧，默認(rèn)情況下上一步和下一步以及提交按鈕需要人工來控制，哪些需要對按鈕進(jìn)行添加移除樣式,如下：

$('.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");//上一步按鈕變灰

如何手動(dòng)激活一個(gè)步驟的，或者如何跳過步驟呢？操作如下：
比如直接激活第四步驟可點(diǎn)擊：

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

這樣不管你進(jìn)行的是否做到第四步，都可以點(diǎn)擊查看第四步的內(nèi)容。
比如某些時(shí)候我們需要從第一步調(diào)轉(zhuǎn)到第三步：

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