Accueil > > > SELECT PERSONNALISABLE
SELECT PERSONNALISABLE
Information sur la source
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
- <!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.
Sources du même auteur
Sources de la même categorie
Commentaires et avis
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
|
Derniers Blogs
XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|