Attivare il metodo di un’istanza in maniera anonima
Quante volte vi siete trovati a dover attivare da un click il metodo dell’istanza di una classe? La prima difficoltà che si incontra è individuare esattamente l’istanza che ci serve. La soluzione più frequente è passare il nome dell’istanza o un qualsiasi riferimento come parametro.
Ma non si può proprio fare a meno di passare il riferimento all’istanza? Ebbene sì, e Prototype ci propone l’uso di “bindAsEventListener()”.
Facciamo un esempio. Ci sono x campi di testo. Ad ognuno è associato un bottone. Cliccando su un bottone parte l’alert del valore del campo di testo corrispondente.
Ecco il codice di come si risolve il problema “alla vecchia maniera”:
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
initialize:function(buttonField,textField,instance_id){
this.buttonField=buttonField;
this.textField=textField;
this.instance_id=instance_id;
this.buttonField.observe("click",
function(){saluti[instance_id].hi()}
);
},
hi:function(){
alert(this.textField.value);
}
});
// creo le istanze
var saluti=[];
document.observe("dom:loaded",function(){
$$(".btn").each(function(BUTTON){
var TEXTFIELD=$$(".msg")[saluti.length];
saluti.push(new saluto(
BUTTON,TEXTFIELD,saluti.length
));
});
});
</script></head><body>
<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>
</body></html>
A differenza dalla vecchia, la “nuova maniera” non ha bisogno di alcun riferimento, per cui si può addirittura eliminare l’array con le istanze!
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
initialize:function(buttonField,textField){
this.buttonField=buttonField;
this.textField=textField;
this.buttonField.observe("click",
this.hi.bindAsEventListener(this)
);
},
hi:function(){
// in caso vogliate usare argomenti,
// ricordate che il primo è sempre l'evento
alert(this.textField.value);
}
});
// creo le istanze
document.observe("dom:loaded",function(){
$$(".btn").each(function(BUTTON,i){
var TEXTFIELD=$$(".msg")[i];
new saluto(
BUTTON,TEXTFIELD
);
});
});
</script></head><body>
<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>
</body></html>
C’est très chic ^_^
Add comment 22 Ottobre 2009
IE6 vs PNG, come cambiare lo sfondo grigio col colore di background preferito
Un HTMLista skillato sa bene come attivare la trasparenza delle PNG in IE6, conoscono i conditional comments, sanno che non c’è modo di usare PNG come background (in IE6), eccetera. Stavolta vi propongo una chicca che vi servirà 1 volta su 1 milione, ma sarà proprio quella volta in cui vi salverà il… lavoro.
Avete presente che inserendo una PNG con trasparenza Alpha in IE6 compare uno sfondo grigio, no? tanto che alcuni arrivano a cambiare la grafica del sito e ad usare lo stesso grigio… Ebbene, da oggi potrete ottenere esattamente il colore che vi serve!
TweakPNG vi permette infatti di smanettare con i vari parametri dei quali dispone una PNG, tra i quali appunto il Background. Basta aprire l’immagine e customizzare il parametro bKGD! (se non c’è, selezionare Insert > bKGD)
1 comment 27 Luglio 2009
Quella strana “E” sulle confezioni dei prodotti
L’Estimated sign è il simbolo usato nell’Unione europea per segnalare sulle etichette dei prodotti la massa o il volume meccanicamente predeterminati di una merce. Per visualizzarlo in HTML bisogna usare il codice ℮
Add comment 24 Giugno 2009
Gif animate con Photoshop
Mi sono trovato recentemente in una situazione nella quale dovevo creare una GIF animata. Siccome non volevo perdere tempo a cercare servizi online o l’ennesimo programma freeware, ho trovato questo tutorial per realizzare gif animate con Photoshop. Ho però trovato la procedura un po’ scomoda, per cui non è escluso che in futuro cercherò un programma più adatto.
1 comment 27 Marzo 2009
Float Precision, risolvere il problema dei decimali in JavaScript
Facendo operaizoni coi decimali in JavaScript vi sarà capitato di imbattervi in alcuni risultati “strani”… Ad esempio:
0.99999 + 0.000001 = 0.9999910000000001
0.05 * 0.35 = 0.017499999999999998
Questo strano comportamento è colpa dello Standard IEEE 754 implementato in moltissimi linguaggi e che regola il comportamento dei numeri decimali.
Ora, non so per voi ma per me è inconcepibile fare con un PC delle operazioni matematiche ed ottenere risultati errati… per cui mi sono messo a caccia di una libreria che risolvesse tale problema. Ho trovato BigNumber, che al prezzo di un po’ di scomodità (ma neanche tanta) promette risultati perfetti:
new BigNumber(0.99999).add(0.000001) = 0.999991
new BigNumber(0.05).multiply(0.35) = 0.0175
Alleluia.
Quando la finiremo di implementare librerie per riparare agli errori degli altri??
7 comments 4 Febbraio 2009
jLibrary, minor update
Tutti i files di jLibrary sono stati aggiornati per essere compatibili con jPrototype 0.2. La retrocompatibilità è garantita.
Add comment 22 Gennaio 2009
jPrototype 0.2
Con l’anno nuovo ho trovato il tempo di razionalizzare la libreria, che si avvale finalmente dei vantaggi di Prototype 1.6.
Ecco i principali cambiamenti:
- Eliminata la funzione $AA() in quanto dalla versione 1.6 di Prototype $A() è stato migliorato
- is.Collection() è stato rimosso in quanto non funzionante
- l’oggetto “is” è stato perfezionato
- i metodi di Position sono stati spostati sotto Element
- AND(), OR(), NAND() e NOR() sono stati rinominate ALLOF, ONEOF, NONEOF e ONENOTOF, in quanto in effetti la loro funzione è diversa da quello che si poteva pensare (infatti NOR() non si comportava come un NOR logico)
E’ comunque possibile scaricare il vecchio ramo nella pagina della documentazione e download.
Add comment 13 Gennaio 2009
Form.request() e il tasto Enter
Chi usa Prototype è sicuramente abituato alla comodità del metodo Form.request() che permette di inviare i dati di una form senza cambiare (o ricaricare) la pagina. Probabilmente però si è anche imbattuto nel classico problema del pulsante [Enter] che, se premuto, invia la form nel modo classico, cambiando (o ricaricando) la pagina. Finora la soluzione era disabilitare il tasto, con tutti i problemi del caso legati alle textarea, ma oggi ho trovato una soluzione più elegante:
$('myForm').observe('submit', function(e){
Event.stop(e);
$(this).request();
})
Add comment 10 Settembre 2008
Workaround per Scriptaculous: Blind/Slide bug
Questi effetti soffrono di un bug non da poco che affligge IE: all’inizio dell’animazione, il div animato fa un “salto”, ovvero a seconda dei casi viene mostrato allo 0% oppure al 100% della sua altezza. L’unico modo che ho trovato di farlo funzionare è stato usare l’opzione “from” per far partire l’effetto appena dopo il “salto”.
Esempio:
Effect.BlindDown('myDiv',{duration:0.5,from:0.1});
Add comment 12 Agosto 2008
jDate aggiornato alla versione 0.21
Aggiunti i seguenti metodi:
- jDate.toDate();
- jDate.addDate();
- jDate.addWeek();
- jDate.addMonth();
- jDate.addYear();
- String.timestamp2jDate()
Leggete la documentazione se volete approfondire…
Add comment 30 Maggio 2008
