Tag Archive: jQuery


jQuery için sIFR eklentisi

sIFR, sayfalarımızda göze hitap etme fonksiyonunun yanında Arama motorları tarafından indekslenebilme özelliği ile bir anda tasarım dünyasının göz bebeği konumuna geldi. 1-2 dezavantajı bulunmasına rağmen hala çok etkili bir rakip üretilemedi ve flir, typeface.js gibi rakipleri karşısında üstünlüğü elinde tutuyor. Bu kadar yararlı bir araçtan maksimum performans olmak isteyenler için Jonathan Neal tarafından bir jQuery eklentisi geliştirilmiş. bu eklenti sayesinde jQuery fonksiyonlarını sIFR tekniği ile birlikte kullanarak maksimum verim elde edilebilmesi sağlanmış.

İstenilen yere sIFR uygulatma ve sIFR’li yazıyı silme, zoom yapma, yazı renginde kod değiştirmeksizin oynamalar yapma ve sayamayacağım birçok özellik bu eklenti ile birlikte jQuery kullanıcılarının hizmetine sunulmuş.

Demosunu incelemek ve denemek istiyorsanız jQuery Sifr Plugin sayfasına alalım sizi.

RSS Reader’ımda tasarım dünyasındaki son gelişmeleri takip ederken Enhance blogunda tanıtımı yapılan Pulse eklentisini gördüm. jQuery‘nin bir eklentisi olan pulse sayesinde, sadece “animated gif” dosyaları ile yapabileceğimiz ve statik olarak kullanabileceğimiz yanıp sönen yazıları, resimleri ve kutuları oluşturabilmemiz mümkün. Uyarı durumlarında çok yararlı olan bu yanar-sönerli eklenti James Padolsey tarafından geliştirilmiş. Eğer bu tarz bir eklentiye ihtiyacınız varsa ilgili makaleyi incelemenizi öneririm. Pulse eklentisi sadece 6KB yer kaplıyor ve jQuery’e ihtiyaç duyuyor.

Pulse’un renk değişimi yapabildiği css elemanları:

  • color
  • border-color
  • background-color
  • opacity

CSS-Tricks’den jQuery dersleri

Web Tasarımı hakkında bir çok ipucu ve rehberi yayınlayan CSS-Tricks son zamanlarda Screencast’leri ile bizi oyalamakta. Bu screencast’lerden bence en iyileri ise jQuery’nin uygulamalı ve detaylıca anlatıldığı Video1 ve Video2. jQuery öğrenmek isteyenler bu fırsatı kaçırmasınlar derim…

Kayan Reklam

Sık sık karşılaştığımız bir yöntem olan, genellikle sayfanın sol kısmında yer alır bu reklamlar. Biz sayfayı aşağı kaydırdıkça reklam da sayfayla birlikte aşağı kayar. Bu kayan içerik reklamın daha çok görünmesini sağlar fakat tüm sayfayı kaplayan tasarımlarda bu reklamı kullanmak imkansızdır. Eğer sayfamızın sol tarafında içerik varsa bunun görünmesini engelleyen kayan reklamları bu yüzden çoğu tasarımcı kullanmaz. İşte tam bu noktada ajax yardımımıza koşuyor. Ajax ile bu reklamları sol tarafta içerik olmadığı zaman gösterilebilecek şekilde ayarlayabiliyoruz. Örnek 1 ve Örnek 2‘ye bakarak görünümlerine bakabilirsiniz. Webresourcesdepot’da yayınlanan kaynak kodlara ise buradan ulaşabilirsiniz.

Javascript kütüphanelerinin ilk popüler olduğu günlerde kendimiz çalışıp didinip bunlara uyan kodlar yazmaya çalışırdık. Ama aradan uzun bir süre geçti ve bir hayli gelişen kütüphaneleri kullanan birçok site ortaya çıktı. Hal böyle olunca herkes kütüphaneleri kullanarak siteleri için kullanışlı kodların peşine düştü. Şuradan ulaşabileceğiniz blog da en kullanışlı 10 tane jQuery eklentisini sıralamış.

  1. jQuery UI
  2. Markitup: istediğiniz textarea’yı html editöre çevirebilecek bir js eklentisi
  3. jQuery cookie plugin : cookie’ler üzerinde işlem yapabileceğiniz bir eklenti
  4. lightbox
  5. jquery corner plugin: yuvarlak köşeler yaratmak için gerekli bir eklenti
  6. jtip : basit bir tooltip eklentisi
  7. lavalamp : kayma efekti veren bir eklenti
  8. superfish : jQuery animasyonlarını kullanan bir menü eklentisi
  9. easing : jQuery animasyonlarını basitçe kullanabileceğiniz bir eklenti
  10. jcarousel :  dönen menüleri yapabileceğimiz bir eklenti.

Türkçeleştirdiğim yazıya buradan ulaşabilirsiniz.

Ajax hayatımıza girdiğinden beri tasarımlarımız daha dinamik ve göz kamaştırıcı olmaya başladı. Birçok sitede göreceğiniz örnekler ile skalası genişleyen ajax uygulamalarından popüler olan 30 tanesini buradan inceleyebilirsiniz.

Siz de benim gibi jQuery’nin nimetleriyle yeni tanışanlardan iseniz kesinlikle aşağıda sıralayacağım kaynaklara göz atmalısınız. Yeni başlayanlar için oldukça doyurucu bilgiye sahip olan kaynaklar jQuery hakkındaki bilgilerinizi katlayacak.

1kb’lık kayan menu

Geçtiğimiz günlerde 1kb’lık akordiyon menu haberiyle karşılaşmış ve hiçbir javascript kütüphanesi kullanmadığımızdan dolayı çok küçük bir kod bloğuyla bunu halledebildiğimizi belirtmiştik. Bu kodun kaynağı olan Leigeber blog‘unda bu sefer de 1 KB’lık kayan menu yapımı yayınlanmış. Kodu download etmeden önce ilgili yazıya bakarsanız daha bilgi verici olabilir.

Özellikleri:

  • kendi tasarımınızı uygulayabilirsiniz.
  • 2 farklı hover seçeneği
  • javascript kütüphanesi kullanmaması

Son günlerde isimlerine iyice aşina olduğumuz javascript kütüphaneleri jQuery, prototype ve mootools ile yapabileceklerimiz oldukça fazla. Sitemize daha iyi bir görüntü ve işlevsellik veren bu kütüphaneleri kullanarak yapılmış en iyi site bileşenlerini Devkick listelemiş. Kullanım alanlarına göre kategorilendirilmiş en iyi bileşenlere buradan bakabilmeniz mümkün.

1KB’lik akordiyon Menu

Çoğu zaman framework kullandığımızdan dolayı sayfalarımızın içeriği artar ve bandwith’imizi daha çok kullanıp daha çok para veririz. Bunları yaşamak istemeyen site sahipleri devamlı daha kısa ve daha komplike kodlar üretmek için çalışır. İşte bu seferki örnek de bunun eseri.

Hiçbir framework gerektirmeyen buradaki akordiyon menu hem kullanım kolaylığı hem de çok küçük boyutlu olması sebebiyle oldukça kullanışlı.

<body onload="slideMenu.build('sm',200,10,10,1)">

Bu şekilde kullanımla başlayan kodun ayrıca ufak bir javascript dosyası var.
Buradan ayrıntılı bilgiyi alabilirsiniz.

Kaynak: webresourcesdepot