Combobox de taille infèrieur à son contenu

Soyez le premier à donner votre avis sur cette source.

Snippet vu 11 335 fois - Téléchargée 32 fois

Contenu du snippet

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 / Exemple :


<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.

A voir également

Ajouter un commentaire

Commentaires

misterdarth
Messages postés
14
Date d'inscription
vendredi 28 février 2003
Statut
Membre
Dernière intervention
10 novembre 2004

Oui. Ce qui m'agace c'est que, sous netscape, event.srcElement doit pouvoir etre remplacer par event.target ( d'apres ce que j'ai compris ). Mais ça ne marche toujours malgres ces changements.
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
c'est domage que ça ne passe pas avec mozilla...
misterdarth
Messages postés
14
Date d'inscription
vendredi 28 février 2003
Statut
Membre
Dernière intervention
10 novembre 2004

Visiblement c'est "event.srcElement;" qui pose probleme puisqu'existant sous explorer mais pas sous netscape. Il semble egalement que event soit implicit sous IE mais qu'il faille le declarer sous Netscape. Je jetterai un coup d'oeil demain à moins que quelqu'un puisse m'orienter sur la façon dont il faut gerer l'objet event.
misterdarth
Messages postés
14
Date d'inscription
vendredi 28 février 2003
Statut
Membre
Dernière intervention
10 novembre 2004

Je n'ai pas testé avec mozilla mais seulement avec IE 6. Mais effectivement avec firefox le bouton apparait bizarrement et les fonctions semblent inactives.
fg85
Messages postés
370
Date d'inscription
dimanche 28 mars 2004
Statut
Membre
Dernière intervention
13 avril 2007

Même en changeant/enlevant le code asp . Le script javascript n'est pas comptable avec mozilla , à mon avis l'erreur doit être toute simple, encore faut t'il la trouvé ;-)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.