jWiard 基于JQuery的强大的向导控件介绍

　　<!-- jquery ui theme -->

　　<link rel="stylesheet" href="/path/to/jquery-ui.css" />

　　<!-- required CSS basics -->

　　<link rel="stylesheet" href="/path/to/jWizard.base.css" />

　　<!-- duh -->

　　<script type="text/javascript" src="/path/to/jquery.js"></script>

　　<!-- at least the widget factory -->

　　<script type="text/javascript" src="/path/to/jquery-ui.js"></script>

　　<!-- and the plugin itself -->

　　<script type="text/javascript" src="/path/to/jWizard.min.js"></script>

　　<form id="wizard-form" class="jWizard">

　　<fieldset>

　　<legend>Beginning</legend>

　　<p>Are you sure you want to begin? Press "Next" to proceed?</p>

　　</fieldset>

　　<fieldset>

　　<legend>Middle</legend>

　　<p>Are you sure you want to?</p>

　　<p>You can still go back. Or press "Next" again to confirm.</p>

　　</fieldset>

　　<fieldset>

　　<legend>End</legend>

　　<p>Done, click "Finish" to end</p>

　　</fieldset>

　　</form>

　　<!-- Can also just be divs with title attributes -->

　　<div id="wizard-div" class="jWizard">

　　<div title="Beginning">

　　<p>Are you sure you want to begin? Press "Next" to proceed?</p>

　　</div>

　　<div title="Middle">

　　<p>Are you sure you want to?</p>

　　<p>You can still go back. Or press "Next" again to confirm.</p>

　　</div>

　　<div title="End">

　　<p>Done, click "Finish" to end</p>

　　</div>

　　</div>

　　$(".jWizard").jWizard({

　　menuEnable: true,

　　counter: {

　　enable: true,

　　progressbar: true

　　},

　　effects: { enable: true }

　　});

　　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; },

　　finish: function(event, ui) {

　　alert("Thank you!");

　　}

　　})

　　/** The bindings below are event handlers, they will all be executed before proceeding to the callback */

　　/** ui = {

　　type: "previous|next|first|last|manual",

　　currentStepIndex: [int],

　　nextStepIndex: [int]

　　}; */

　　// This event handler is specifically used for form validation

　　.bind("jwizardchangestep", function (event, ui) {

　　// "manual" is always triggered by the user, never jWizard itself

　　if (ui.type !== "manual") {

　　var $currentStep = $w.find(".jw-step:eq(" + ui.currentStepIndex + ")"),

　　$inputs = $currentStep.find("input:text");

　　/** I am assuming you have `jquery.validate.js` running in this callback */

　　if ($inputs.length > 0 && !$inputs.valid()) {

　　$currentStep.find("label.error").effect("highlight");

　　return false;

　　}

　　}

　　})

　　// This event handler is for handling custom navigation through the wizard

　　.bind("jwizardchangestep", function (event, ui) {

　　// "manual" is always triggered by the user, never jWizard itself

　　if (ui.type !== "manual") {

　　// 这里其实是比较重要的，因为这里就是选择对应div的实现方式的，你只需要把相应模块的javascript代码集成到这里就可以了。

　　switch (ui.currentStepIndex) {

　　// on the first step, the user must agree to the terms and conditions

　　case 0:

　　if ($("#agree").is(":not(:checked)")) {

　　// use this effect to give the user feedback

　　$("#agree").parent().effect("pulsate");

　　return false;

　　}

　　break;

　　// on the 3rd step, (zero-index) the username being filled means we are skipping the openid step

　　case 2:

　　if ($("#username").val() != "") {

　　// by setting this value on the event object, I am telling jWizard to override the nextStepIndex

　　event.nextStepIndex = 4;

　　// you must at least call event.preventDefault(); in order for this to work

　　return false;

　　}

　　break;

　　}

　　}

　　// by using nextStepIndex, we can intercept the user when they are *about to start* on a particular step

　　switch (ui.nextStepIndex) {

　　// in this case, I am displaying a summary on the last step of the wizard

　　case 4:

　　var oFormValues = {

　　name: $("#name").val(),

　　email: $("#email").val(),

　　username: $("#username").val(),

　　openid: undefined

　　};

　　$("#summary-name").children("td").text(oFormValues.name);

　　$("#summary-email").children("td").text(oFormValues.email);

　　if (oFormValues.username != "") {

　　$("#summary-username").show().children("td").text(oFormValues.username);

　　$("#summary-openid").hide().children("td").text("");

　　} else {

　　var $openid = $w.find("input:radio:checked[name=openid]");

　　oFormValues.openid = ($openid.length === 1) ? $openid.val() : $("#openid-other").val();

　　$("#summary-username").hide().children("td").text("");

　　$("#summary-openid").show().children("td").text(oFormValues.openid);

　　}

　　break;

　　}

　　});

　　// if the user clicks the openid link on step 3, (zero-index) cause the wizard to jump to the openid step

　　$("#openid").click(function () {

　　$w.jWizard("changeStep", 3);

　　return false;

　　});

　　// if an openid radio button is checked, blank out the `other` textbox

　　$w.find("input:radio[name=openid]").change(function (event) {

　　$("#openid-other").val("");

　　});

　　// if the `other` openid textbox is used, blank out the radio buttons

　　$("#openid-other").change(function (event) {

　　if (this.value != "") {

　　$w.find("input:radio[name=openid]").removeAttr("checked");

　　}

　　});