In questo articolo vediamo come creare degli alert sempre differenti l’uno dall’altro utilizzando il costruttore Custom.Alert di moo.rd.
Per portare a termine questa applicazione correttamente, è necessario creare un foglio di stile css con tanti stili quanti sono i differenti alert che vogliamo creare, nel nostro esempio sei.
Ricordo che per creare degli stili appropriati per i Custom Alert, è necessario creare tre classi: alerthead, alertbox e alertbody. (per maggiori informazioni)

Dato che i nostri alert saranno sei, dovremo creare 18 classi:

• ‘ab1′, ‘ah1′, ‘abd1′ per il primo alert (dove la prima classe è per alertbox, la seconda per alerthead e la terza per alertbody)
• ‘ab2′, ‘ah2′, ‘abd2′ per il secondo alert

e cosi via per i rimanenti.

Il trucco consiste nel dichiarare un array di oggetti: ognuno contenente le tre proprietà delle sezioni dei Custom.Alert (che per abbreviare chiameremo ‘ah’, ‘ab’ e ‘abd’). A queste assegneremo le stringhe di tutte le classi che abbiamo creato, suddivise per sezione:

1
2
3
4

var allstyles = [{ah:'ah1', ab: 'ab1', abd: 'abd1'},
{ah:'ah2', ab: 'ab2', abd: 'abd2'}, {ah:'ah3', ab: 'ab3', abd: 'abd3'},
{ah:'ah4', ab: 'ab4', abd: 'abd4'}, {ah:'ah5', ab: 'ab5', abd: 'abd5'},
{ah:'ah6', ab: 'ab6', abd: 'abd6'}];

Ora, quando clicchiamo sul pulsante che genera l’alert, dobbiamo prendere un oggetto casuale dall’array allstyles, utilizzando il metodo getRandom; a questo punto creiamo un nuovo oggetto con le solite tre proprietà (questa volta i nomi devono essere completi) e ad ognuna assegniamo i valori delle proprietà dell’oggetto appena preso in modo random.

A questo punto non ci resta che creare il custom alert con l’apposito costruttore:

5
6
7
8
9
10
11
12
13
14

var styles = allstyles.getRandom();
var opts = {
  alerthead: styles.ah,
  alertbox: styles.ab,
  alertbody: styles.abd
}
var ca = new Custom.Alert('Custom Alert by RD', 'Testo del custom alert ' +
' - Custom Alert generato in modo random', opts);
 
ca.create();

L’esempio completo è disponibile qui.

Ovviamente non badate agli stili degli alert, volutamente semplici (e creati in dieci minuti) ma soffermatevi sulla possibilità di portare questo esempio in un’applicazione reale. Con tanti alert generati da diversi pulsanti in una pagina, ognuno verrà preso in modo casuale seguendo il calcolo delle probabilità, e sarà una valida alternativa alla finestra standard.