JQuery ile Açilir Arama Paneli Nasil yapilir.

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.

 

Tags:

3 thoughts on “JQuery ile Açilir Arama Paneli Nasil yapilir.

  • $(document).ready(function() {

    Altina

    $("#top-search form").hide(); 

    Ekleyerek sorunumu çözdüm. Tesekkürler yinede. 🙂

  • Öncelikle tesekkürler.

    Kodlari çalismama göre uyguladim, çalisiyor. Fakat sayfayi açtigimda form açik oluyor. Ben, sayfayi açtigimda form kapali olsun, tikladigim zaman açilsin istiyorum. Bunun için nasil bir degisiklik yapmaliyim? 

  • Çok iyi bir proje tesekkürler kendi web sitemde bunu kullanacagim devamini sabirsizlikla bekliyorum 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir