Mart
8 MooTools nedir? nasıl kullanılır?   MooTools   0   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.


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


daha sonra javascripts kodlarımızıla devam ediyoruz...
Etiketler : mootools
Mart
1 Tarayıcı Diline Göre Yönlendirme   Javascripts   0   187
Aşağıdaki kod sayesinde sitenize gelen kullanıcıları tarayıcı diline göre yönlendirebilirsiniz. Örneğin dil seçeneği olan bir ingilizce video siteniz olsun buraya Türkiye'den birileri geldiği zaman tarayıcı dili Türkçe olacağı için siteniz direk olarak Türkçe açılıcaktır.


  1. <html> 
  2. 
<script> 
  3.   

  4. 
var type=navigator.appName 
  5. 
if (type=="Netscape") 
  6. 
     var lang = navigator.language 
  7. 
else 
  8. 
     var lang = navigator.userLanguage 
  9. 
 
  10. 
var lang = lang.substr(0,2) 
  11. 
 
  12. 
// İngilizce 
  13. 
if (lang == "en") 
  14. 
window.location.replace('ingilizce.html') 
  15. 
 
  16. 
// Almanca 
  17. 
else if (lang == "de") 
  18. 
window.location.replace('almanca.html') 
  19. 
 
  20. 
// Türkçe 
  21. 
else if (lang == "tr") 
  22. 
window.location.replace('turkce.html') 
  23. 
 
  24. 
// Bunlardan biri değilse yönlendirilecek sayfa 
  25. 
else 
  26. 
window.location.replace('diger.html') 
  27. 
</script> 
  28. 
<html>

Etiketler : tarayıcı dili yönlendirme
Mart
1 Firefox inneTex sorunu ve çözümü   Javascripts   0   361
Javascripts kodunuzun içerisinde innerText geçiyorsa ve kodunuz ie de çalışıyor fakat firefox'ta çalışmıyorsa bunu kolayca düzeltebilirsiniz.

Firefox innerTex'i desteklemez onun yerine textContent kullanabilirsiniz fakat bu seferde kodunuz ie de çalışmayacaktır.

Bunu önlemek için küçük bir javascript koduna ihtiyacımız var. Bir örnek ile açıklayalım.
Kodumuzu <head> </head> tag'larının içerisine yapıştırıyoruz.

  1. <script type="text/javascript">
  2.     function Sample(){
  3.         var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
  4.         var elem = document.getElementById('id');
  5.         var elem2 = document.getElementById ('id2');
  6.         if(!hasInnerText){
  7.            elem.textContent = "Text 1";
  8.            elem2.textContent = "Text 2";
  9.         } else{
  10.            elem.innerText = "Text 1";
  11.            elem2.innerText = "Text 2";
  12.         }
  13.     }
  14.     
  </script>


Etiketler : firefox inneText textContent javascripts
Şubat
25 MooTools ile Karakter Sayısını Kısıtlama   MooTools   0   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.


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


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


  1. <label for="myInput">Bir şeyler yazın:</label>
  2. <input type="text" id="myInput" maxlength="20" /> 
  3. 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..


  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.     $('myInput').addEvent('keyup', function() {
  4.         max_chars = 20;
  5.         current_value    = $('myInput').value;
  6.         current_length    = current_value.length;
  7.         remaining_chars = max_chars-current_length;
  8.         $('counter_number').innerHTML = remaining_chars;
  9.         
  10.         if(remaining_chars<=5){
  11.             $('counter_number').setStyle('color', '#990000');
  12.         } else {
  13.             $('counter_number').setStyle('color', '#666666');
  14.         }
  15.     });
  16. });
  17. </script>


DEMO | DOWNLOAD
Etiketler : Twitter MooTools
<< ilk< geri12345ileri >son >>
COPYRİGHT © 2010 BY ilhan TEKİR Her Hakkı Saklıdır.