begin process at 2010 03 13 21:56:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > SELECT PERSONNALISABLE

SELECT PERSONNALISABLE


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :select, dhtml, css Niveau :Débutant Date de création :12/06/2006 Vu / téléchargé :21 077 / 1 422
Auteur : celeg

Ecrire un message privé
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL
Toutes les sources de celeg

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator
Source avec Zip Source avec une capture [MEC] MENUS EN CSS par Bul3

Commentaires et avis

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 ?

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

DHTML - Formulaire - Input File - Style CSS [ par asgarden ] Bonjour,Voilà cela fait un petit moment que je cherche comment modifier le style d'un champs de formulaire de type FILE ?J'ai beau essayer, rien n'y f affichage du site, CSS [ par blinix123 ] J'ai mon site, et j'aimerais qu'il soit fixe, j'entends par la que j'aimerais que la page soit fixe et que si jamais je la rétrécis, la forme de la pa Simpe question HTML et CSS [ par syndrael ] Bonjour, J'ai une image et un bouton radio que je place dans un TD. Comment puis je faire pour que ces deux éléments soient l'un au dessus de l'autre, gros probleme de css [ par stefbuet ] j'ai un gros problemme : j'ai mon site, avec une page html et un fichier css, quand je ne suis pas connecté a internet, l'affichage marche correctemen Feuille de style [ par Jossdoit ] Bonjour,Je developpe actuellement un site web et j'utilise du CSS. Je trouve ca bien sympas mais je voulais savoir si il etait possible d'utiliser le création d'un imput text générer par un select dynamique (PHP+SQL) dans un formulaire [ par Ullir ] J'ai de gros problemes de surchauffe de matiere grise !!! Débutant en code PHP, je mélange quelques codes ( html - javascript - php - sql Comment faites vous pour attribuer du CSS à vos pubs AdSense ? [ par bouazza92 ] Salut tous et toutes ,voilà , j'ai récemmement crée un compte AdSense chez Google , mais ça me rapporte que peu de centimes , j'ai donc l'idée de pers création d'un imput text générer par un select dynamique (PHP+SQL) dans un formulaire [ par Ullir ] J'ai de gros problemes de surchauffe de matiere grise !!! Débutant dans les langages informatiques, je mélange quelques codes ( html - javasc triple liste déroulante dynamique [ par ahcorad ] voila j'aimerais faire une liste déroulante dynamique sans recharger la page ! (catégorie, sous_cat et objets) je n'arrive seulement à faire fonctionn Propriété CSS [ par xactise ] Bonjours voila dans mon fichier css j'ai ce petit bout de code :  TABLE:hover{  background-color : #DDDDDD; }Ce petit bout de code fonctionne très bie


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix


Console Sony Playstation 3 80GB
Entre 398€ et 425€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)