jquery ile akıllı liste çözümleri

<ul> veya <ol> bir listeniz vardır uzunca, belki dinamik oluşmuştur, genişliği değişkendir fakat genişliğine göre sayafda sütunlara bölünmesini istiyosunuz. Bu sadece görsel bir durumdur. İşte bu durumda şunu ve bunu kullanabilirsiniz.


Konuyu iredeleyin
http://plugins.jquery.com/project/makeacolumnlists
http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery

jquery09 spotlights at slideshare

NOT DÜŞTÜM

slideshare.net de dokümanları gezerken ana sayfada jquery09 spotlights altında ilgi çekici bir kaç sunu buldum. Birisini de geçen hafta ben eklemiştim. Bir çırpıda jquery deneyimi yaşatan, başlangıç için heveslendiren bir sunuydu. Şöyle göz atın bence. Hatta indirip jquery kullanmasını tavsiye ettiklerinize gönderiverin. Diğer seçilmiş sunular da şu adreste : http://www.slideshare.net/tag/jquery09

Kyle Bradshaw's JQuery Best Practices

View more documents from Hasan Tayyar BESIK.

Bu sununun yazarı :
• Kyle Bradshaw
Front End Web Developer
• Blog - http://somedirection.com
• AIM - kyledbradshaw
• Twitter - @ky

jquery validation eklentisi select elemanı neden i.e.'da hata verir

ÇÖZDÜM-BULDUM

Uzuncadır jquery validation eklentisini kullanırım fakat geçen çok üzücü bir olay yaşadım :)
şöyle ki; hiç yapmadığım bir şey ama dalgınlıklat "select" elemanının "option" larına "value" değerini vermemişim. Bu şekilde de o"option" içindeki metin "value" olarak alınabiliyor zaten. Ama standart olmuyor.


Tam bu sırada yaptığım formu i.e.'da denemek istedim ki select elemanı seçildiğinde veya seçilip başka bir elemana tıklandığında hatayı aldım 
"Nesne gerekli"
sayfayı debug yaptığımda ise kırılan satırın şurası olduğunu gördüm.

case 'select':
var options = $("option:selected", element);
return options.length > 0 && ( element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0);

Sonra fark ettim ki "option" lar için hiç "value" girmemişim.
Hepsi şu şekildeydi:

<option>metin</option> 
<option>metin2</option>

Tabi bunu Jörn düşünmesi gerekliydi. Benim gibi dalgınlar böyle kullanabilir ve buna bir önlem almak gerekirdi.  Neyse olayı erkenden farkedip hemen müdahale ettim.
Gıcıklık olsun diye hala "value" eklemedim onun yerine case içerisine "options[0].attributes['value']" olup olmadığını kotrol edip duruma göre "option" içindeki metni aldım.
ama daha kolay bir yol olarak siz her "option" için bir "value" eklemeyi unutmayın.

jquery işlemlerinde setTimeout kullanmak

NOT DÜŞTÜM

Jquery ile geçiktirme meselesinin çok sorulduğunu farkettim. Şaşırdım. Halbuki javascript ile bir farkı yok ki?
Ancak tabi ki daha düzenli kullanmakta fayda var.
Bu alttaki iki satırı jquery yükledikten hemen sonra çalıştırırsanız elinizde "timeout" diye bir fonksiyon olur. Yaptığı çok özel bir şey yok. Sadece jquery işlemerinizde daha kolay kullanılabilir hale getirilmiş setTimeout fonksiyonundan ibaret.

$.fn.timeout = function(t,f){
 this.each(function(){setTimeout(f,t); }); 
 return this; };

Şöyle üç şekilde kullanımına örnek verdim

js:

$(document).ready(function(){
 
  $("#metin").click(function(){  
   $(this).timeout(1000,function(){
   $("#icmetin").html("1 saniye sonra gelen mesaj");
    $(this).timeout(2000,function(){     
     $("#icmetin").append("
ilk 1 saniyelik ekleyiş ardından 2 saniye sonra gelen gelen mesaj");
    }); 
   })
   .timeout(2000,function(){     
    $("#icmetin").append("
 2 saniye sonra gelen gelen mesaj");
   });
  });
});

html:

<a href="#" id="metin">tikla</a> <div id="icmetin"></div>

şurada çalıştırarak görebilir : http://jsbin.com/ivetu
ve burada da kodları değiştirip deneyebilirsiniz : http://jsbin.com/ivetu/edit

---
Farkettim ki yukarıdaki çok karışık geliyor insanlara. halbuki kullanım kolaylığını göstermek için çeşitli şekillerde örnek vermişdim. Neyse, hasılı, nihayetinde şöyle de kullanabilirsiniz:

Alıntı :

1. $(document).ready(function() {  
2.    window.setTimeout(function() {  
3.      // islem islem islem  
4.    }, 1000);  
5. });  

Jquery Animasyonlarında Dikkat Edilmesi Gereken Önemli Bir Nokta

Bu sabah jquery ile yaşadığım kötü hatıra ile not etme gereği duydum

Sıradan bir menü efekti için mouse linklerin üzerine geldiğinde linklerin sağa doğru animasyonunu sağlayan kod kabaca şu şekilde olabilir.

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).animate({ left: 30 });}, 
  function() { $(this).animate({ left: 0 });});
  });

Görmek için: http://jsbin.com/oyaxe

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/oyaxe/edit

Fakat yukarıdaki örnekde mouse hızlıca linklerin üzerinden bir kaç gez gidip geldiğinde linklerin tüm animasyonu tamamlamak için animasyonları kuyruğa koyar ve mouse artık başka yerde olsa bile önceki hareketinin tetiklediği animasyonlar bir süre devam eder. Bu önemli nokta genellikle atlanıyor. Bunun önüne geçmek için animate() fonksiyonundan hemen önce stop() fonksiyonu kullanılmalı. Şöyle ki:

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).stop().animate({ left: 30 });}, 
  function() { $(this).stop().animate({ left: 0 });});
  });

Görmek için : http://jsbin.com/ayizi/

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/ayizi/edit

Etraflıca bakınmanız için ek bağlantılar:
http://docs.jquery.com/Effects/stop
http://docs.jquery.com/Effects/animate
http://docs.jquery.com/API/1.3/Effects

Kullanıcıya güvenme 1 - Form Submit Butonunu Etkinsizleştir

TAVSİYE EDİYORUM

Çoğu uygulamada görüp hala kendi uygulamalarımda yapmadığım bir durumdur. Bir formda "Submit" tuşuna basıldıysa kullanıcının tekrar tekrar o tuşa basmasını engellemek gerek. tembel olduğum için kısaca tüm formlara bu özelliği şu şekil ekliyorum artık

// <form> bütün form tagleri
$('form').submit(function(){// submit olduğu vakit
        $('input[type=submit]', this).attr('disabled', 'disabled');
});

alternatif radio button

artık radio button kullanmaktan vazgeçtim.
jquery-ui ye iyice alıştım ve artık radio button yerine şu örnekteki seçilebilir şeyleri kullanmaya karar verdim.
hem tasarımı katletmiş olmam hem de kodlaması eğlenceli olur.

jquery 1.3 hız meselesi

http://nettuts.com/tutorials/javascript-ajax/everything-you-need-to-know-about-jquery-13/


hangi framework'ün kullanılması gerektiği konusunda son derece yeterli bi grafik bence.

Ajax Library Api

jquery hergün kendini daha fazla sevdirirken ben de iyice ısındım ona. aramıza bi bağ oldu.
bu bağı kuvvetlendirecek bir metot da jquery kütüphanesini uzak bir sunucudan çağırmak. bu sayede jquery kütüphane dosyasını ordan oraya taşımak zorunda kalmıyorum. hizmeti veren de google olunca hız konusu da sorun olmuyor.

ajax library api - google code sayfası

kullanabilmek için

<script src="http://www.google.com/jsapi"></script>

Diye sayfaya yüklemek gerekiyor. Hepsi bukadar.

(ajax api library ile tanışalı oldu baya ama yeni kullanmaya başladım.)

1. örneğin jquery yüklemek için:

google.load("jquery", "1.3.1"); // ikinci parametre versiyon

farklı şekillerde de yükleyebiliriz (sıkıştırılmış, paketlenmiş gibi). google code sayfasında detaylar mevcut.

google.load("jquery", "1.3.1", {uncompressed:true});

2. jqueryui yüklemek için dahi kullanıyorum :

google.load("jqueryui", "1.5.3");

3. diğer bazı kütüphaneler bile var (mootools, dojo gibi ...) .

google.load("mootools", "1.2.1");

google.load("dojo", "1.2.3"); 

google.load("yui", "2.6.0");

benim en çok kullandığım bir diğer kütüphane de swfobject kütüphanesi... bu da bu hizmet ile yüklenebilmekte!

google.load("swfobject", "2.1");

bu dosyaları "google.load" yerine doğrudan adresleri ile de yükleyebilirsiniz tabi. Hepsi google tarafından barıdırılmakta. Hız sorunu yok yani.

google code sayfasındaki dökümantasyonunda hepsinin adresiler de mevcut!