Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Conto alla rovescia con personalizzazione


Conto alla rovescia con personalizzazione

Messaggio Da Sogniriflessi il Mer 09 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!


Sogniriflessi
Creattiva
Creattiva

Sesso : Femminile
Età : 44
Messaggi : 861
Località : lamezia terme


Vedere 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

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum