1.3 js开始调用。
JS Call
$(“.jWizard”).jWizard({
menuEnable: true,
counter: {
enable: true,
progressbar: true
},
effects: { enable: true }
});
OK, 到此为止，上面的基本步骤就实现了，效果如下：
示例 2：给next添加事件
在我现在做的第一个版本里，刚开始比如有上传文件，验证文件等等操作，很二的直接在页面放了一个button，然后触发它的javascript代码。这样做可以满足基本功能的需求，可是也非常严重的损害了用户的体验。因为，现在的用户非常的懒，能少做一点事情，它是绝对不会多做的。所以，如果你放一个button，用户不想去点击，然后就点击next了，那么就得不到需要的用户，就会报错。
因此，我们可以把一些操作都集成到Next中去，那这样子就灰常灰常的方便了，而且页面也变的灰常灰常的整洁大方。
其余代码可以基本不变，现在我主要讲一下js里面的事件机制，代码如下：
var $w = $(“#events-test”);
$w.validate({ errorClass: “ui-state-error-text” });
$w
.jWizard({
buttons: {
cancelType: “reset”, // 点击”Cancel“按钮的时候 触发的动作，比如我在项目中，是跳到第一页 重新开始。
finishType: “submit” // 在最后一步点击”finish“的时候，出发的动作，也就是提交。
},
// 点击”Cancel“按钮的时候 触发的动作，比如我在项目中，是跳到第一页 重新开始。
cancel: function(event, ui) {
$w.jWizard(“firstStep”);
}, // 点击previous的时候触发的动作。比如在我项目中，因为当把所有的邮件都发送完毕的时候，就不能让用户上一页了，所以我要把上一页的功能给进禁止掉。很简单，如下；
previous: function(event, ui) {
// if(ui.currentStepIndex==7){return false;} 就可以了。7 指的是你的div的顺序数字，从0开始，哈这个会数吧。
},
next: function(event, ui) {
// 这里同理哦，就是控制下一页的情况，也是上面一样。比如，在我项目中，有一个上传数据的，要是没有就不能让它上传。这种情况 你可以先设定一个bool值，然后，
if(fileUploadComplete){ $.get(“@Url.Action(“VerificationSchema”, “Home”)”, // 这里学习MVC的童鞋们应该很熟悉 其实也就是在action home 下面的方法 VerificationSchema function (data) { // 获取成功后返回的数据 var newData = eval(data); // 因为用的json 所以用eval 进行转换 schemaVerification=newData.HasErrors; if(newData.HasErrors) { var listing1 = document.getElementById(“listing1”); listing1.innerHTML = “<font color=’red’ size=’20px’>Congruations.Please go on.</font>”; } else { document.getElementById(“ErrorNotification”).innerHTML=”Sorry.Your Schema wrong,please check it.”; var listing1 = document.getElementById(“listing1″); listing1.innerHTML = newData.Result; } },”json”);} else { //这里主要是当没有选择数据的时候 进行提示 alert(“Please firstly Upload the Excel File you need”); return false; } break; },
