Çevrimdışı

Ö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.

 

Çevrimdışı

Linki yeniden düzenledim elim de olmayan sebeplerden ötür linkte bir problem vardır

Tekrar indirmek icin [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

 

Çevrimdışı

Teşekkürler.

__________________

"sağıra sözünü,
köre yüzünü süsleme gönül !
Yorulursun... "