CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:54:36

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 044 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PSEUDO SELECTBOX EN DHTML ...

Information sur la source

Catégorie :Trucs & Astuces Niveau : Débutant Date de création : 17/04/2005 Vu : 3 757

Auteur : LocalStone

Ecrire un message privé

Note :

9,00 / 10

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

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>

<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

RÉCUPERER LA LARGEUR D'AFFICHAGE D'UN TEXTE

DÉBUT D'UNE LIBRAIRE DE GESTION AVANCÉE DU STYLE ...

MACHINE DE TURING (ENTIÈREMENT CONFIGURABLE) ...

JEU DE LA VIE DE CONWAY ...

CONVERTISSEUR DE COULEUR RGB VERS HTML ET VICE VERSA

Toutes les sources de LocalStone

Sources de la même categorie

IPV4 AVEC RIP par totama

TRI DÉCROISSANT ET CROISSANT D'UN TABLEAU DYNAMIQUE REMPLIE ... par barbe91

TABLEAU ASSOCIATIF (DYNAMIQUE) par nopnop77

DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES... par abdelaziz_info

TROUVER LES FACTEURS D'UN NOMBRE par jdmcreator

Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de ThunderPsycho le 18/04/2005 08:24:37

Très intéressant... 9/10
Ca manque un peu de commentaires mais ton code est bien aéré...
C'est quand même bien plus pratique qu'une armée de input ou de textbox pour entrer une grosse quantité de données. :o)