jQuery ile animasyonlu buton örneği
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ı
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>
jQuery ile Birkaç Basit Örnek
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
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.
- İçerik bir div olacak. İçerisine resim link gibi elemanlar eklenebilecek.
- 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.
