jQuery を使用した最初のアプリが登場しました。両方のダイアログ ボックスがビルドされ、正常に実行されました。[ファイル] メニューの [ログイン] をクリックすると、ログイン ボックスが表示されましたが、できませんでした。 [開く] をクリックすると、[開く] ボックスが表示されます。
両方のダイアログの jQuery コードは次のとおりです。
$("#login-form").dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
buttons: {
"Log In": function () {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(username, "username", 3, 16);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password may consist of : a-z 0-9");
if (bValid) {
if (username.val() == "admin" && password.val() == "password") {
$("#users tbody").append("<tr>" + "<td>" + username.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>");
$(this).dialog("close");
} else {
alert("Invalid Username/Password Combo");
}
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$("#dateturn-form").dialog({
autoOpen: false,
height: 550,
width: 350,
modal: true,
buttons: {
"Accept": function () {
$("#content-left").append("<p>Date: " + dateinput.val() + " turn: " + turnvalue + "</p>");
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#login")
.click(function () {
$("#login-form").dialog("open");
});
$("#open")
.click(function () {
$("dateturn-form").dialog("open");
});
プロジェクトへの jsFiddle リンクは次のとおり です。