国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

        當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > jquery的smartWizard插件使用方法

        jquery的smartWizard插件使用方法

        時間:2016-03-30來源:風(fēng)信官網(wǎng) 點擊: 1378次
        jquery 的smartWizard插件常用在一些向?qū)降?,按步驟的功能中,是的用戶按照我們設(shè)定的步驟進(jìn)行操作,這樣一方面有較好的用戶體驗,可以將龐大的表格 數(shù)據(jù)分解成多個步驟,是的每個步驟的數(shù)據(jù)量減少;另一方面流程比較清晰,先做那個下一步做什么都是可控可設(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">  
                    個人</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ào)該函數(shù),一般用于當(dāng)前步驟的校驗  
            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)實該步驟時回調(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)時間  
            $('#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");//上一步按鈕變灰

        如何手動激活一個步驟的,或者如何跳過步驟呢?操作如下:
        比如直接激活第四步驟可點擊:

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

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

        $('#sfxxdj_div').smartWizard('skipTo',3);
        熱門關(guān)鍵詞: jquery smartWizard 插件使用方法
        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開