Conto alla rovescia con personalizzazione

Conto alla rovescia con personalizzazione Empty Conto alla rovescia con personalizzazione

Messaggio Da Sogniriflessi 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









Conto alla rovescia con personalizzazione Tutori10

Preparazione








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

Conto alla rovescia con personalizzazione Tutori10 https://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.



Conto alla rovescia con personalizzazione 997260 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, Conto alla rovescia con personalizzazione Icon_wink



Conto alla rovescia con personalizzazione Peindre Conto alla rovescia con personalizzazione Graphi11 Conto alla rovescia con personalizzazione Premiu10
Vi aspettiamo nel servizio grafico di Forumattivo!

Conto alla rovescia con personalizzazione 5mjHI7W
Sogniriflessi
Sogniriflessi
Graphic Designer
Graphic Designer

Sesso : Femmina
Età : 52
Messaggi : 967
Località : lamezia terme

http://unmondodigrafica.forumattivo.it
Sogniriflessi è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

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