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 (: jQuery jQuery Document Ready Kodu // A $( document ).ready() […]

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 (:

jQuery

  1. jQuery Document Ready Kodu
    
    // A $( document ).ready() block.
    $( document ).ready(function() {
        console.log( "ready!" );
    });
    
    // Kısa Kullanımı $( document ).ready()
    $(function() {
        console.log( "ready!" );
    });
    
    
    
  2. jQuery on Click
    
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
    
    
  3. jQuery addClass ve removeClass
    
    $( "p" ).addClass( "myClass yourClass" );
    
    $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
    
    
    
    
  4. jQuery on :Checked
    
    $(function() {
       $(".checkbox").change(function() {
           if(this.checked) {
               //Do stuff
           }
       });
    });
    
    
  5. jQuery html lang değiştirme
    
    	$('.lang-tr').click(function() {
    		$('html').attr('lang', 'tr');
    	});
    	$('.lang-en').click(function() {
    		$('html').attr('lang', 'en');
    	});
    
    
  6. 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');
    });
    
    
  7. 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