Accueil > > > COMBOBOX DE TAILLE INFÈRIEUR À SON CONTENU
COMBOBOX DE TAILLE INFÈRIEUR À SON CONTENU
Information sur la source
Description
Lors d'un de mes developpement, il m'etait nécessaire de caser des listes déroulantes dans un tableau. Malheureusement, le contenu des listes forçait la taille de mon tableau et, de ce fait, cassait l'esthetisme de mon site ( bouh :'( ). Apres moulte recherche, je suis tombé sur un code trop spécifique pour l'utiliser à plusieurs reprises dans une meme page ( http://www.javascriptfr.com/code.aspx?ID=15939 ). Apres une journée de travail, voici le résultat de mon bidouillage pour rendre ce code "dynamique"
Source
- <script language="JavaScript" type="text/javascript">
-
- // Tableaux contenant les éléments de la liste.
- var Obj1Table;
- Obj1Table= new Array();
- Obj1Table[0]="http://phidels.com/";
- Obj1Table[1]="http://www.codes-sources.com";
- Obj1Table[2]="http://www.delphifr.com";
- Obj1Table[3]="http://www.asp-irine.com";
- Obj1Table[4]="http://msdn.microsoft.com/library";
- Obj1Table[5]="http://www.asp-magazine.com";
- Obj1Table[6]="http://devedge.netscape.com/";
- Obj1Table[7]="http://www.w3.org";
- Obj1Table[8]="http://www.laltruiste.com";
- Obj1Table[9]="http://www.3dvf.com";
- Obj1Table[10]="http://www.allapi.net";
- Obj1Table[11]="http://www.wotsit.org";
- Obj1Table[12]="http://therionweb.de/";
- Obj1Table[13]="http://www.asp-php.net/";
- Obj1Table[14]="http://phidels.com/";
-
-
- var Obj2Table;
- Obj2Table= new Array();
- Obj2Table[0]="Marie-Louise Dupont";
- Obj2Table[1]="Marie-Chantale Dupont";
- Obj2Table[2]="Stéphane de la Brigandiere";
- Obj2Table[3]="Jean-Martin du Chateau le Neuf";
- Obj2Table[4]="John Fitzgerald Kennedy";
- Obj2Table[5]="Machin avec un sacré nom à rallonge";
-
-
-
- // Classe les listes par ordre alphabétique.
- Obj1Table.sort();
- Obj2Table.sort();
-
-
- // Mise en sur brillance de l'élément survolé.
- function RollOver()
- {
- var objet;
- objet=event.srcElement;
- objet.style.backgroundColor="highlight";
- objet.style.borderWidth="1";
- objet.style.borderStyle="dashed";
- objet.style.borderColor="black";
- objet.style.color="white";
- }
-
- // Retour à l'état normal de l'élément de la liste.
- function RollOut()
- {
- var objet;
- objet=event.srcElement;
- objet.style.backgroundColor="white";
- objet.style.borderWidth="0";
- objet.style.color="black";
- }
-
- // Efface toutes les cellules du tableau.(Tous les éléments de la liste)
- function EffacCell(h)
- {
- // Construction du nom de la table liste(i)
- var liste = 'liste'+h
-
- var e;
- e=new Enumerator(eval(liste).rows);
- for (;!e.atEnd();e.moveNext())
- {
- eval(liste).deleteRow(e.item().rowIndex);
- }
- }
-
- // Affiche la liste lorsque l'on click sur la flèche.
- function Deroule(MonDiv,N)
- {
- // Construit le nom du Div Obj(i)Cadre
- var cadre = MonDiv.id+'Cadre';
- // Construit le nom de la table javascript Obj(i)Table ( cf plus haut )
- var MaTable = MonDiv.id+'Table';
- // Construit le nom du bouton down(i)
- var down = 'down'+N
- // Construit le nom de la table dans laquelle le texte va s'afficher
- var liste = 'liste'+N
-
- var e, objet;
- objet=event.srcElement; // Efface la liste pour éviter qu'elle se
- EffacCell(N); // répète.
- if (objet.id!=down)
- { // Cache la liste si l'on a pas clicker
- eval(cadre).style.visibility="hidden"; // sur la flèche.
- }
- else
- {
- for (i=0;i<MaTable.length;i++)
- { // Crée tous les éléments de la liste.
- var ligne, cellule;
- ligne=eval(liste).insertRow(); // Insère une ligne dans le tableau.
- cellule=ligne.insertCell(); // Insère une cellule dans la ligne.
- with (cellule)
- {
- noWrap=true; // Définit les propriétés
- style.cursor="default"; // et événements.
- onmouseout=RollOut;
- onmouseover=RollOver;
- innerHTML=eval(MaTable)[i]; // Insère le texte dans la cellule.
- }
- }
- eval(cadre).style.visibility="visible";
- }
- }
-
- // Copie la ligne choisie dans la textbox et
- // Ferme le cadre
- function FermeCadre(MonDiv,N)
- {
- var cadre = MonDiv.id
- // ATTENTION, le nom du FORM est fixe
- var champ = 'document.form.'+MonDiv.id+'Champ'
- var objet;
- objet=event.srcElement;
- eval(champ).value=objet.innerHTML;
-
- eval(cadre).style.visibility="hidden";
- }
-
- </script>
-
-
- </head>
-
- <form name="form">
- <table width="200" border=1>
- <tr>
- <td>
- <%
- ' Et en prime la fonction ASP pour construire les éléments nécessaire
- function PetiteCombo(NumCombo,WidthTable,SizeTxt)
- 'Numéro d'idetification de la combo
- i= NumCombo
- 'Taille de la table contenant la liste d'élément
- TailleTable = WidthTable
- Taille de la textbox
- TailleTxt = SizeTxt
-
- response.write "<div nowrap id=""Obj"&i&""" style=""border-width:2;border-style:inset;border-color:white;width:0;display:inline;"" onclick=""javascript:Deroule(this,"&i&");"">"&vbcrlf
- response.write " <input type=""text"" readonly value="""" name=""Obj"&i&"CadreChamp"" size="&TailleTxt&""" >"&vbcrlf
- response.write " <input id=""down"&i&""" type=""button"" value=""6"" style=""line-height:0;height:18;font-family:webdings;font-size:10;"">"&vbcrlf
- response.write "</div><br>"&vbcrlf
-
- response.write "<div id=""Obj"&i&"Cadre"" style=""position:absolute;height:100;visibility:hidden;background-color:white;border-width:1;border-style:solid;border-color:black;overflow-x:hidden;overflow-y:scroll;"" onclick=""javascript:FermeCadre(this,"&i&");"">"&vbcrlf
- response.write " <table id=""liste"&i&""" width="&TailleTable&""" border=""0"" cellpadding=""0"" cellspacing=""0""></table>"&vbcrlf
- response.write "</div>"
- end function
-
- 'Appelle de la fonction pour créer une premiere combo
- PetiteCombo 1,260,20
- %>
- </td>
- </tr>
- <tr>
- <td>
- <%
- 'Création d'une deuxieme Combo
- PetiteCombo 2,260,20
- %>
-
- </td>
- </tr>
- </table>
- <br>
- <!-- Pour vérifier que ma combo passe bien au-dessus d'un texte
-
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
- <br>BLABLA
-
- </form>
- </body>
- </html>
<script language="JavaScript" type="text/javascript">
// Tableaux contenant les éléments de la liste.
var Obj1Table;
Obj1Table= new Array();
Obj1Table[0]="http://phidels.com/";
Obj1Table[1]="http://www.codes-sources.com";
Obj1Table[2]="http://www.delphifr.com";
Obj1Table[3]="http://www.asp-irine.com";
Obj1Table[4]="http://msdn.microsoft.com/library";
Obj1Table[5]="http://www.asp-magazine.com";
Obj1Table[6]="http://devedge.netscape.com/";
Obj1Table[7]="http://www.w3.org";
Obj1Table[8]="http://www.laltruiste.com";
Obj1Table[9]="http://www.3dvf.com";
Obj1Table[10]="http://www.allapi.net";
Obj1Table[11]="http://www.wotsit.org";
Obj1Table[12]="http://therionweb.de/";
Obj1Table[13]="http://www.asp-php.net/";
Obj1Table[14]="http://phidels.com/";
var Obj2Table;
Obj2Table= new Array();
Obj2Table[0]="Marie-Louise Dupont";
Obj2Table[1]="Marie-Chantale Dupont";
Obj2Table[2]="Stéphane de la Brigandiere";
Obj2Table[3]="Jean-Martin du Chateau le Neuf";
Obj2Table[4]="John Fitzgerald Kennedy";
Obj2Table[5]="Machin avec un sacré nom à rallonge";
// Classe les listes par ordre alphabétique.
Obj1Table.sort();
Obj2Table.sort();
// Mise en sur brillance de l'élément survolé.
function RollOver()
{
var objet;
objet=event.srcElement;
objet.style.backgroundColor="highlight";
objet.style.borderWidth="1";
objet.style.borderStyle="dashed";
objet.style.borderColor="black";
objet.style.color="white";
}
// Retour à l'état normal de l'élément de la liste.
function RollOut()
{
var objet;
objet=event.srcElement;
objet.style.backgroundColor="white";
objet.style.borderWidth="0";
objet.style.color="black";
}
// Efface toutes les cellules du tableau.(Tous les éléments de la liste)
function EffacCell(h)
{
// Construction du nom de la table liste(i)
var liste = 'liste'+h
var e;
e=new Enumerator(eval(liste).rows);
for (;!e.atEnd();e.moveNext())
{
eval(liste).deleteRow(e.item().rowIndex);
}
}
// Affiche la liste lorsque l'on click sur la flèche.
function Deroule(MonDiv,N)
{
// Construit le nom du Div Obj(i)Cadre
var cadre = MonDiv.id+'Cadre';
// Construit le nom de la table javascript Obj(i)Table ( cf plus haut )
var MaTable = MonDiv.id+'Table';
// Construit le nom du bouton down(i)
var down = 'down'+N
// Construit le nom de la table dans laquelle le texte va s'afficher
var liste = 'liste'+N
var e, objet;
objet=event.srcElement; // Efface la liste pour éviter qu'elle se
EffacCell(N); // répète.
if (objet.id!=down)
{ // Cache la liste si l'on a pas clicker
eval(cadre).style.visibility="hidden"; // sur la flèche.
}
else
{
for (i=0;i<MaTable.length;i++)
{ // Crée tous les éléments de la liste.
var ligne, cellule;
ligne=eval(liste).insertRow(); // Insère une ligne dans le tableau.
cellule=ligne.insertCell(); // Insère une cellule dans la ligne.
with (cellule)
{
noWrap=true; // Définit les propriétés
style.cursor="default"; // et événements.
onmouseout=RollOut;
onmouseover=RollOver;
innerHTML=eval(MaTable)[i]; // Insère le texte dans la cellule.
}
}
eval(cadre).style.visibility="visible";
}
}
// Copie la ligne choisie dans la textbox et
// Ferme le cadre
function FermeCadre(MonDiv,N)
{
var cadre = MonDiv.id
// ATTENTION, le nom du FORM est fixe
var champ = 'document.form.'+MonDiv.id+'Champ'
var objet;
objet=event.srcElement;
eval(champ).value=objet.innerHTML;
eval(cadre).style.visibility="hidden";
}
</script>
</head>
<form name="form">
<table width="200" border=1>
<tr>
<td>
<%
' Et en prime la fonction ASP pour construire les éléments nécessaire
function PetiteCombo(NumCombo,WidthTable,SizeTxt)
'Numéro d'idetification de la combo
i= NumCombo
'Taille de la table contenant la liste d'élément
TailleTable = WidthTable
Taille de la textbox
TailleTxt = SizeTxt
response.write "<div nowrap id=""Obj"&i&""" style=""border-width:2;border-style:inset;border-color:white;width:0;display:inline;"" onclick=""javascript:Deroule(this,"&i&");"">"&vbcrlf
response.write " <input type=""text"" readonly value="""" name=""Obj"&i&"CadreChamp"" size="&TailleTxt&""" >"&vbcrlf
response.write " <input id=""down"&i&""" type=""button"" value=""6"" style=""line-height:0;height:18;font-family:webdings;font-size:10;"">"&vbcrlf
response.write "</div><br>"&vbcrlf
response.write "<div id=""Obj"&i&"Cadre"" style=""position:absolute;height:100;visibility:hidden;background-color:white;border-width:1;border-style:solid;border-color:black;overflow-x:hidden;overflow-y:scroll;"" onclick=""javascript:FermeCadre(this,"&i&");"">"&vbcrlf
response.write " <table id=""liste"&i&""" width="&TailleTable&""" border=""0"" cellpadding=""0"" cellspacing=""0""></table>"&vbcrlf
response.write "</div>"
end function
'Appelle de la fonction pour créer une premiere combo
PetiteCombo 1,260,20
%>
</td>
</tr>
<tr>
<td>
<%
'Création d'une deuxieme Combo
PetiteCombo 2,260,20
%>
</td>
</tr>
</table>
<br>
<!-- Pour vérifier que ma combo passe bien au-dessus d'un texte
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
</form>
</body>
</html>
Conclusion
Il ne reste plus qu'à créer les table dynamiquement et, probablement, à optimiser le code. A noter que le nom du form est fixe ( dans cet exemple il s'appelle "form". la fonction eval en javascript permet d'executer du javascript à partir d'une chaine de texte.
Historique
- 10 mai 2007 12:42:45 :
- ajout de mot clef
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
taille d'un SELECT [ par djog ]
Bonjour à tousJ'ai besoin de votre aideJe cherche à créer une liste déroulante spéciale : La taille horizontale d'une liste d
Besoin d'aide sur une liste déroulante [ par emeraudes ]
bonjour, je voudrai savoir comment faire pour remplir des zones de text (en bleu) lorsque je selectionne un item (en rouge) d'une liste déroulan
Dimensionner automatiquement un frame en fonction de la taille de la page contenue [ par MadM@tt ]
Salut à tous,voilà j'utilise un frame qui m'affiche des pages pouvant varier en taille de l'une à l'autreCe que je veux c'est que le fr
pb d'affichage combo popup HELP ME [ par patinaroulette ]
voici le probleme j'ai un bouton lorsque je clique dessus un popup s'ouvre j'ai aussi une combo box et diverses autres zones de texte lors de l'affich
sélection d'une option identifiée -->liste déroulante [ par tousimages ]
Mon objectif est de sélectionner automatique dans les listes déroulantes l'option préalablement enregistrée.Je m'explique :
Liste déroulante et onChange [ par sebalex ]
Bonjour à tous,J'ai dans le même formulaire un Select reprenant les données d'une BD ainsi que plusieurs Input Type Texte. Je souhaite
taille de page [ par overbrave ]
Salut Dieu du code, j'ai chercher mais n'ai pas trouver...Coment peut on définir la taille d'une page et quel reste a sa taille défini?Je pa
la taille d un bouton ? [ par mous95 ]
Bonjour j ai 4 boutons mais qui ne sont pas de la mme taille car le libélé est different, j aimerai imposai une taille unilque aux quatres
choisir l'element sélectionné par défaut dans une liste déroulante [ par nico_ayci ]
salut à tous ! je voudrais savoir s'il est possible en javascript de choisir l'element sélectionné par défaut dans une liste d
taille zone de texte [ par jackrichard ]
Bonjour a tousVoila j'ai une zone de texte dont je voudrais limiter le nombre de caractère si quelqu'un pourrait me dire comment faire avec un pe
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
Comparez les prix

HTC Magic
Entre 429€ et 429€
|