Besoin d'aiguillage; jQuery ; Select
Bonjour matinale !
Le code appartient à ceux qui se léve tôt ! :D
Alors voilà le contexte ; je passe de wordpress vers Drupal pour mon site perso (Pour diverse raison =p)
J'étais tout content d'avoir finis la partie dév et j'étais en train de m'attaquer à la partie design et inté.
Quand je tombe sur un select (Et là je me maudis d'avoir eu la bonne idée de mettre une vue avec un filtre >.<).
J'ai trouvé divers script qui résoud en partie mon problèmes : Uniform JS, custom dropdown, etc. Mais bon cela ne correspond pas à mes besoins. Uniform étant celui qui s'en rapproche le plus : j'ai pu tout personaliser sauf le moment ou la souris passe en focus/hover sur les éléments du select. On remarque alors une vilaine bande orange... J'aime bien le orange, mais je voudrais que la bande disparaisse et que seule le texte en hover/focus change de couleur.
Heuuu vous avez saisis ? ^^'
Donc je suis parti sur une nouvelle démarche : (après lecture de quelque article à droite à gauche), en avant le custom JS ! Je vais "convertir" mon select en liste ul li.
Cacher le select avec un display : none.
Transformer ma liste ul li pour quelle se comporte comme un select.
Puis cliquer sur les éléments de la liste ul li, "influencerons" ceux du select caché, et je n'aurais plus qu'a cliquer sur mon submit button et le tour est joué o/ !
... Donc voilà, je vais vous afficher ce que je suis en train de faire pour que vous compreniez mieux. Je ne cherche pas un code prémaché à intégrer, je suis là pour chopper quelque conseil, voir un guide spirituel qui me détournera du droit chemin que je prends :roll:
Concrétement je sais pas si ce que je suis en train de faire est possible, ou si je me tortille du cul pour chier droit. Alors conseils, et critiques je suis preneur o/.
Le code Jquery : Pour l'instant je viens de terminer de "convertir" le select en ul li, j'update le code dès que je peux ;)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| if($('#views-exposed-form-villes').length > 0) {
var out = '<div id="form_select"><span>Toutes les Villes</span>';
out += '<ul>';
$('#select-ville option').each(function(e){
out += '<li><a href="">'+$(this).html()+'</a></li>';
});
out += '</ul>';
out += '</div>';
$(out).insertBefore($('#views-exposed-form-offres-de-logement-page'));
$
} |
Un select classique.
Code:
1
2
3
4
5
6
| <select id="select-ville" class="form-select">
<option selected="selected" value="All">Toutes les villes</option>
<option value="1">Paris</option>
<option value="2">Grenoble</option>
<option value="3">Marseille</option>
</select> |
