23 Nisan 2014 Çarşamba

jQUERY İle Progress Bar Yapımı

html yapısı

<div class="progress-bar">
    <div class="progressing" data-rate="67"></div>
</div>

iki div açtık. birinci div konteynır  görevi görecek. ikinci div ise progress ilerleyişini sağlayacak. Classı progressing olan div html5 atteibute olan data tagini barındırındırıyor. düzgün çalışması adına doctype html5 uyumlu olduğundna emin olmalısınız. data-rate progress barın ilerlemesini istediğiniz miktarı gösrerir. eğer data-rate içerisine 99 yazarsak 0 dan 99% a kadar ilerleyecektir.
 css yapısı
 .progress-bar {
 width : 100px; 
height: 20 px;
 background: black;
}

.progress-bar .progressing {
  float: left;
  width: 0%;
height: inherit;
background: white;
}

float left yazmamızın sebebi soldan sağa doğru ilerlemesi için. eğer sağdan soşa doğru uzamasını istiyorsanız float right yazabilirsiniz,

jQUERY
$(function(){
    var progress = $("progressing");
    progressing.each(function(){
         var thisData = $(this).data("rate"); // thisData değeri progress barın ilerleyeceği miktar
         $(this).animate({
               width: thisData // genişlik thisData değeri kadar anime olacak
         }, 300, "linear");
    });
});

each fonksiyonu içerisine almamızın sebebi bütün progress barları kendi içinde çalıştırmak içindir



22 Nisan 2014 Salı

Javascript Etkin 'return' Kullanımı

Javascript ile return kullanımını anlatmadan önce 'return' kelimesinin Türkçe karşılığına biraz kafa yormak lazım. Return Türkçeye döndürmek yada çevirmek anlamında karşımıza çıkıyor genelde. Fakat ne yazık ki İngilizcede 'return' gibi çok kullanılan kelimelerin bir iki anlamı yoktur. Örneğin en çok kullanılan kelimelerden 'get' sözcüğünü kullanıldığı yere göre 10 dan fazla şekilde söyleyebiliriz. 'Return' kelimesi de yazılım alanında ki anlamı çalıştırmaktır. Yani siz bir  return true yazdığınızda true olarak döndür değil true olarak çalıştır olur.

Bu ufak ingilizce dersinden sonra asıl konumuz olan etkin return kullanımına geçebiliriz.
if ( num < 10 ) { return 'kucuk'; } else if ( num >= 10 && num < 100 ) { return 'orta'; } else if ( num >= 100 ) { return 'buyuk'; }
 Yukarıda ki kodu çalıştırdığımızda eğer sayı 10dan küçük ise bir sonraki else if bloğuna geçemiyecektir. Yani biz kodumuzu şu şekilde de yazabiliriz:
if ( num < 10 ) { return 'kucuk'; } if ( num >= 10 && num < 100 ) { return 'orta'; } if ( num >= 100 ) { return 'buyuk'; }
Diyelim ki bu şekilde yazdığımızda sayımız 10 dan büyük ve 100den küçük olsun. Bu sefer kod ilk if bloğunu geçecek ve ikinci if bloğunda kalacak. Bu yüzden en son if bloğunu yazmaya hiç gerek kalmadı. Yani kodu şu şekilde tekrar yazabiliriz:
if ( num < 10 ) { return 'kucuk'; } if ( num < 100 ) { return 'orta'; } return 'buyuk';

21 Nisan 2014 Pazartesi