jQuery.visibility: modificare facilmente la proprietà visibility di un elemento

This entry was posted on January 10th, 2011 and is filed under Projects, jQuery.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.Powered by WP Greet Box WordPress Plugin

Due dei metodi più famosi del jQuery sono sicuramente:

• show()
• hide()

con cui si va a mostrare o nascondere un elemento. Questi due metodi vanno ad agire sulla proprietà display del CSS settandola a none o block.

In questo ultimo periodo ho spesso avuto bisogno di mostrare o nascondere un elemento agendo sulla proprietà visibility che differisce dalla proprietà display perchè pur nascondendo l’elemento, non rende disponibile lo spazio ad esso dedicato. In parole più semplici, supponendo di avere un div di dimensioni 100×100 pixel; nascondendo l’elemento con la proprietà display, lo spazio da esso occupato sarà disponibile per gli altri elementi della pagina, con la proprietà visibility il suo spazio resterà vuoto ma non disponibile.

jQuery non mette però a disposizione un metodo per gestire la visibilità ma abbiamo bisogno di agire su di essa attraverso il metodo .css(‘visibility’) o aggiungendo e rimuovendo una determinata classe CSS.

Per sopperire a questa necessità ho realizzato un semplicissimo plugin con tre metodi, simili ai metodi show, hide e toggle che agiscono sulla proprietà display.

Il plugin, che ho chiamato jQuery visibility, contiene tre metodi:

• visible() che rende visibile l’elemento
• hidden() che lo nasconde
• toggleVisibility() che alterna la proprietà visibility

Il codice del plugin è molto semplice:

(function( window, undefined ) {

jQuery.fn.extend({

    visible: function() {
        var self = $(this),
            visibility = self.css('visibility'),
            oldvisibility = self.data('oldvisibility');

        if( visibility == 'hidden' ) {
                self.css('visibility', (oldvisibility)? oldvisibility : 'visible' );
        }

        return self;
    },

    hidden: function() {
        var visibility = $(this).css('visibility');

        if( visibility!='hidden' ) {
            $(this).data('oldvisibility',visibility).css('visibility','hidden');
        }

        return $(this);
    },

    toggleVisibility: function() {
        var self = $(this),
            visibility = self.css('visibility');

        if( visibility=='hidden' ) {
            self.visible();
        } else {
            self.hidden();
        }

        return self;
    }

});

})(window);

Attraverso il metodo .data(), quando si nasconde l’elemento, verrà salvato il valore della visibility. Valore che verrà poi ristabilito con il metodo visibile().

Il plugin può essere richiamato sugli oggetti nella modalità classica:

$('#box').visible();
$('#box').hidden();
$('#box').toggleVisibility();

Download e Demo

E’ possibile vedere in azione il plugin o scaricarlo attraverso i seguenti link:
Demo Download

Like this post? Share It! :)