Arama panelleri bir sitenin olmazsa olmazlarindandir. Bu makale ile arama panelimizi qjuery ile daha sik bir hale getirmeye çalisacagiz. Amacimiz arama panelimizi kayarak açilir kapanir hale getirmek. Bunun için öncelikle arama panelimizi tasarlayacagiz.
Projemiz için öncelikle 3 adet image ve css kullanarak basit bir arama paneli tasarladik. Burada dikkat etmemiz gereken nokta jquery nin panelimiz ve paneli kaydiracak olan butonu tanimasi için gerekli Id’leri kullanmak. <div id="top-search"> tanimlamasi ile arama panelimizi id="searchtoggle" tanimlamasi ile paneli kaydiracak butonu gösteriyoruz.
Panelimizin html kodu :
<div id="wrapper">
<div id="header">
<div id="top-search">
<a href="#" id="searchtoggle" title="Aramak Istediginiz Kelimeyi Yaziniz">Ara</a>
<form method="post" action="">
<input type="text" class="box" value="Ara..." name="s"id="s" />
<button class="btn" title="Submit Search">Ara</button>
</form>
</div>
<h1>jQuery Arama Paneli</h1>
</div>
<div id="body">
</div>
</div>
Sayfamizda daha kullanisli olmasi için tüm stylelari bir css dosyasinda topladik
Sayfamizda kullandigimiz css kodu :
#header { # header (
width : 900px ; width: 900px;
height : 100px ; height: 100px;
margin : 0 auto ; margin: 0 auto;
position : relative ; position: relative;
} )
#searchtoggle { # searchtoggle (
background : url ( ../images/toggle.png ) no-repeat left top ;background: üst sol (.. / images / toggle.png) no-repeat url;
position : absolute ; position: absolute;
top : 0px ; top: 0px;
right : 0px ; right: 0px;
width : 21px ; width: 21px;
height : 19px ; height: 19px;
text-indent : -9999px ; text-indent:-9999px;
border : 0 ; border: 0;
} )
#searchtoggle .up { # searchtoggle. up (
background : url ( ../images/toggle.png ) no-repeat right top ;background: repeat right top (.. / images / toggle.png) no-url;
} )
#top-search { # top-arama (
height : 60px ; height: 60px;
width : 325px ; width: 325px;
float : right ; float: right;
position : relative ; position: relative;
} )
#top-search form { # top-Arama formu (
position : absolute ; position: absolute;
top : 0px ; top: 0px;
left : 0px ; left: 0px;
background : url ( ../images/search_top.png ) no-repeat ;background: url (.. / images / search_top.png) no-repeat; url
width : 262px ; width: 262px;
height : 30px ; height: 30px;
padding : 5px 0 0 40px ; padding: 5px 0 0 40px;
display : none ; display: none;
} )
#top-search .box { # top arama. box (
width : 195px ; width: 195px;
background : transparent ; background: transparent;
border : 0 ; border: 0;
margin-left : 5px ; margin-left: 5px;
} )
#top-search .btn { # top arama. btn (
margin-left : 10px ; margin-left: 10px;
width : 35px ; width: 35px;
background : transparent ; background: transparent;
border : 0 ; border: 0;
text-indent : -9999px ; text-indent:-9999px;
cursor : pointer ; cursor: pointer;
} )
Ve asil isi yapan javascript kodumuz:
jquery ile bu fonksiyonu kullanip panelin kaymasini sagliyoruz. Burada kayma efekt süresini 300 olarak ayarladik. Daha yavas bir efekt için bu süreyi arttirabiliriz.
<script type="text/javascript"src="http://www.yazilimmutfagi.com/demo/demo1/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#searchtoggle').click(function() {
$('#top-search form').slideToggle(300, function() {
$('#searchtoggle').toggleClass('up');
});
});
$('#top-search .box').focus(function() {
if ($(this).val() == 'Ara...') $(this).val('');
});
$('#top-search .box').blur(function() {
if ($(this).val() == '') $(this).val('Ara...');
});
});
</script>
Hepsi bu kadar. Formumuzun görünüsü:
Projenin demosuna buradan ulasabilirsiniz.
Projenin Kaynak kodlarini buradan indirebilirsiniz.
Yorumlar
Yorum Gönder