jquery 5 Adet İşinizi Kolaylaştıracak jQuery Kodları

[programYaz]

jQuery kodları derken daha doğrusu kod parçacıkları bu vereceklerim. 5 tane, sıklıkla kullandığımız ya da aradığımız kodlar bunlar. Bu jQuery kodlarını sitemizi ya da temalarımızı olultururken sıklıkla kullanıyoruz. Oldukça işimize yarayan bu kodlar artık ayrılmaz bir parçamız oldu gibi. En basitinden benim şu yukarı butonu bile aşağıda paylaşacağım jQuery kodlarına benzer yapıda. Estetik katabiliyor işlerimize. Lafı çok fazla uzatmadan geçiyorum paylaşmaya.

jQuery kodları nasıl kullanılır?

Bunu anlatmama pek gerek var mı bilmiyorum ama belki bu işe yeni başlayan arkadaşlar olabilir diye bi değineceğim. Öncelikle jQuery kütüphanesine ve olayları gerçekleştireceğimiz bir document.ready fonksiyonuna ihtiyacımız var. Şöyle ki;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> //jQuery kütüphanesini Google Üzerinden Çekiyoruz
//Sonrasında document.ready fonksiyonunu yazıyoruz
<script>
        $(document).ready(function()
               {
                       /*Kodları buraya yazacağız*/
               });
</script>

Bu kodları çağırdıktan sonra $(document).ready(function(){}); içerisine kodlarımızı yerleştireceğiz. Buradaki amaç sitenin yüklenmesi hazır olduğunda kodların çalışmasını sağlamaktır.

Sırasıyla jQuery Kodları

Basit Yukarı Butonu

// Yukarı Butonu Fonksiyonu
$('a.top').click(function(){
        $(document.body).animate({scrollTop : 0},800);
        return false;
});
 
//Sitenizde herhangi bir yere bunu ekleyin. Tabii "top" classına sahip olan bir div ya da alan var olmalı çalışması için
<a class="top" href="#">Yukarı</a>

Bu kod ile birlikte yukarıya doğru yavaş bir şekilde çıkan buton efekti yapmış oluyoruz. Kodun çalışması için sitenizin üst kısımlarında top classına sahip bir elemanınız div, span vb olmalı. Şayet herşey doğruysa gayet güzel bir buton oluşturmuş olacaksınız.

Tablo renklendirme

$("table tr:even").css('background', '#E8E8E8’);

Tablonuzu Zebra stili dedikleri bir şekilde renklendirmek için bu kodu kullanaiblirsiniz. Kod basit olarak Tablonun satırlarında ilk satıra farklı bir css arkaplan rengi atıyor ve renklendiriyor 🙂

Hover efekti

$('.ustegel').hover(  
   function(){ $(this).addClass('renklendir_class') },  
   function(){ $(this).removeClass('renklendir_class') }  
);

Bu kod ile herhangi bir div yada başka bir elemanı fare üstüne geldiğinde renklendirebilir ve değiştirebilirsiniz. Kod basit olarak fare imleci .ustegel classına sahip elemana geldiğinde farklı bir class atayarak değişime imkan sağlıyor. Fare uzaklaştığında ise classı siliyor. Eklemeniz gereken elemanın örneği şöyle olmalıdır.

<div class="ustegel">
Fareyi Üstüme getir ki renkleneyim
</div>
 
<style>
.ustegel {display:block;background:#FFFFF;border-color:#000000;}
.renklendir_class {background: #282828;border-color: #1d1d1d;}
</style>

Linkleri Yeni sayfada açılmaya zorlamak

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Ne dediysek o 🙂

Tablo başlıklarını Tablo Sonuna klonlamak

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
    $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Tablo yapılarının bazılarında tablo başlıkları thead aynı şekilde tablo sonlarında da kullanılması gerekebilir ama bazen tablo yaparken bunu unutabiliriz. Bu kod direkt olarak bu işi yerine getiriyor 🙂

jQuery kodları umarım işinize yarar kodlar olur.

Selametle