Jquery Mobile 1.0 yayınlandı

Bir yıl civarı süren yenilemelerden sonra Jquery Mobile 1.o sürümünün yayınlandığı duyuruldu. Bütün popüler mobil platforomları desteklemeyi amaçlayan jquery mobile framework sistemi artık 1.0 sürümüyle sunuldu. Her ne kadar mobil platformda yazılım geliştirmesem de bu alanda yazılım geliştirenler için önemli bir haber olduğu için günlüğüme eklemek istedim. Duyuruda yazdığına göre bu framework jquery 1.6.4 sürümünü gerektiriyor. Jquery 1.7 sürümünü ise jquery mobile 1.1 sürümünde destekleyecekleri belirtilmiş. Duyuruda önceki sürüme göre performans artışları ve hangi mobil platformların ne derecede desteklendiği de listelenmiş. Ayrıntılar için şu adrese bakabilirsiniz: http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/

Jquery ile öğelerin yüksekliklerini eşitleme

Basit bir yöntemle herhangi bir seçiciye ait tüm öğelerin yüksekliklerini şu şekilde eşitleyebilirsiniz:

[js]
var max_h=0;
$('.my_class').each(function(){
var h = $(this).height();
if(h>max_h)
max_h=h;
}).height(max_h);
[/js]

Benzer şekilde height yerine width kullanarak genişlikleri de eşitleyebilirsiniz.

Jquery ile ajax kullanımı (ajax jquery)

Güzel bir pazar gününde daha önce yazmayı düşündüğüm jquery ile ajax kullanımı hakkındaki yazıma başlıyorum. Jquery 'nin ajax kullanımını kolaylaştırdığından başka bir yazımda bahsetmiştim. İlk olarak temel ajax işlevini inceleyelim:
[js]
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
[/js]
Bu işlevde ajax için bazı parametreler kullanıyoruz. type değeri yapılacak isteğin türünü (POST yada GET), url değeri çağrı yapılacak adresi, data ise gönderilen parametreleri url biçiminde kodlanmış olarak içerir. success değişkeni ise ajax çağrısının başarıyla sonlanmasının ardından yapılacak işlemleri içeren bir işlev tanımıdır. Bunun için ya function ile yeni işlev tanımlaması yaparız yada daha önce tanımladığımız bir işlevin adını kullanabiliriz.

Jquery 'deki Ajax işlevlerini listelersek:
[js]
$.ajax(options)$.get(url, data, callback)
$.getScript(url, callback)
$.getJSON(url, data, callback)
$.post(url, data, callback, type)
load(url, data, callback)
[/js]
Gördüğünüz gibi bu işlevler genel olarak url, data ve callback parametreleriyle kullanılmaktadır. Elbette bu işlevler arasında bazı farklılıklar vardır. Herbirinin amacını kısaca özetlemek gerekirse:

ajax işlevi en temel olanıdır. Kullanım örneğini yukarıda görmüştük. Bu işlevin avantajı daha detaylı ayarlar yapabilmenizdir ve ajax çağrısıyla ilgili daha fazla olaya ait callback işlevi tanımlayabilmenizdir. Devam etmeden önce ajax olaylarını listelemek istiyorum:
[js]
ajaxComplete(callback) // ajax çağrısının tamamlanmasının ardından yapılacaklar için
ajaxError(callback) // hata oluşması durumunda yapılacaklar için
ajaxSend(callback) // ajax ile veri göndermeden önce yapılacaklar için
ajaxStart(callback) // ajax çağrısı başladıktan sonra yapılacaklar için
ajaxStop(callback) // ajax çağrısı bittikten sonra yapılacaklar için
ajaxSuccess(callback) // ajax çağrısının başarıyla tamamlanmasının ardından yapılacaklar için
[/js]
ajax() işlevi dışındaki işlevler için sadece ajaxComplete olayı kullanılır ki bu çoğu zaman yeterlidir.

$.get(url, data, callback) işlevi en basit ajax işlevlerinden biridir. Parametre olarak çağrının yapılacağı url, gönderilecek veri, ve çağrının tamamlanmasıyla yapılacak işlev tanımlaması kullanılır.

$.getScript(url, callback) işlevi ise aynı get işlevi gibidir ancak bu işlevin amacı ajax çağrısı ile elde edilen javascript kodunu çalıştırmaktır.

$.getJSON(url, data, callback) işlevi de get işlevi gibidir. Tek farkı gelen ajax çağrısı ile gelen sonucu metin olarak değil JSON verisi olarak almasıdır. Bu işlevin kullanımının bir üstünlüğü vardır. Eğer tek bir ajax çağrısıyla birden fazla veri elde etmek istiyorsanız (ör: sayfanın farklı yerlerinde kullanmak için) $.getJSON işlevini kullanabilirsiniz. Hatta sunucudan dönen json verisi içinde elde etmek istediğiniz veri haricinde işlemin başarı durumunu belirten bir değer, hata olması durumunda ziyaretçiye verilecek mesaj, en son işlem zamanı gibi ekstra veriler ekleyerek gelen verinin farklı şekillerde kullanılmasını sağlayabilirsiniz. Sunucu tarafında tek yapmanız gereken sonucu json olarak dönmek. Bunun için göndermek istediğiniz verileri bir dizi içine ekleyerek (associated array) bunu json_encode işlevi ile json biçimine çevirip echo ile çıktı vermeniz yeterlidir.

$.post(url, data, callback, type) işlevinin özelliği ise aktarım yöntemi olarak POST kullanması ve dönen verinin callback işlevine ne şekilde aktarılacağını (ör: json, xml) belirleme imkanınızın olmasıdır. Bunu bir örnekle açıklamak istiyorum:

Örneğimiz için sunucu tarafında basit bir json çıktısı kullanalım:
[php]
echo json_encode(array("name"=>"John","time"=>"2pm"));
[/php]
Bu çıktıyı elde edip kullanacağımız ajax çağrımız şu şekilde olabilir:
[js]
$.post("test.php",{ func: "getNameAndTime" }, function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
[/js]
Bu çağrı ile test.php işlevine POST yöntemiyle istekte bulunuyoruz (bu örnekte gönderilen veri olarak sunucuda çalıştırılacak işlevin adını verdik ) ve 4. parametremizde belirttiğimiz üzere sonucun json olarak değerlendirilmesini sağlıyoruz. Bu şekilde gelen veriyi herhangi bir işleme gerek kalmadan doğrudan callback işlevinde kullanabiliyoruz.

load(url, data, callback) işlevi ise diğerlerine göre özel bir uygulama amacıyla kullanılmaktadır. En başta $ işaretinin olmadığına dikkat edin. Bunun nedeni bunun doğrudan çalıştırılan değil bir seçici ile elde jquery nesnesi üzerinde uygulanmasıdır. İşlevin amacı basitçe ajax çağrısı yaparak gelen sonucu sayfanızdaki bir öğeye aktarmaktır.
[js]
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
[/js]
Ajax çıktısının feeds idsine sahip öğeye aktarıldığına dikkat edin.

Jquery ile ajax kullanımını özetlemeye çalıştım. Ajax kullanımı için birçok uygulama alanı bulabilirsiniz. İhtiyacınıza göre yukarıda işlevlerden size uygun olanını seçmeniz işlemlerinizde kolaylık sağlayacaktır.

Listedeki bir öğeyi taşıma

Web uygulamalarında liste oluştururken bazen sıralama yapma gereği duyabilirsiniz. Aşağıda bunun için yaptığım basit bir örnek bulabilirsiniz. liste_tasi işlevinde ilk parametre taşıma işlemi için tıklanan öğenin kendisini (this ile nesne aktarımı), ikinci parametre ise taşımanın yönünü belirtir. Yön değeri olarak 1 aşağı taşımak, -1 yukarı taşımak için kullanılıyor. (Bu parametrenin liste öğesinin sıra değerine yapılacak eklemeyi belirttiğini düşünebilirsiniz. Sıralama yukarıdan aşağıya doğru artan yöndedir.)

[html]
<ul>
<li pid="2">Program 2 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
<li pid="1">Program 1 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
</ul>
[/html]

 

[js]
function liste_tasi(t,dir){
var $mevcut = $(t).parent();
var $mevcut_icerik = $mevcut.get();
$mevcut_icerik = $mevcut_icerik[0];

if(dir==-1){
var $diger=$(t).parent().prev("li");
if($diger.length==1){
$mevcut.remove();
$diger.before($mevcut_icerik);
}
}
else{
var $diger=$(t).parent().next("li");
if($diger.length==1){
$mevcut.remove();
$diger.after($mevcut_icerik);
}
}
}
[/js]

Jquery ile sekmeler oluşturmak

Birçok web sayfasında sayfa yenilenmeden geçiş yapılan sekmeler görmüşsünüzdür. Bunlar basitçe javascript ile yapılabilir. Bu yazımda size jquery ile basit bir şekilde nasıl sekmeler oluşturabileceğinizi bir örnekle göstereceğim. Aslında sekmeler aynı sayfada bulunan ancak biri görünür olduğunda diğerleri gizli hale getirilen sayfa öğelerinden ibarettir. Yani örnek olarak bir sayfada ardarda oluşturduğunuz div öğelerinden birini gösterip diğerlerini gizleyerek ve bu işlemi sekme başlıklarının tıklanmasıyla tetikleyerek basit bir sekme sistemi oluşturmuş olursunuz.

İlk önce sekmeler için kullanacağımız css sınıflarını, sekme başlıklarını ve sekme içeriklerini oluşturalım:
[xml]
<style type="text/css">
.sekme_baslik{border:2px solid gray;cursor:pointer;}
.aktif_sekme_baslik{border:2px solid red;}
.sekme_icerik{border:1px dashed gray;}
</style>
<div>
<span id="sekme_1">Sekme 1</span>
<span id="sekme_2">Sekme 2</span>
<span id="sekme_3">Sekme 3</span>
</div>

<div id="sekme_1_icerik">
Sekme 1 içeriği
</div>
<div id="sekme_2_icerik" style="display:none;">
Sekme 2 içeriği
</div>
<div id="sekme_3_icerik" style="display:none;">
Sekme 3 içeriği
</div>
[/xml]



İlk sekme içeriği haricindeki sekme içeriklerinin gizlendiğine dikkat edin. Şimdi de sekmeleri aktif hale getirecek javascript kodumuzu yazalım:
[js]
$(function(){
$(".sekme_baslik").click(function(){
// önce seçilen sekme dışındaki tüm sekme başlıklarından aktif_sekme_baslik sınıfını kaldırıyoruz
$(".sekme_baslik").not($(this)).removeClass("aktif_sekme_baslik");
// seçilen sekme başlığına aktif_sekme_baslik sınıfını ekleyelim
$(this).addClass("aktif_sekme_baslik");
// seçilen sekme başlığının id değerini alıp bu değere "_icerik" ilave ederek içerik div öğesinin idsini bulalım
var icerik_id = $(this).attr("id") + "_icerik";
// içerik sekmemizi nesne olarak kaydedelim
var $sekme = $("#"+icerik_id);
// şimdi de göstermek istediğimiz sekme dışındaki sekmeleri gizleyelim
$(".sekme_icerik").not($sekme).hide();
// ve son olarak göstermek istediğimiz seçilen sekmeyi gösterelim:
$sekme.show();
});
});
[/js]



Bu basit bir sekme örneğiydi. Elbette Sekme başlıkları ve içerik için istediğiniz gibi css biçimlendirmesi uygulayarak sekmelerin daha gerçekçi görünmesini sağlayabilirsiniz.

jquery.ui.dialog eklentisini kullanarak pencere içinde resim göstermek

Eğer jquery.ui hakkında bilginiz varsa muhtemelen ui.dialog eklentisini duymuşsunuzdur. Bu eklenti sayfanızda sürüklenebilir ve boyutlandırılabilir pencereler oluşturmanızı sağlar. Ancak bu eklentiyi kullanırken içeriğe göre pencerenin boyutunu önceden belirlemeniz ve eklentiye aktarmanız gerekiyor. Geçenlerde dialog eklentisiyle boyutu belli olmayan bir resmi göstermek üzere bir çalışma yaptım ve paylaşmak istedim. Aşağıdaki işlevlerden newid() işlevi sayfada benzersiz id değeri oluşturan basit bir işlev. Takip eden pageWidth ve pageHeight işlevleri de (internetten buldum) sayfanın görünür boyutunu almak için kullandığım işlevler. newWindow işlevi ise daha sonra oluşturacağımız pencere için yeni bir div oluşturup ona ait seçici ifadesini dönüyor. showImageWindow işlevi de parametre olarak aldığı dosya adını ve başlık değerini kullanarak yeni bir pencere oluşturuyor ve pencerenin boyutlarını resim ekrana sığacak şekilde küçültmek üzere boyut oranını koruyarak img imindeki width yada height değerlerini ayarlıyor. Bu yöntemle genel lightbox eklentilerinin aksine aynı anda birden fazla resim penceresi gösterilebiliyor.

var uid=0;

function newid (){ return ++uid;}

function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
    return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function newWindow(title){
    var id;
    var t;
    t='';
    if(title!=undefined){
        t=' title="'+title+'" ';
    }
    id = 'dialog_'+newid();
    $('body').append('<div id="'+id+'" '+t+'class="flora"></div>');
    return '#'+id;
}

function showImageWindow(file,title){
    $imgWindow = $(newWindow(title));
    img = new Image();
    img.src=file;
    img.onload=function(){
        w = img.width;
        h = img.height;
        r = w/h;
        pagew = pageWidth();
        pageh = pageHeight();
        attr =null;
        val ='';
        if(w>(pagew-20)){
            w=pagew-20;
            h = w/r;
            attr ="width";
            val = w;
        }
        if(h>(pageh-50)){
            h=pageh-50;
            w=h*r;
            attr ="height";
            val = h;
        }
        $imgWindow.hide().html(" <img src='"+file+"' /> ");
        $imgWindow.find("img[src='"+file+"']").click(function(){
            $imgWindow.dialog("destroy");
        });
        if(attr!=null){
            $imgWindow.find("img[src='"+file+"']").attr(attr,val);
        }
        $imgWindow.show().dialog(
        {
            width:parseInt(w)+20,
            height:parseInt(h)+50,
            modal: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        });
        $(".ui-dialog-titlebar-close").blur();
    };
}

Live Query eklentisi

Bu yazıda size faydalı bir jquery eklentisi olan Live Query 'den bahsetmek istiyorum. Kısaca açıklamak gerekirse Livequery jquery 'de kullanılan seçicileri dinamik hale getirir. Jquery'de bir seçici ile sayfanın DOM (document object model) kapsamındaki bir yada daha fazla öğesini seçtiğinizde bu öğelerin o anda mevcut olması gerekir. Ancak livequery bu zorunluluğu ortadan kaldırır. Livequery ile yapılan seçme işlemi sayfaya sonradan eklenen öğeleri de kapsar. Örneğin sayfanıza ajax ile içerik eklediğinizde bu içerikteki öğeler daha önce kullandığınız seçicilere uysa bile artık iş işten geçmiştir çünkü siz sayfanızdaki nesneleri seçtiğinizde yeni eklenen içerik yoktu. Ancak bu seçme işlemini livequery ile yaparsanız daha sonra eklenen içerikteki uygun öğeler de bu seçime dahil olacaktır. Örneğin aşağıdaki kodu kullanarak sayfanıza daha sonradan eklenecek olan bağlantıların da tıklandığında uyarı vermesini sağlayabilirsiniz:

$('a').livequery('click', function(event){
    alert('tıklandı');
    return false;
});

Ayrıca livequery ile seçicinize uyan bir nesne eklendiğinde ve kaldırıldığında çalışmak üzere işlevler tanımlayabilirsiniz:

$('li').livequery(function(){
        // yeni öğe eklendiğinde çalışacak olan işlev:
        $(this)
        .hover(function(){
            $(this).addClass('hover');
        },function(){
            $(this).removeClass('hover');
        });
    },
    function() {
        // öğe kaldırıldığında çalışacak olan işlev:
        $(this)
        .unbind('mouseover')
        .unbind('mouseout');
    }
);

JQuery Javascript kütüphanesi hakkında

Jquery basitçe John Resig tarafından geliştirilmeye başlanmış ve bugüne kadar birçok kişi tarafından eklentisi yazılmış olan kullanımı kolay bir javascript kütüphanesi olarak tanımlanabilir. Jquery.com anasayfasında basit bir örnek var ve bu örnek çok kısa bir javascript koduyla nasıl ilginç ve faydalı şeyler yapabileceğinizi göstermek üzere yazılmış uygulamalı bir tanıtım kodu. Jquery ile belgenizdeki herhangi bir öğeye erişmek için fazla çaba sarfetmenize gerek yok. Kolayca herhangi bir öğeye erişebilir, içeriğini değiştirebilir, css özelliklerini değiştirebilir, animasyon uygulayabilirsiniz. Bunun yanında çok faydalı bir kullanım alanı da ajax uygulamaları geliştirmek. Kütüphanenin son sürümünün (v1.2.3) boyutu yaklaşık 100 kb ama paketlenmiş hali 30kb yani birçok web sitesinde bulunan resim dosyaları kadar. Bu yüzden verimli bir şekilde kullanılabiliyor.

Jquery, yapısı gereği eklenti yazmaya çok uygun. Jquery için yazılmış eklentileri sitesindeki plugins bölümünde bulabilirsiniz. Aklınıza gelebilecek her türlü ihtiyaç için eklentiler yazılmış. Jquery ifadeleri klasik yapısal programlama ifadelerinden biraz farklı bir yapıya sahip. Herşeyden önce ihtiyacınız olan işlemleri yapmak için farklı ifadeler kullanmak yerine zincirleme bir işlemler dizisi kullanabilirsiniz. Çünkü herhangi bir işleve yapılan çağrı yine bir jquery nesnesi döndürüyor ve bu sayede üzerinde tekrar tekrar işlem yapabileceğiniz zincirleme ifadeler oluşturabilirsiniz. Jquery.com da yer alan örnek ifadeye bir göz atalım:

$("p.surprise").addClass("ohmy").show("slow");

Burada ilk dikkatinizi çeken $ işareti aslında jquery nesnesini oluşturan temel işlevin adı. Bazı kaynaklarda bunun yerine jquery() kullanıldığını görebilirsiniz. $ şeklindeki kullanımın işleri kolaylaştırmak için sonradan eklendiğini tahmin ediyorum.

Parametre olarak verilen "p.surprise" ise bir seçici sözcesi. Yeri gelmişken, jquery 'deki query kelimesi Türkçe'de sorgu anlamına geldiğini söylemeliyim. Jquery ile sanki bir veritabanında sorgulama yapıyormuş gibi sayfanızın tamamında yada herhangi bir bölümünde istediğiniz koşullara uyan öğelere erişebilirsiniz. Bu sizi şaşırtmasın çünkü jquery ile sadece sayfanızdaki herhangi bir öğeye değil aslında bir eşlemeye uyan tüm öğelere erişirsiniz. Yani jquery içsel bir döngüyle çalışır. Hatta each işlevi ile bu sorgudan dönen sonuçlar üzerinde bir döngü kurabilir ve her öğe üzerinde işlem yapabilirsiniz.

Örneği açıklamaya devam edelim. İfademizin ilk kısmı olan $("p.surprise") ile surprise sınıfıyla tanımlanmış tüm p imlerine yani tüm paragraf öğelerine erişiyoruz. Yani bu ifade ile sayfamızda bulunan

<p class="surprise">merhaba jquery</p>

şeklinde bir öğeyi (ve varsa diğerlerini de) elde ederiz. Zincirin ikinci kısmı olan .addClass("ohmy") ile bu öğeye ohmy sınıfını ekliyoruz. Paragrafımızın yeni hali şöyle oluyor:

<p class="surprise ohmy">merhaba jquery</p>

İfademiz, zincirimizin son parçası olan .show("slow") ile tamamlanıyor. Burada paragraf öğemizi bir efekt kullanarak görünür kılıyoruz ve hızını da parametre olarak verdiğimiz değerle ayarlıyoruz. Bu değer örnekteki gibi öntanımlı sabitlerden biri de olabilir (slow,normal,fast) ms cinsinden zaman da olabilir. Ayrıca jquery ile kendi animasyonlarınızı da oluşturabilirsiniz. Sayısal olarak arttırılabilir değerlerden oluşan iki grup css sınıfı arasında belirli bir zaman içinde geçiş yaparak istediğiniz animasyonları oluşturabilirsiniz.

Yazımın sonunda ilgilenenler için çok faydalı olacağını düşündüğüm görsel bir jquery rehberi sitesinin adresini vermek istiyorum. Visualjquery.com adresinde jquery kütüphanesinin işlevlerini kategorilere ayrılmış olarak listeleyen ve örneklerle açıklayan bir rehber bulabilirsiniz. Sitenin kendisinin jquery ile oluşturulduğunu belirtmeme gerek yoktur sanırım.