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

Ce site au démarrage

begin process at 2012 02 14 04:37:44

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

PSEUDO SELECTBOX EN DHTML ...

Information sur la source

Note :

9,00 / 10

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

Auteur : LocalStone

Ecrire un message privé

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

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

COPIER DU TEXTE par m22001111

DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol

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)

Commentaire de Arto_8000 le 18/04/2005 23:32:38

Bien réussi ,mais est-ce que l'on peut avoir l'image pour supprimer ce sera sûrement plus beau que l'image avec un X de IE.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System