コードをコピーします。 > コードは次のとおりです:
var $w = $("#events-test");
$w.validate({ errorClass: "ui-state-error-text" }); >.jWizard({
buttons: {
cancelType: "reset", // 「キャンセル」ボタンがクリックされたときにトリガーされるアクション。たとえば、私のプロジェクトでは、最初のページにジャンプしてやり直します。 .
finishType: "submit" // 最後のステップ、つまり送信で「終了」をクリックしたときにトリガーされるアクション。
},
// 「キャンセル」ボタンがクリックされたときにトリガーされるアクション。プロジェクト内で、最初のページに移動して、もう一度開始します。
$w.jWizard("firstStep"); , // 前へをクリックするとトリガーされます。アクション。たとえば、私のプロジェクトでは、すべてのメールが送信されると、ユーザーは前のページに移動できなくなります。次のように非常に簡単です。 ;
previous: function(event, ui) {
// if(ui.currentStepIndex==7){return false;} 以上です、7 は 0 から始まる div の連続番号を指します。 .
},
next: function(event, ui) {
// ここでも同じことが当てはまります。次のページを制御する場合は上記と同じです。そうでない場合は、最初に bool 値を設定してから、
if(fileUploadComplete){ $.get("@Url.Action("VerificationSchema") を設定できます。 , "Home")", // ここで MVC を学習している子供たちにはよく知られているはずです。実際、これはメソッド VerificationSchema function (data) { // 取得に成功した後に返されるデータ var newData = eval(data); // jsonを使用するため、変換にはevalを使用します schemaVerification=newData.HasErrors; if(newData.HasErrors) { varlisting1 = document.getElementById("listing1"); "Congruations.Please go on."; } else { document.getElementById("ErrorNotification").innerHTML="申し訳ありません。スキーマが間違っています。確認してください。"; var listing1 = document.getElementById ("listing1"); listing1.innerHTML = newData.Result } },"json");} else { //これは主に、データがない場合にアラート(「最初に必要な Excel ファイルをアップロードしてください)」を求めるためのものです。 ); return false; } ブレーク; },
alert("ありがとうございます!");
/ **以下のバインディングはイベント ハンドラーであり、コールバックに進む前にすべて実行されます。*/
/**ui = {
type: "previous|next|first|last|manual",
currentStepIndex: [int],
nextStepIndex: [int]
};*/
// このイベント ハンドラーは特にフォーム検証に使用されます
.bind("jwizardchangestep", function (event, ui) {
/ / "manual" は常にユーザーによってトリガーされ、jWizard 自体によってトリガーされることはありません
if (ui.type !== "manual") {
var $currentStep = $w.find(".jw-step :eq( " ui.currentStepIndex ")"),
$inputs = $currentStep.find("input:text");
/**このコールバックで「jquery.validate.js」が実行されていると仮定します。*/
if ($inputs.length > 0 && !$inputs.valid()) {
$currentStep.find("label.error").effect("highlight");
return false; 🎜>} )
// このイベント ハンドラーは、ウィザードを介したカスタム ナビゲーションを処理するためのものです
.bind("jwizardchangestep", function (event, ui) {
// "manual" は常にユーザー、決して jWizard 自体を使用しないでください。
if (ui.type !== "manual") {
// これは、対応する div の実装を選択する場所であるため、実際にはより重要です。対応するモジュールのJavaScriptコードをここに組み込むだけです。
switch (ui.currentStepIndex) {
// 最初のステップで、ユーザーは利用規約に同意する必要があります
case 0:
if ($("#agree").is( ":not(:checked)")) {
// このエフェクトを使用してユーザーにフィードバックを提供します
$("#agree").parent().effect("pulsate");
false を返します。
}
休憩;
// 3 番目のステップ (ゼロインデックス) でユーザー名が入力されるということは、openid ステップをスキップすることを意味します
ケース 2:
if ($("#username").val() != "") {
// この値をイベント オブジェクトに設定することで、jWizard に nextStepIndex をオーバーライドするよう指示します。
event.nextStepIndex = 4;
// 少なくとも、event.preventDefault() を呼び出す必要があります。これを機能させるには
return false;
}
休憩;
}
}
// nextStepIndex を使用すると、ユーザーが特定のステップを *開始しようとしている* ときにインターセプトできます
switch (ui.nextStepIndex) {
// inこのケースでは、ウィザードの最後のステップの概要を表示しています。
ケース 4:
var oFormValues = {
name: $("#name").val(),
email: $("#email").val(),
ユーザー名: $("#username").val(),
openid: 未定義
};
$("#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);
}
休憩;
}
});
// ユーザーがステップ 3 で openid リンクをクリックすると、(ゼロインデックス) ウィザードが openid ステップにジャンプします
$("#openid").click(function () {
$w.jWizard("changeStep", 3);
return
});
// openid ラジオ ボタンがチェックされている場合は、「other」テキスト ボックスを空白にします。
$w.find("input:radio[name=openid]").change(function (event) {
$("#openid-other").val("");
// `other` openid テキストボックスが使用されている場合は、ラジオ ボタンを空白にします。
$("#openid-other").change(function (event) {
if (this.value != "") {
$w.find("input:radio[name=openid]").removeAttr("checked");
}
});
合計、我の搜犬怎么突然不用了。
具体的な効果はこちら
にあります。
