Öncelikle sayaç kodunu HTML dosyasına eklemeliyiz. Sayaç kodunu aşağıdaki şekilde ekleyebilirsiniz.
<b class="timer" id="sayac" data-from="1" data-to="99" data-speed="5000"></b>
Buradaki sayacımız bize 1’den başlayıp 99’a kadar sayma işlemini yapacaktır. Görüldüğü üzere data-from değeri sayacın başlangıç değerini, data-to değeri ise sayacın bitiş değerini alır. data-speed değerini açıklamadan geçiyorum zira onu ve diğer tüm değerleri yazının son kısmında açıklayacağım.
Örnekte olduğu gibi tekrar butonu eklemek isterseniz de HTML dosyanızda aşağıdaki kodu kullanabilirsiniz.
<button class="restart" data-target="#sayac">Tekrar</button>
Yukarıdaki kodla da tekrarlama işlemini yapıyoruz. data-target değeri tekrarlanacak sayac ismini -yukarıdaki etikette sayacımızın ismini “sayac” olarak kullanmıştık burada da aynı değeri verdik- alır.
Sıra geldi javascript dosyalarımızı çağırmaya. İlk dosya kütüphaneden, ikinci dosya ise sunucunuzdan çağırılmaktadır. Kodları görelim.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.
js"></script>
<script type="text/javascript" src="jquery.countTo.
js"></script>
Son olarak da HTML kodlarımızın altına yazacağımız kodları görüyoruz.
<script type="text/javascript">
jQuery(function ($) {
$('.timer').each(count);
// Tekrar butonuna tıklandığında
$('.restart').click(function (event) {
event.preventDefault();
var target = $(this).data('target');
count.call($(target));
});
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
</script>
Şimdi size sözünü verdiğim bölüme bakalım. Sayacımızın default değerlerini sunucunuzdaki javascript dosyasından düzenleyebilirsiniz. Örneği aşağıdadır, açıklama satırını yanlarına eklediğim için tekrar açıklamaya gerek duymuyorum.
from: 0, // Başlangıç değeri
to: 0, // Hedef değer
speed: 1000, // Sayaç hızı
refreshInterval: 100, // Güncellenme zamanı
decimals: 0, // Tam sayı hassasiyeti
formatter: formatter, // Format ayarları
onUpdate: null, // Yenilendiğinde yapılacaklar
onComplete: null // Tamamlandığında yapılacaklar
Jquery Dosyası
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
Not: Alıntıdır.