goLabel

jQuery extension to add labels with minimal options to elements on the page.

by Salustiano Silva

HTML

<p></p>
<div id="devicePrice" class="jInfoLabel">1000,00€</div>
<div id="newsletterStatus" class="jInfoLabel">Receber newsletter?</div>

CSS

.jInfoLabel{
    position:relative;
}
.jInfoLabel .label {
    font-size:10px;
    position:absolute;
    right:-6px;
    top:-6px;
    padding:3px;
    border-radius:3px;
    color:#fff;
}
.jInfoLabel .label.success{
    background-color:green;
}
.jInfoLabel .label.info{
    background-color:blue;
}
.jInfoLabel .label.warning{
    background-color:orange;
}
.jInfoLabel .label.error{
    background-color:red;
}


div{
    margin:20px 10px;
    font-family:sans-serif;
    font-size:15px;
    width:50%;
}

JavaScript

;(function ($) {

    $.fn.goLabel = function( options ) {

        var opts = $.extend({
            type: "success",
            message: "guardado com sucesso",
            time: 3000
        }, options );

        var $label = $('<span/>', {"class": "label"}).addClass(opts.type).html(opts.message);

        return this.append($label).find('.label').delay(opts.time).fadeOut(300, function(){
            $(this).remove();
        });
    };
}( jQuery ));

/**
 * Exemplos de utilização
 */
$( "#devicePrice" ).goLabel({
    type: "error",
    message: "o preço está desactualizado",
    time: 2000
});

$( "#newsletterStatus" ).goLabel({
    type: "info",
    message: "receber é muito bom",
    time: 3000
});

setTimeout(function() {
    $( "#devicePrice" ).goLabel();
}, 3000);