Üye Kayıt Üye Giriş

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üşü:

JQuery ile Açılır Arama Paneli Nasıl yapılır.

Projenin demosuna buradan ulaşabilirsiniz.

Projenin Kaynak kodlarını buradan indirebilirsiniz.

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

x