Ora devo isolare la funzione che crea un gruppo di caselle... e porla in libreria.
Vediamo come si può fare...
Ecco: isolato il codice, e creata una funzione avente per parametri il numero totale di caselle e l'altezza della colonna (se per
numero ho 10 e per
altezza della colonna ho 3, mi creerà tre colonne da 3 caselle più una di una casella... e così via...
function CreaCaselle(numero,altezzaColonna){
var casella;
for(var n=0;n<numero;n++){
//codice che crea una casella di tipo div e l'appende al documento
casella=document.createElement("div");
document.body.appendChild(casella);
//codice che "conforma" la casella attribuendole una classe del CSS
casella.className="casella";
//Codice che stabilisce le coordinate della casella in base all'altezza della colonna
casella.style.top=(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px";
}
}
La posso mettere nella libreria, adesso.
Ci metto anche la funzione che crea la proprietà indexOf per i vecchi browser IE:
Array.prototype.indexOf=function(oggetto){
for(var i=0;i<this.length;i++){
if(this[i]==oggetto) return i;
}
return -1;
}
Così facciamo un po' d'ordine e la pagina principale diventa così (senza il problema degli Array e delle date, ancora):
<html>
<head>
<style>
.casella{
border:1px solid blue;
width:120px;
height:15px;
font-size:8px;
position:absolute;
}
</style>
<script src="../librerie/funzioni.js"></script>
<script>
window.onload=main;
function main(){
CreaCaselle(20,6);
}
</script>
</head>
<body>
</body>
</html>
Però bisogna specificare nei parametri della funzione CreaCaselle anche la
classe del foglio di stile che si vuole dare alle caselle: essa non può essere predefinita nella funzione!
Poca difficoltà nel fare questo: modifichiamo in modo che il nome della classe venga passato come parametro.
function CreaCaselle(numero,altezzaColonna,classe){
var casella;
for(var n=0;n<numero;n++){
//codice che crea una casella di tipo div e l'appende al documento
casella=document.createElement("div");
document.body.appendChild(casella);
//codice che "conforma" la casella attribuendole una classe del CSS
casella.className=classe;
//Codice che stabilisce le coordinate della casella in base all'altezza della colonna
casella.style.top=(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px";
}
}
cosicchè, avendo due stili nella sezione CSS, posso, variando il parametro, avere due formati completamente diversi delle mie caselle:
<html>
<head>
<style>
.casella{
border:1px solid blue;
width:120px;
height:15px;
font-size:8px;
position:absolute;
}
.casella2{
border:1px solid red;
width:300px;
height:20px;
font-size:8px;
position:absolute;
}
</style>
<script src="../librerie/funzioni.js"></script>
<script>
window.onload=main;
function main(){
CreaCaselle(20,6,"casella2");
}
</script>
</head>
<body>
</body>
</html>
Ecco, cambiando la stringa passata come parametro posso far sì che le caselle abbiano lo stile
casella o
casella2.
