jQuery Plugin Olusturmak

"jQuery eklentisi nasıl yazılır" konusunda basit bir örnek.

by Hakan Özakar

HTML

<div class="tasiyici">
    <p>Merhaba, benim adım <span class="kim">Hakan</span>.</p>
    <p><span class="nazaman">Arada sırada</span>  <span class="ne">yazılım geliştirme konusunda insanların işine yarayacak yazılar</span> karalamayı <span class="neden">severim</span>.</p>
    <p>Genellikle <span class="nezaman">boş zamanlarımda</span>  <span class="nerede">evdeki bilgisayarımda</span> oyun oynamak yerine <span class="nasil">bu hobiye zaman ayırıyorum</span>.</p>
</div>

<script>
    $('.ne').renklendir();
    $('.nerede').renklendir({
        renk: 'orange',
        arkaplan: '#f3f3f3'
    });
    $('.nezaman').renklendir({
        renk: 'green'
    });
    $('.nasil').renklendir({
        renk: 'blue',
        arkaplan: '#f3f3f3'
    });
    $('.neden').renklendir({
        renk: 'yellow',
        arkaplan: 'red'
    });
    $('.kim').renklendir({
        renk: 'red'
    });
</script>

CSS

div.tasiyici {
    box-sizing: border-box;
    width: 320px;
    margin: 60px auto;
    padding: 12px 30px;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    border: none;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .25);
    border-radius: 6px;
}

JavaScript

(function($) {
    "use strict";
    
    $.fn.renklendir = function(param) {
        var degerler = $.extend({
            renk: '#666',
            arkaplan: '#fff'
        }, param);

        return this.css({
            color: degerler.renk,
            backgroundColor: degerler.arkaplan
        });
    }
})(jQuery);