JS Tricks, Labs

Javascript Kod Deposu

JS ile çoğu zaman kullandığım kodlardan bazılarını sizlerle paylaşıyorum. Aklıma geldikçe ekleyeceğimden güncel kalacak bir konu olarak buraya bırakıyorum (: Pure Javascript JS Class Eklemek & Değiştirmek // Öğenin Class’ını […]

yzr: Hakkı Cengiz
A+ A A- okuma

JS ile çoğu zaman kullandığım kodlardan bazılarını sizlerle paylaşıyorum. Aklıma geldikçe ekleyeceğimden güncel kalacak bir konu olarak buraya bırakıyorum (:

Pure Javascript

  1. JS Class Eklemek & Değiştirmek
    
    // Öğenin Class'ını Değiştir
    var el = document.getElementById('#foo');
    pres[i].className = 'my-class';
    
    // Öğenin Class'ını Değiştir + Eski Class'ına Dokunma
    var el = document.getElementById('#foo');
    el[i].className += ' my-class';
    
    // & ya da
    
    el.className = d.className + " my-class";
    
    
    // classList Yöntemi
    
    var el = document.getElementById("div1");
    
    // Single class
    el.classList.add("my-class");
    
    // Multiple calsses
    el.classList.add("my-class", "nother-class");
    
    
    // Kullanımı: 
    // add - Bir öğenin sınıf listesine bir sınıf ekler. Sınıf, öğenin sınıf listesinde zaten varsa, sınıfı tekrar eklemeyecektir.
    // remove - Bir öğenin sınıf listesinden bir sınıfı kaldırır. Sınıf, öğenin sınıf listesinde yoksa, bir hata veya istisna oluşturmaz.
    // toggle - Bir elemanın sınıf listesindeki bir sınıfın varlığını değiştirir
    // içerir - Bir elemanın sınıf listesinin belirli bir sınıf içerip içermediğini kontrol eder
    
    var el = document.getElementById("div1");
    
    el.classList.remove("my-class");
    
    el.classList.toggle("visible");
    
    if (el.classList.contains("my-class")) {
        // Has my-class in it
    } else {
        // No my-class :(
    var el = document.getElementById("div1");
    
    el.classList.remove("my-class");
    
    el.classList.toggle("visible");
    
    if (el.classList.contains("my-class")) {
        // Has my-class in it
    } else {
        // No my-class :(
    }
    
    
    
  2. JS isMobileDevice Func
    
    ///// is Mobile Device
    function isMobileDevice() {
        return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }
    
    
  3. JS Mouse Wheel Events
    
    ///// Mouse Wheel Events
    window.addEventListener('mousewheel', function(e){
        wDelta = e.wheelDelta < 0 ? 'down' : 'up';
        console.log(wDelta);
    });
    
    
  4. JS Mobile Swipe Events
    swipe events
  5. jQuery

  6. jQuery Document Ready Kodu
    
    // A $( document ).ready() block.
    $( document ).ready(function() {
        console.log( "ready!" );
    });
    
    // Kısa Kullanımı $( document ).ready()
    $(function() {
        console.log( "ready!" );
    });
    
    
    
  7. jQuery on Click
    
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
    
    
  8. jQuery addClass ve removeClass
    
    $( "p" ).addClass( "myClass yourClass" );
    
    $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
    
    
    
    
  9. jQuery on :Checked
    
    $(function() {
       $(".checkbox").change(function() {
           if(this.checked) {
               //Do stuff
           }
       });
    });
    
    
  10. jQuery html lang değiştirme
    
    	$('.lang-tr').click(function() {
    		$('html').attr('lang', 'tr');
    	});
    	$('.lang-en').click(function() {
    		$('html').attr('lang', 'en');
    	});
    
    
  11. Label işlevi lazım olursa jQuery ile

    Etiketler, etiketledikleri girişin kimliğiyle eşleşen "for" niteliklerine sahip olmalıdır. Bunun anlamı, girişteki bir tıklamayı tetiklemek için bu özelliği seçip bir seçicide kullanabiliriz. Elbette girdilerde tıklamaları izlemek için bir nedeniniz olduğunu varsayalım.

    
    var labelID;
    
    $('label').click(function() {
           labelID = $(this).attr('for');
           $('#'+labelID).trigger('click');
    });
    
    
  12. Kendi sitem için hazırladığım font büyütme, küçültme (jQuery Font Changer):

                      
                          <div class="tagcloud">
                            <a id="up"     href="#up">A+</a>
                            <a id="normal" href="#up">A</a>
                            <a id="down"   href="#up">A-</a>
                          </div>
    
                          <div class="single-content">
                          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis hic quae iure unde deserunt. Quidem, harum! Modi eligendi ab recusandae, quod quasi aut sit. Quia nesciunt vitae reprehenderit quisquam sapiente!
                          </div>
    
                      
    
                        
                          .normal{
                            font-size: 100%;
                          }
                          .up{
                            font-size: 150%;
                          }
                          .down{
                            font-size: 50%;
                          }
                        
    
                        
                          $( "#normal" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "up down" ).addClass( "normal" );
                          });
                      
                          $( "#up" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "normal down" ).addClass( "up" );
                          });
                      
                          $( "#down" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "normal up" ).addClass( "down" );
                          });
                        
    
0 Yorumları: - Yorum Formunu: -

Henüz yorum eklenmemiş.

Bi yoruma ne dersin ?

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir