Accueil > > > PSEUDO SELECTBOX EN DHTML ...
 PSEUDO SELECTBOX EN DHTML ...
 Information sur la source
 Description
Salut à tous, Pour éviter de recevoir des commentaires comme quoi ce que j'ai fait est nul ou mal écrit, je vais expliquer un peu plus pourquoi je poste ça ... Je suis en train d'essayer de coder en Javascript une machine de Turing entièrement personnalisable mais surtout avec une interface utilisateur. Du coup, une partie du developpement est porté sur cette interface, et ce que je poste maintenant en fait parti. En effet, je devais trouver un moyen pour que l'utilisateur puisse entrer des quintuplets (que l'on appelle Etat, d'où le nom Behavior) où les éléments sont séparés par des virgules, et qu'ensuite ceux-ci soient affichés dans une SelectBox ou l'utilisateur pouvait supprimer les entrées qu'il voulait. Du coup, pour que ce soit plus joli, j'ai abandonné l'option des balises select/option, pour me débrouiller autrement ... Et ça donne cette source. Il faut 5 caractères quelconques, séparés par des virgules ([', g, ", o, e], par exemple ...). Ensuite, ils s'ajoutent au tableau.
 Source
<html>
<head>
<title>[Gestion des différents états]</title>
<style type="text/css">
img
{
padding: 0px;
margin: 0px;
}
#BehaviorList
{
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
border-style: solid;
border-color: #000000;
border-width: 1px;
padding: 0px;
margin: 0px;
border-collapse: collapse;
font-size: 11px;
font-color: #000000;
font-family: Courier New;
vertical-align: middle;
text-align: center;
}
#BehaviorList tbody td
{
width: 15px;
height: 15px
background-color: #FFFFFF;
border-style: solid;
border-color: #AAAAAA;
border-width: 1px;
}
#BehaviorList thead th
{
font-weight: bold;
background-color: #DDDDDD;
border-style: solid;
border-width: 1px;
border-color: #777777;
height: 15px;
width: 15px;
}
</style>
<script type="text/javascript">
var aBehaviorList = new Array();
function CreateBehavior(cString)
{
aBehavior = new Array(aBehaviorList.length + 1, "", "", "", "", "");
i = 0;
j = 1;
while(i < cString.length)
{
if(cString.substr(i, 1) == ",")
{
j++;
}
else
{
aBehavior[j] = aBehavior[j] + cString.substr(i, 1)
}
i++;
}
return aBehavior;
}
function AddBehavior(cString)
{
oBehaviorList = document.getElementById("BehaviorList");
aBehavior = CreateBehavior(cString);
aBehaviorList.unshift(aBehavior);
WriteBehavior(aBehavior);
}
function WriteBehavior(aBehavior)
{
oBehaviorList = document.getElementById("BehaviorList");
oImg = document.createElement("img");
oImg.src = "cross.png";
oImg.style.cursor = "hand";
oImg.alt = "Supprimer ..."
oBehaviorList.tBodies[0].insertRow(0);
oBehaviorList.tBodies[0].rows[0].insertCell(0);
oBehaviorList.tBodies[0].rows[0].cells[0].appendChild(oImg);
oBehaviorList.tBodies[0].rows[0].cells[0].onclick = function(){DelBehavior(aBehavior[0]);};
i = 0;
while(i < Math.min(aBehavior.length, oBehaviorList.tHead.rows[0].cells.length - 1))
{
oBehaviorList.tBodies[0].rows[0].insertCell(i + 1);
oTxt = document.createTextNode(aBehavior[i]);
oBehaviorList.tBodies[0].rows[0].cells[i + 1].appendChild(oTxt);
i++;
}
}
function DelBehavior(Index)
{
oBehaviorList = document.getElementById("BehaviorList");
aOldList = aBehaviorList;
aBehaviorList = new Array();
i = 0;
while(i < aOldList.length)
{
if(aOldList[i][0] == Index)
{
oBehaviorList.tBodies[0].deleteRow(i);
}
else
{
aBehaviorList.push(aOldList[i]);
}
i++;
}
}
</script>
</head>
<body>
<form action="#">
<input id="BehaviorInput" type="input" value="" /><input type="button" value="AddBehavior();" onclick="AddBehavior(this.previousSibling.value); this.previousSibling.value = ''"><br />
<table id="BehaviorList">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
 Conclusion
Si je poste ça, c'est pour montrer les possibilité du DHTML et du modèle DOM du Javascript. Déjà, tout est compatible Firefox/Internet Explorer, et ça permet de pas mal apprendre au niveau de la gestion des nodes et des tableaux. Alors j'espère que ça peut aider à comprendre le Javascript pour les débutants, parce que si ça, c'est compris, alors tout est compris !
++
L.S.
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|