激情五月婷婷综合网_奇米精品一区二区三区四区_91在线码无精品_国产精品久久久久一区二区三区_日韩一区二区在线看_99国产欧美另类久久久精品_日韩电影免费一区_亚洲欧美在线另类_9色porny自拍视频一区二区_久久一区二区三区四区_日本在线不卡视频_欧美日韩三级一区二区_亚洲欧美日韩国产综合在线_国产精品影视网_欧美中文字幕一区_制服.丝袜.亚洲.中文.综合

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

下面說(shuō)一下如何使用，首先html中引入jquery的smartWizard插件對(duì)應(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">選擇身份類(lèi)型</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>請(qǐng)選擇身份類(lèi)型：</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)容過(guò)大可直接載入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("請(qǐng)選擇基金登記類(lèi)型！");  
                    return false;  
                }  
            case '2':  
                if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){  
                    alert("請(qǐng)輸入基金名稱(chēng)！");  
                    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(){  
    //對(duì)象初始化，以及設(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)用了一下，最后說(shuō)一下我了解的技巧，默認(rèn)情況下上一步和下一步以及提交按鈕需要人工來(lái)控制，哪些需要對(duì)按鈕進(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è)步驟的，或者如何跳過(guò)步驟呢？操作如下：
比如直接激活第四步驟可點(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);