Conto alla rovescia con personalizzazione


Conto alla rovescia con personalizzazione

Messaggio Da Sogniriflessi il Mer 9 Set 2015 - 14:55

Conto alla rovescia con personalizzazione


Questo tutorial consente di personalizzare la visualizzazione del tutorial "Orologio / Conto alla rovescia".

Panoramica










Preparazione








Eseguire la prima parte del tutorial cioè orologio / Conto alla rovescia senza personalizzazione.

http://aiuto.forumattivo.it/t18765-conto-alla-rovescia-senza-personalizzazione
 

Le opzioni di base









L'orologio di base ha già proprietà di formattazione di tempo e il conto alla rovescia, eccoli: 

  • n_j: utilizzati esclusivamente per il conto alla rovescia, questa proprietà è un valore numerico che indica la lunghezza fissa per la visualizzazione dei giorni, per impostazione predefinita questa proprietà è 3 e se si imposta la data di una settimana darà il tempo "007" , è chiaro che ad essa vanno aggiunti gli zeri iniziali per raggiungere la lunghezza di 3 caratteri.
  • F_C: esclusivamente per la visualizzazione del conto alla rovescia è una stringa di default {j} giorni {h} {m} {s}.
  • f_H: esclusivamente per la visualizzazione del tempo è una stringa di default{h} {m} {s}.


{h},{m},{s}









Per essere veramente personalizzabile, l'orologio sostituisce il contenuto delle proprietà di visualizzazione (F_C e f_H) e:

  • {J}: rappresenta i giorni nella loro interezza, se il conto alla rovescia è in una settimana {j} sarà sostituito da 007.
  • {H}: rappresenta il tempo in pieno, se è 13h24min12s {h} sarà sostituito da 13.
  • {M}: indica i minuti in pieno, se è 13h24min12s {m} sarà sostituito da 24.
  • {S}: rappresenta i secondi in pieno, se è 13h24min12s {s} sarà sostituito da 12.


Sono disponibili altre opzioni durante la formattazione , è possibile visualizzare il valore delle ore, minuti, ecc ... per sua natura è molto utile se si desidera utilizzare le immagini per il vostro orologio al posto del testo, Per questo è sufficiente seguire la lettera della posizione del carattere desiderato. 
Utilizzando l'esempio precedente, è 13H24min12s:

  • {} H1 è 1 e h2 {} è 3 come {h} è uguale a 13 e che il primo carattere 13 è 1 e il secondo è tre.



 Se si richiede una posizione di carattere che non esiste, l'orologio vi avviserà tramite un messaggio che indica l'errore riscontrato, ad esempio non valido: "h3 {}".


Modifica le opzioni








Ok, ora che abbiamo visto le opzioni disponibili, vediamo come modificarle. 
Per modificare un'opzione basta semplicemente effettuare le seguenti operazioni:


Codice:
variable.options.option=valeur;

Ecco un esempio in cui si desidera visualizzare le immagini per l'ora: 

Codice:
x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';

Sarà possibile modificare solamente le opzioni poste prima di heure o di a_rebours.
Questo è un esempio di codice valido:

Codice:
$(function(){            var x=new horloge($("#id_horloge"));            x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';            x.heure();        });

questo invece no:

Codice:
$(function(){            var x=new horloge($("#id_horloge"));            x.heure();            x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';        });


Eseguire il codice alla fine del conto alla rovescia









Quando il conto alla rovescia raggiunge lo zero, una funzione viene avviata automaticamente il suo nome è "fin_a_rebours", per default non fa assolutamente nulla, ma è possibile ridefinire così:

Codice:
x.fin_a_rebours=function(){code javascript};

Questa possibilità è prevista per coloro che vogliono cambiare lo sfondo del loro forum, quando il conto alla rovescia è terminato, per esempio, 




Vi aspettiamo nel servizio grafico di Forumattivo!

avatar
Sogniriflessi
Creattiva
Creattiva

Sesso : Femminile
Età : 45
Messaggi : 898
Località : lamezia terme


Vedi il profilo dell'utente http://unmondodigrafica.forumattivo.it
Sogniriflessi è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum