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);
下面說一下如何使用,首先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);