Combobox de taille infèrieur à son contenu

Commenter

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

S'inscrire maintenant

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.

Du même auteur (misterdarth)