1 0 Tag Archives: jQuery
post icon

jQuery ‘this’

Dopo aver appreso le basi di jQuery e essermi stupito di quanto sia possibile fare con pochissime righe di codice, ho cominciato ad utilizzarlo sfruttando svariati plugin.
Tuttavia, sono rimasto a lungo confuso riguardo il concetto della parola chiave ‘this‘.

In parole povere, la parola chiave ‘this‘ può far riferimento a due contesti differenti:

  • un elemento del DOM
  • un oggetto jQuery

In circostanze normali, la parola chiave this si riferisce a un elemento DOM; più comunemente viene utilizzato all’interno di una funzione di callback, ad esempio durante l’associazione a un evento, oppure durante un’iterazione di elementi.

Numerose funzioni all’interno di jQuery sono in grado di accettare la funzione di callback; ad esempio, le funzioni per il fading (fadeIn, fadeOut).
Dopo che la porzione di DOM selezionata ha completato il fading, viene innescata la funzione di callback, e a questo punto la keyword this fa riferimento all’elemento del DOM selezionato.

Di seguito diversi esempi di utilizzo del this come riferimento ad elementi del DOM:

//Binding di un evento
$('a').click(function() {
   //this si riferisce all'ancora (elemento DOM)
   alert("this.href = '" + this.href + "'");
})
                    
//Iterating over elements from a jQuery selection
$('a').each(function() {
   //this si riferisce all'ancora (elemento DOM) corrente (each)
   alert("this.href = '" + this.href + "'");
});
                    
//Fading DOM elements from a jQuery selection
$('a').fadeOut('slow', function() {
   //this si riferisce all'ancora (elemento DOM)
   alert("this.href = '" + this.href + "'");
});

Come si può vedere, nella maggior parte degli scenari che coinvolgono la parola chiave this, si riferisce ad un elemento DOM.

Tuttavia, l’area principale in cui è necessario fare attenzione con il this è quando si scrive un plugin jQuery.

La parola chiave this utilizzata all’interno di un plugin jQuery si riferisce all’oggetto jQuery utilizzato dal selettore $ e su cui si applica il plugin.

Di seguito un esempio di utilizzo della parola chiave this in un plugin:

// Set _blank target for anchors point to outside domain URL
jQuery.fn.SetBlankTarget = function () {

    // at this point 'this' is a jQuery object 
    return this.each(function () {

        // now we are inside of a jQuery function so the DOM element is the context    
        // at this point 'this' is  a DOM element.   
        if (this.host != window.location.host) {

            //at this point 'this' is a DOM element
			//$(this) is a jQuery object 
            $(this).attr('target', '_blank');
        }
    });
};
9 marzo 2011 @ 14:10
post icon

jQuery Mobile 1.0 Alpha 1 Released!

Aspettavo da tempo questo momento! ..una versione mobile del framework jQuery!

Al momento è in alpha release, quindi ci sarà tanto da ottimizzare, ma siamo sulla strada giusta!

Credo che avremo modo di apprezzarne le potenzialità, così come fatto per la versione jQuery standard per lo sviluppo web desktop.

jQueryMobile è un framework per sviluppo mobile cross-browser e cross-plataform. A questo link è disponibile la griglia con i device supportati; praticamente ricopre il 99,9% dei browser nativi dei mobile OS disponibili sul mercato: iOS, Symbian S60, Symbian UIQ, Symbian Platform, BlackBerry OS, Android, Windows Mobile, webOS, bada, Maemo e MeeGo.

L’ obiettivo è quello di fornire strumenti per creare interfacce Touch dinamiche, che si adattano ad una serie di fattori di forma del dispositivo mobile.
Il framework jQueryMobile prevede sia un ben fornito layout (liste, riquadri di dettaglio, sovrapposizioni) che un ricco set di controlli e widget UI (toggles, slider, tabs).

Di seguito il link alla demo della versione alpha 1.0: http://jquerymobile.com/demos/1.0a1

Al momento non ci resta che provare questa alpha release in attesa di una versione più stabile.

Enjoy Mobile!

18 ottobre 2010 @ 09:36