Mungkin anda pernah melihat fasilitas search dalam suatu website, yang mana ketika kita klik box search tersebut maka tulisan search yang ada di dalamnya hilang, dan ketika kita tidak mengklik box tersebut maka tulisan search tersebut akan ada kembali, contohnya seperti di sini.
Variasi fitur tersebut sangat sederhana namun dapat mempercantik tampilan website kita dan mempermudah user dalam mencaari suatu kata yang terdapat di website anda. Bagaimana membuatnya? mari kita mulai membuat variasi search tersebut.
Untuk mengawali tutorial ini, saya menganggap anda sudah sedikit tau tentang jquery, dan pada proses di bawah nanti saya akan membagi dalam 2 bagian, yaitu : bagian HTML, dan jQuery. Mari kita Mulai..
Buat file html dengan nama search.html, isikan file tersebut dengan format tag html standard :
<html>
<head>
</head>
<body>
</body>
</html>
Bagian pertama mari kita buat htmlnya (pada blok body) :
<body>
<div id=”search”>
<input type=”text” name=”search” value=”Search….” />
</div><!– end of search –>
</body>
Setelah kita membuat HTMLnya, selanjutnya kita akan buat jQuerynya :
<head>
<script type=”text/javascript” language=”javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#search input”).click(function(){ $(this).val(”); });
$(“#search input”).blur(function(){
var value = $(this).val();
if(value == ”){
$(this).val(‘Search….’);
}
});
});
</script>
</head>
Silahkan Save dan coba jalankan dibrowser anda, jangan lupa untuk menaruh file jquery-1.4.2.js bersama dengan file html di dalam satu folder.
Selamat Mencoba.. 😀
Kunjungi www.proweb.co.id untuk menambah wawasan anda.