KATEGORİLER
Bilgisayar
Bilgisayar Dersleri
Windows
Windows Dersleri
Donanım
Donanım Dersleri
MS Office
Microsoft Office Dersleri
İnternet
İnternet Eğitim Dersleri
Network
Network Dersleri
Domain - Hosting
Domain Dersleri - Hosting Dersleri
Linux
Linux Dersleri
Unix
Unix Dersleri
Oracle
Oracle Dersleri
MS-SQL
MS-SQL Dersleri
MySQL
MySQL Dersleri
ASP
ASP Dersleri
ASP.net
ASP.net Dersleri
PHP
PHP Dersleri
Diğer Kategorilerimiz
Tümünü Görüntüle
JQuery ile Açılır Arama Paneli Nasıl yapılır.
JQuery ile Açılır Arama Paneli Nasıl yapılır.
Arama panelleri bir sitenin olmazsa olmazlarındandır. Bu makale ile arama panelimizi qjuery ile daha şık bir hale getirmeye çalışacağız. Amacımız arama panelimizi kayarak açılır kapanır hale getirmek. Bunun için öncelikle arama panelimizi tasarlayacağız.
Projemiz için öncelikle 3 adet image ve css kullanarak basit bir arama paneli tasarladık. Burada dikkat etmemiz gereken nokta jquery nin panelimiz ve paneli kaydıracak olan butonu tanıması için gerekli Id’leri kullanmak. <div id="top-search"> tanımlaması ile arama panelimizi id="searchtoggle" tanımlaması ile paneli kaydıracak butonu gösteriyoruz.
Panelimizin html kodu :
<div id="wrapper">
<div id="header">
<div id="top-search">
<a href="#" id="searchtoggle" title="Aramak İstediğiniz Kelimeyi Yazınız">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>
Sayfamızda daha kullanışlı olması için tüm styleları bir css dosyasında topladık
Sayfamızda kullandığımız 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 asıl işi yapan javascript kodumuz:
jquery ile bu fonksiyonu kullanıp panelin kaymasını sağlıyoruz. Burada kayma efekt süresini 300 olarak ayarladık. Daha yavaş bir efekt için bu süreyi arttırabiliriz.
<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üşü:
Projenin demosuna buradan ulaşabilirsiniz.
Projenin Kaynak kodlarını buradan indirebilirsiniz.
Ders Sahibi;Bilgisayar Dershanesi