kayaknya kalo biasa2 aja jelek deh tapi gak gitu juga sih
nah aku punya script sederhana ni buat bikin search box agak bagus dikit
pertama2
download jquery plugins di sini
nah setlah itu buat file html
dah tuliskan kode berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
var searchLabel = $('#search label').remove().text();
$('#search-text').addClass('css').val(searchLabel)
.focus(function() { // pada saat onFocus di input field ini maka css di remove
if (this.value == searchLabel) {
$(this).removeClass('css');
$(this).addClass('css2').val('');
};
}).blur(function() {
if (this.value == '') {// pada saat onBlur di input field ini maka css di add
$(this).removeClass('css2');
$(this).addClass('css').val(searchLabel);
};
});
});
// remove value input type search text
$('#search').submit(function() {
if ($('#search-text').val() == searchLabel) {
$('#search-text').val('');
}
});
</script>
<style type="text/css">
<!--
.css {
color: #CCCCCC;
height: 13px;
width: 200px;
font-size: 11px;
}
.css2 {
height: 13px;
width: 200px;
font-size: 11px;
background-color: #66CCFF;
border: 1px solid #6699FF;
}}
-->
</style>
</head>
<body>
<table width="302" border="0" align="center">
<tr>
<td><form id="search" action="search/index.php" method="get">
<label for="search-text">search this sites</label>
<div align="right">
<input type="text" name="search-text" id="search-text" />
<input type="submit" name="Submit" value="Submit" />
</div>
</form></td>
</tr>
</table>
</body>
</html>
this output :
| <><> |
Tidak ada komentar:
Posting Komentar