jquery的smartWizard插件使用方法

淡淡的烟草味﹌ 2022-08-05 04:23 396阅读 0赞

jquery的smartWizard插件常用在一些向导式的，按步骤的功能中，是的用户按照我们设定的步骤进行操作，这样一方面有较好的用户体验，可以将庞大的表格数据分解成多个步骤，每个步骤的数据量减少；另一方面流程比较清晰，先做那个下一步做什么都是可控可设定的。

下面说一下如何使用，首先html中引入jquery的smartWizard插件对应的[smartWizard][]

html中[代码][Link 1]如下：

<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">学历情况表</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;">
    	    
    	</div>
    	<div id="sfxxdj_step_3"  style="overflow: auto;">
    	</div>
    	<div id="sfxxdj_step_4"  style="overflow: auto;">
    	</div>
    </div>

js代码如下：

网上的参考资料不是很多，我也只是稍微应用了一下，最后说一下我了解的技巧，默认情况下上一步和下一步以及提交按钮需要人工来控制，哪些需要对按钮进行添加移除样式,如下：

$('.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");

这样不管你进行的是否做到第四步，都可以点击查看第四步的内容。  
比如某些时候我们需要从第一步调转到第三步：

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

[smartWizard]: http://download.csdn.net/detail/xiaozhu0301/8775155
[Link 1]: http://www.xuebuyuan.com/