私はこの jQuery UI を彼らの Web サイトで入手しましたが、単純な大学の計算アプリ用に作り直したいと思いました。私の計画は、電子メール、ユーザー名などの基本データを取り出して、3 つの主要なドロップダウン メニューに置き換えることでした。1 を使用して、彼らが州内の学生か州外の学生かを確認します。どちらも異なる値を持ちます。別のドロップダウンでは、大学に在籍しているかどうかを尋ねられ、入力に応じて費用が更新されます。最後のドロップダウン メニューでは、在学年数が尋ねられます。3 つの入力に基づいて、その大学の総費用を計算します。テキストボックスの代わりにドロップダウンメニューの値を投稿する必要があります。助けてくれてありがとう!! だから私は現在これを持っています:
スタイル:
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee;
padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
jQuery スクリプト
<script>
$(function() {
var username = $( "#username" ),
studenttut = $( "#studenttut" ),
studenttut = $( "#campusrb" ),
studenttut = $( "#yearsatten" ),
allFields = $( [] ).add( username ).add( studenttut ).add( campusrb ).add( yearsatten ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( username, "username", 3, 16 );
bValid = bValid && checkLength( studenttut, "studenttut", 1, 2 );
bValid = bValid && checkLength( campusrb, "campusrb", 1, 2 );
bValid = bValid && checkLength( yearsatten, "yearsatten", 1, 2 );
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( studenttut, /^[1-2]/, "Please select an option for the type of student you'll be." );
bValid = bValid && checkRegexp( campusrb, /^[1-2]/, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
bValid = bValid && checkRegexp( yearsatten, /^[1-8]/, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + username.val() + "</td>" +
"<td>" + studenttut.val() + "</td>" +
"<td>" + campusrb.val() + "</td>" +
"<td>" + yearsatten.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
HTML
<body>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="username">username</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui- corner-all" />
<label for="studenttut">Are you a In-state/Out-of-state student?</label>
<select name="studenttut" id="studenttut" class="text ui-widget-content ui-corner-all" />
<option value="1">In-State-student</option>
<option value="2">Out-of-State-student</option>
</select>
<label for="campusrb">Are you staying on campus?</label>
<select name="campusrb" id="campusrb" class="text ui-widget-content ui- corner-all" />
<option value="" disabled="disabled" selected="selected">Please select an option</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<label for="yearsatten">How many years are you planning to attend??</label>
<select name="yearsatten" id="yearsatten" class="text ui-widget-content ui- corner-all" />
<option value="" disabled="disabled" selected="selected">Please select an option</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
<option value="6">6 years</option>
<option value="7">7 years</option>
<option value="8">8 years</option>
</select>
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
</body>