View Single Post
Old 15-04-2017, 17:11   #2
virussino
Senior Member
 
L'Avatar di virussino
 
Iscritto dal: Sep 2003
Città: L'Aquila
Messaggi: 555
Allora... sto studiando un pò di Javascript, ma faccio il meccanico di auto quindi ho qualche difficoltà!!

Comunque ho fatto un passetto avanti:

Codice:
<script type="text/javascript">
var qualita = new Array("Traspirante","Termoregolatore","Anti-microbico","Impermeabile","Igroscopico","Elastico","Luminoso","Morbido","Non restringe-scolora","Asciugatura rapida"); 

var tooltip_qualita = new Array("Favorisce il ricircolo di aria tra tessuto e pelle","Assorbe o cede il calore a seconda della temperatura del corpo","Ostacola la nascita dei batteri","Non lascia passare i liquidi","Assorbe prontamente l'umidità","Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN","Brillante, molto liscio, con effetto lucido","Soffice, molto piacevole al tatto","Guardare le etichette interne per consigli su lavaggio e stiratura","Tende ad asciugare velocemente dopo il lavaggio"); 
</script>

Nella pagina inserisco il codice HTML di BOOTSTRAP per creare i botttoni a scomparsa, in questo modo la pagina rimane abbastanza corta ed il codice javascript viene caricato solo quando clicchi sul bottone per visualizzare le caratteristiche del tessuto (visto che ci sono 20 tessuti nella pagina per me è una buona cosa):

Codice:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Qualità del tessuto</a></h4></div>

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">      
<div class="list-group">   

<script type="text/javascript">
for (prop in qualita) {
  document.write('<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span>&nbsp;'+qualita[prop]+'</li>');
} 
</script>

</div>
</div>
</div>
Per ora tutto ok, funziona regolare, ma mette il segno ✔ a tutte le caratteristiche, e questo non va bene.
Adesso creo una nuova variabile per assegnare il SI o NO alla caratteristica:

Codice:
var qualita_cotone = new Array("✔","✔","","","✔","","","✔","✔","");

E quindi modifico lo script di scrittura in questo modo:

Codice:
<script type="text/javascript">
for (prop in qualita) {
  document.write('<li class="list-group-item list-group-item-success"><span class="badge">'+qualita_cotone[prop]+'</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span>&nbsp;'+qualita[prop]+'</li>');
} 
</script>

Per quanto riguarda i certificati di sostenibilità, non ho bisogno di un TOOLTIP che appare quando metto il mouse sulla glyphicon di Bootstrap, ma ho bisogno di un LINK di collegamento quando ci clicco sopra, in questo modo l'utente può ottenere ulteriori informazioni a riguardo aprendo una nuova pagina web, quindi cambio questo codice utilizzato per le altre informazioni:

Codice:
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span>
Con quest'altro codice utilizzato per avere un link di collegamento:

Codice:
<a href="'+link_certificati[prop]+'"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>
Chiaramente ho creato una variabile link_certificati con tutti in link in sequenza

In sostanza penso di aver abbreviato di parecchio il codice della pagina, perchè le variabili rimangono standard per tutti i tessuti (cotone, lana ecc), e devo modificare solo queste variabili:

Codice:
var qualita_cotone = new Array("✔","✔","","","✔","","","✔","✔",""); 
var certificati_cotone = new Array("✔","✔","✔","","","","","","","", "✔", "✔", "✔", "✔");
var caratteristiche_cotone = new Array("✔","✔","✔","","","","","","","", "✔", "✔", "✔", "✔");
ecc

Anche dovendo aggiungere ulteriori informazioni (qualità, certificati e caratteristiche) tutto è più semplice perchè dovrò modificare solo le variabili principali che sono uguali per tutti i tessuti:

Codice:
 var qualita = new Array("Traspirante","Termoregolatore","Anti-microbico","Impermeabile","Igroscopico","Elastico","Luminoso","Morbido","Non restringe-scolora","Asciugatura rapida"); 

 var tooltip_qualita = new Array("Favorisce il ricircolo di aria tra tessuto e pelle","Assorbe o cede il calore a seconda della temperatura del corpo","Ostacola la nascita dei batteri","Non lascia passare i liquidi","Assorbe prontamente l'umidità","Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN","Brillante, molto liscio, con effetto lucido","Soffice, molto piacevole al tatto","Guardare le etichette interne per consigli su lavaggio e stiratura","Tende ad asciugare velocemente dopo il lavaggio"); 

var caratteristiche = new Array("Naturale - Artificiale - Sintetico","Biologico","No OGM","Biodegradabile","Materia prima naturale","Materia prima riciclata","Estrazione meccanica","Estrazione chimica","DeTox","Risparmio energetico", "Classe di sostenibilità"); 


 var certificati = new Array("Global Organic Textile Standard","Organic Content Standard","Oeko Tex Standard 100","Tencel ®","Modal ®","Newlife ™","Bluesign ®","Global Recycle Standard","Plastica Seconda Vita","TirolWool", "Reach", "Fair Wear Foundation", "Animal Free", "Lega Anti Vivisezione");

 var link_certificati = new Array("https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GOTS","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ORGANICCOTTON","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#OEKOTEX","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TENCEL","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#MODAL","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#NEWLIFE","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#BLUESIGN","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GRS","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#PSV","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TIROLWOOL", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#REACH", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#FWF", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ANIMALFREE", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#LAV");


Cosa ne pensate? Avete qualche idea per abbreviare ancora di più il codice?


Ma soprattutto, se volessi utilizzarlo in altre pagine web, per evitare un copia incolla, come si fa? ^^
__________________
PC: Asus P5Q SE/R Intel Core2Duo E8200 OCZ Fatal1ty 1066mhz 4GB Sapphire 4670 512MB Hitachi 400GB LC6550G 550w
virussino è offline   Rispondi citando il messaggio o parte di esso