MooTools | ilhan Tekir

Mart
8 MooTools nedir? nasıl kullanılır?

MooTools

319

My Object Oriented JavaScript Tools yani MooTools açılımdan anlaşıldıgı üzere, object oriented mantığı kullanılarak geliştirilen ve sitelerimizde gerek görsel, gerekse içeriksel olarak, inanılmaz kolay ve dinamik yapılar oluşturmamıza olanak sağlayan bir javascript kütüphanesidir.

Peki MooTools ile neler yapılabilir.

Bir resmi yada tabloyu sürükleyebilirsiniz,

Bir menu oluşturup MooTools ile sıralarını değiştirebilirsiniz,

Resimler üzerinde transparan geçişler yapabilirsiniz,

daha fazla örnek için buradaki demolerı inceleyebilirsiniz. http://demos.mootools.net

Kullanımı :

ilk önce http://mootools.net/download adresinden son sürümü indiriyoruz ve kütüphanemizi html kodlarımızın içine gömüyoruz.


 <script type="text/javascript" src="mootools.js"></script>

daha sonra javascripts kodlarımızıla devam ediyoruz...

Etiketler : mootools

Şubat
25 MooTools ile Karakter Sayısını Kısıtlama

MooTools

106

Twitter kullanıcıları iyi bilir Smile

140 karakterlik bir alanınız vardır siz yazdıkça azalır ve artık son 20 karakter kaldığı zaman rengi kırmızı olur. Bunu sizde bir çok form uygulamanızda kullanabilirsiniz, nasıl yapıldığına gelince ;

1- ilk önce MoonTools'un son sürümünü indiriyoruz. Daha sonra <head> tag'ının içine ekliyoruz.


<script type="text/javascript" src="mootools.svn.js"></script>

2- Daha sonra <body> tag'larının içine HTML kodlarımızı ekliyoruz.


<label for="myInput">Bir şeyler yazın:</label>
<input type="text" id="myInput" maxlength="20" /> 
Kalan karakter Sayısı :<span id="counter_number" class="counter">20</span>

3- En son olarakta JavaScript kodumuzu ekliyoruz <head> tag'larının arasına..


<script type="text/javascript">
window.addEvent('domready', function() {
    $('myInput').addEvent('keyup', function() {
        max_chars = 20;
        current_value    = $('myInput').value;
        current_length    = current_value.length;
        remaining_chars = max_chars-current_length;
        $('counter_number').innerHTML = remaining_chars;
        
        if(remaining_chars<=5){
            $('counter_number').setStyle('color', '#990000');
        } else {
            $('counter_number').setStyle('color', '#666666');
        }
    });
});
</script>

DEMO | DOWNLOAD

Etiketler : Twitter MooTools

Anasayfa