SELECT PERSONNALISABLE select, dhtml, css, Source N°38078

Information sur la source

Catégorie :Effets Classé sous : select, dhtml, css Niveau : Débutant Date de création : 12/06/2006 Vu / téléchargé: 13 768 / 1 118

Auteur : celeg

Ecrire un message privé

Note :

9,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<!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}

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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

select
- image
  - bg.png 146 octets
  - bg_select.png 371 octets
  - capture.jpg 22 237 octets
- select.html 2 087 octets
- select.js 5 031 octets

Télécharger le zip

Sources du même auteur

BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL

Toutes les sources de celeg

Sources de la même categorie

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

Commentaires

Commentaire de taz_iup le 21/06/2006 14:47:04

Salut je t'ai mis 9.
Voici les points négatifs:
   - le ul ne reste pas à la place du select d'origine
   - il manque une méthode pour mettre à jour le libelle du "titre"
   - les noms ne sont pas très explicites.
   - il manque quand même quelques commentaires.
   - Les styles (css annexes au fichier js) ne contiennent pas que de la mise en forme.

Sinon, tout le reste est impec ;).
Une jolie classe comme on les aime bien, gestion multi-navigateur,...
Commentaire de celeg le 21/06/2006 17:58:30

Merci TAZ_IUP, je desepérais d'avoir un retour de commentaire...

Je ne vois pas ce que tu veux dire par libelle du "titre" . Pour le reste je vais voir ce que je peux faire.
Commentaire de Rouanou le 06/10/2006 11:40:33

Pas mal sauf que j'ai un pb.

j'ai un div principal dans le body avec un height=100% (je suis obligé).
Du coup ton menu arrive complètement en bas de page.

J'ai essayé de jouer sur les css mais je n'arrive pas à ce qu'il se place dans la page.

As-tu une idée ?