Hafif ve Kolay Bir PHP-AJAX Çatısı

rudyka — Sat, 31 Jan 2009 14:23:00 GMT

PHP ile AJAX tekniğini biraraya getiren birçok kütüphane mevcut ancak birçoğu ya fazla ağır ya da basit bir işi yapmak için oldukça fazla kod yazmayı gerektiriyor. Hiç sizinde içinizden php ile yazdığınız bir fonksiyonu kolayca javascript fonksiyonu olarak kullanmak geçmedi mi? PHPLiveX ile bir hamlede kolayca php fonksiyonlarınızı javascript kodunuzun içerisinde kullanılabilecek hale getirebiliyorsunuz.

Oldukça hafif olan PHPLiveX kütüphanesi sadece bir php sınıfından oluşuyor. Php ile kodladığınız fonksiyonları tek bir satır kod ile birebir aynı isme ve argümanlara sahip javascript kodlarına çevirebiliyorsunuz. İsterseniz 1 argümanda ek olarak giriyorsunuz ve bu argümanda JSON formatında o fonksiyona özel AJAX metodu ayarlarını girebiliyorsunuz. Bunlara örnek olarak önyükleyici (preloader) imajını ve fonksiyondan dönen değerin yazdırılacağı dom elemanı gibi özellikleri verebiliriz.

Tüm bu özelliklere sahip olan PHPLiveX açık kaynak kütüphanesinin web sayfası ve dökümanları türkçe oalrak da sitesinde mevcut. Oldukça sık kullandığım bir php-ajax çatısı olarak php kodlarınıza AJAX özelliği kazandırmanın en kolay yolu diyebilirim.

Bu yazı rudyka tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri

rudyka — Thu, 08 Jan 2009 07:45:00 GMT

jQuery'i ve onun geliştiricilerin hayatını kolaylaştırma yöntemlerini seviyorum. Her ne kadar jQuery'i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery'nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir bağlantı üzerine getirdiğimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani şu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu gelişmiş kütüphane ile neler yapılabileceğini araştırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiği kullanarak oluşturulmuş 3 örneği göstereceğim.

3 ipucunu bir arada indirin

Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.

Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:

Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)

Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.

<a href="http://www.hafif.org" class="tooltip" title="meraklı ol!">ipucu için farenizi buraya sürükleyin</a>

Betiği uygulama üzerinde görün

Örnek 2: Resim Önizleme Galerisi

Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.

<a href="1.jpg" class="preview"><img src='http://www.bildirgec.org/1s.jpg' alt="gallery thumbnail" /></a>

Betiği uygulama üzerinde görün

Örnek 3: URL Önizlemesi İçeren Bağlantılar

Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Betiği uygulama üzerinde görün

3 ipucunu bir arada indirin

Kaynak: CSS Globe

Bu yazı rudyka tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

bildirgec.org - rudyka - beğendikleri

Hafif ve Kolay Bir PHP-AJAX Çatısı

jQuery İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri