Archive for jquery

jQuery ile animasyonlu buton örneği

August 7, 2010 jquery No comments

jQuery gün geçtikçe daha çok kullanılmaya başlıyor. Çünkü az kodla çok büyük işler yapmamızı sağlıyor. Ayrıca sitede flash kullanmadan görselliği arttırabilmemize olanak sağlıyor. Şimdi bunlardan bir tanesini yapacağız. Başlamadan önce yapacağımız örneğin demosuna buradan bakabilirsiniz veya kaynak kodları buradan indirebilirsiniz.

Her zaman olduğu gibi önce HTML kısmını yazıyoruz. index.html
Read more

jQuery ile dropdown menü yapımı

August 4, 2010 jquery No comments

jQuery ile basit ve bir dropdown menü yapacağız. Önce menümüzün HTML kısmını inceleyelim.

<ul id="dropdown">
    <li><a href="#">anasayfa</a></li>
    <li>
        <a href="#">servisler</a>
        <ul>
            <li><a href="#">html</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">javascript</a></li>
        </ul>
    </li>
    <li><a href="#">iletişim</a></li>
</ul>

Read more

jQuery ile Birkaç Basit Örnek

September 8, 2009 jquery No comments

Burada yapacağımız örneklerin demosunu şuradan inceleyebilir, kaynak kodlarını da şuradan indirebilirsiniz.

jQuery bilinen en popüler Javascript kütüphanelerinden biridir. Javascripti daha zevkli bir hale getirdiğini rahatça söyleyebiliriz. jQuery öğrenmek isteyenler için burada ufak tefek örnekler yapacağız. Javascript kodlarını <script> taglarının arasına yazıyoruz.

<script type="text/javascript">
    //javascript kodları buraya
</script>

Önce jquery kütüphanesini şuradan indirip sayfamızda şu şekilde çağırıyoruz.

<script type="text/javascript" src="jquery-1.3.2.min.js"></scritpt>

Ardından jquery kodlarını da $(document).ready fonksiyonu içine yazıyoruz.
Read more

jQuery ile Tooltip eklentisi yapalım

July 6, 2009 jquery 3 comments

Uzun zamandır jQuery ile alakalı yazı yazmak istiyordum. Zaman bulamadığım için bir türlü yazamamıştım. Şimdi bunu telafi etmek için güzel bir uygulama yapacağız.
Yapacağımız uygulama, herhangi bir linkin üzerine gelince çıkan bilgilendirme mesajlarından (tooltip) yapmak.

Bu uygulamayı yapmak için temel HTML/CSS ve Javascript bilginizin olması sizin için daha olur.
Kullanacağımız tooltipleri 2 şekilde yapacağız.

  1. İçerik bir div olacak. İçerisine resim link gibi elemanlar eklenebilecek.
  2. Tooltip’in içeriği linkin veya alt değeri olacak. Yani sadece metin olabilir.

    Birinci Uygulama

    Tooltip bir div bölmesi olacak ve bu bölmenin z-index değeri farklı olduğundan diğer elemanların üzerinde gibi duracak. Fakat bunun için position değerinin absolute olması lazım.
    Önce HTML kısmını yapalım.

    Read more