Berikut ini kita akan membuat warning required field di jQuery UI seperti gambar di bawah ini
Untuk file utamanya warning.html
<!DOCTYPE html>
<html>
<head>
<title>Pesan warning</title>
<link rel=”stylesheet” href=”development-bundle/themes/base/jquery.ui.all.css”>
<link rel=”stylesheet” href=”css/jquery.ui.form.css”>
</head>
<body>
<div class=”ui-widget ui-form”>
<div class=”ui-widget-header ui-corner-all”>
<h2>Login Form</h2>
</div><!–end of ui-widget-header ui-corner-all–>
<div class=”ui-widget-content ui-corner-all”>
<form action=”#” class=”ui-helper-clearfix”>
<label>Username</label>
<div class=”ui-state-error ui-corner-all”>
<input type=”text”>
<div class=”ui-icon ui-icon-alert”></div>
<p class=”ui-helper-reset ui-state-error-text”>
Required field
</p>
</div><!–end of ui-state-error ui-corner-all–>
</form>
</div><!–end of ui-widget-content ui-corner-all–>
</div><!–end of ui-widget ui-form–>
</body>
</html>
File utama di atas sudah cukup untuk membuat tampilan secara fungsional, tetapi secara tata letak terlihat tidak rapi.
Perhatikan cara memunculkan image yang ada di jquery.ui.theme.css
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-icon-alert { background-position: 0 -144px; }
Terlihat bahwa ui-icon-alert memakai images/ui-icons_222222_256x240.png pada koordinat 0 -144px.
Sedangkan tambahan file cssnya : css/jquery.ui.form.css. Tambahan file css ini untuk merapikan tampilan dengan isi sebagai berikut:
.ui-form
{
width: 470px;
margin: 0 auto;
}
.ui-form .ui-widget-header h2
{
margin: 10px 0 10px 20px;
}
.ui-form .ui-widget-content
{
padding: 20px;
}
.ui-form label, .ui-form input, .ui-form .ui-state-error,
.ui-form .ui-icon, .ui-form .ui-state-error p
{
float: left;
}
.ui-form label, .ui-state-error p
{
font-size: 12px;
padding: 10px 10px 0 0;
}
.ui-form .ui-state-error
{
padding: 4px;
}
.ui-form .ui-state-error p
{
font-weight:bold;
padding-top: 5px;
}
.ui-form .ui-state-error .ui-icon
{
margin: 5px 3px 0 4px;
}
Hasilnya bisa dilihat di http://aris.proweb.asia/warning.html .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.