Discussion :

[Juda-Priest]

Bonjour matinale !

Le code appartient à ceux qui se léve tôt !

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

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#edit-field-ville-tid option').each

each sur un selecteur id ???


un id doit être unique sur une page

[Juda-Priest]

Hihihi ^^' J'ai remplacé #edit-field-ville-tid par #select-ville pour que cela soit plus lisible.

Bah ce que je veux faire c'est un each sur chaque "option" du select avec l'id "select-ville", non ?

[SpaceFrog]

ha ok j'avais zappé option

[Bovino]

A part ça, l'idée est correcte. Reste ensuite à lier la liste et le champ.
Dans l'esprit, ce serait gérer le clic sur les items de la liste pour affecter la valeur ad hoc sur le select et masquer la liste. Pour ça, tu peux passer par un attribut data-* sur les li qui te permettra de connaitre la valeur associée du select.
Ensuite, le problème, c'est que si ton select est masqué, il risque de ne pas être transmit à la soumission du formulaire.
Tu devras donc rajouter un input hidden pour récupérer la valeur et la transmettre au serveur via le formulaire.

[SpaceFrog]

un truc dans ce style là ? http://jsfiddle.net/BGXEu/

ou selection unique:
http://jsfiddle.net/BGXEu/2/

[Juda-Priest]

@SpaceFrog Rôh ! On avais dis pas de code prémaché

@Bovino D'accord merci. Je vais me renseigner sur les data-*, j'ai utilisé une autre méthode pour le moment.

En tout cas j'ai avancé. Je poste le nouveau code sans tenir compte de vos remarques pour le moment.

J'ai effectivement lié les deux liste, et avec un show/hide je cache ce que je ne veux pas voir.
La prochaine étape est de changer le contenu du Span avec celui du li/option sélectioné.

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    if($('#views-exposed-form-offres-de-logement-page').length > 0) {
        var out = '<div id="form_select"><span>Offres par villes</span>';
        out += '<ul>';
        $('#edit-field-ville-tid > 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'));
    // Copy select content and made it into a ul list
    }
 
    $('#form_select li:not(":first")').addClass('unselected');
    //add class unselected to all li except the 1rst child
 
    $('#form_select').find('li').click(
            function(){
        $('.unselected').removeClass('unselected');
        // remove unselected 
 
        $(this).siblings('li').addClass('unselected');
        // add unselected à tout les autres li
 
        var index = $(this).index();
        $('select option:selected').removeAttr('selected');
        // deselects the previously-chosen option in the select
 
        $('select[name=field_ville_tid]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        // create a link between the select and the ul list
 
        $('#form_select ul').hide();
        return false;
    });
 
    $('#form_select span').click(function(){
        $('#form_select ul').show();
    });

P.S. : Les commentaires en franglais c'est normal =p
P.P.S : Je vous remercie de vos remarques, je me penche toute de suite sur ce que vous m'avez montré