Select personnalisable

Télécharger le projet
Commenter

Description

Toujours dans la meme optique,que ma 1er source, ce script permet de remplacer une balise select (et de recuperer les options qui le constitu) par
une liste de type ul. Comme ca sous ie on peut gerer un select de maniere différente et spprimer le bug d'affichage.

On a le document html , la feuille de style et le js,1 image qui reprend 3 etats (onmouseover,out,click).
Comme ca meme si le javascript est desactivé le select reste en place.
Le css permet de gerer la mise en forme.

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Select perso</title>
<style type="text/css">

</style>
<script src="select.js"></script>
</head>
<body>
	<select id="select_0" >
		<option value="#titre">Choisir le lien</option>
		<option value="#Lien 1" class="opt">Texte Lien 1</option>
		<option value="#Lien 2" class="opt">Texte Lien 2</option>
		<option value="#Lien 3" class="opt">Texte Lien 3</option>
		<option value="#Lien 4" class="opt">Texte Lien 4</option>
		<option value="#Lien 5" class="opt">Texte Lien 5</option>
	</select>
	
	
</body>

</html>

dans un css :

BODY	{background:url(image/bg.png);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:x-small;line-height:13px;}
.selecteur, .selecteur_liste	{display:block;padding:0;margin:0;width:152px;height:auto;list-style:none}
.selecteur LI	{display:block;height:13px;background:#dadada}
.selecteur LI.titre	{width:auto;height:auto;border:#666666 1px solid}
.selecteur A	{display:block;width:auto;height:13px;background:url(image/bg_select.png) no-repeat;text-indent:5px;text-decoration:none;color:#666666}
.selecteur LI.titre A:hover	{background:url(image/bg_select.png) no-repeat 0 -13px}
.selecteur_liste{clear:both;z-index:0;position:absolute;height:50px;overflow:auto;border:#666666 1px solid;border-top:#dadada 1px solid}
.selecteur_liste LI.opt A	{color:#666666;text-decoration:none}
.selecteur_liste LI.opt A:hover	{background:#FFFFFF;color:red}

Conclusion :


Verion 0.1b.

Tester seulement sous firefox et ie6, donc si d'autre personne on d'autre navigateur merci de me donner les erreurs svp.
Probleme de Gestion du onblur sous ie mais pas sous firfox. La aussi si quelqu'un a une idée merci de m'en faire part.

J'attend vos commentaire pour 'aider a ameliorer mes scripts.
Télécharger le projet

Codes Sources

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 (celeg)