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é

[SpaceFrog]

ce n'est pas du code prémaché, c'est un exemple à paufiner ...

[Juda-Priest]

ce n'est pas du code prémaché, c'est un exemple à paufiner ...

Oui et merci .

Pour le input... Bah heeeu... J'ai juste caché les deux select et laissé le input initiale. Cela a l'air de fonctionné. Je ferais quelque test plus tard sur d'autre navigateur, et peut aussi un autre OS (... On sais jamais =D).

Mon problème maintenant ; c'est que ça marche... Mais c'est pas super top dans le cas ou j'ai deux select. Du coup je vais aussi essayer pendant que j'y suis d'en faire un plugin (Ce que je n'ai jamais fait )

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
41
42
43
44
 
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 ul').hide();
    }
 
    $('#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();
        var name = $(this).text();
        $('select[name=field_ville_tid] option:selected').removeAttr('selected');
        // deselects the previously-chosen-one (the Messi !) option
 
        $('select[name=field_ville_tid]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        // create a link between the select and the ul list
 
        $('#form_select span').text(name);// remplace le texte du span
        $('#form_select ul').toggle();
        return false; //Evite de refresh la page 'cuz <a>
    });
 
    $('#form_select span').click(function(){
        $('#form_select ul').toggle();
    });

Bon je suis un peu pris, j'essayerais de faire ça tranquilement ce week-end

[Juda-Priest]

Arf... Bon j'ai été beaucoup pris

Je m'y suis mis ce matin. Donc voilà une approche plus plug-in. Libre à vous de le fork. Vous en pensez quoi ?

http://jsfiddle.net/JudaPriest/qxaMm/



Pour ceux qui diront mais ça ressemble pas à un select... bah faut commencer à apprendre le css =p

[Juda-Priest]

Yop à tous !

Je remonte un sujet des abîmes je sais =x.

Mais j'ai 2 raisons : la premiere est que j'ai un peu optimisé le code ( Pas trop car il doit être compatible pour Jquery 1.4.4 =s... Vivement Drupal8 ).
Et la deuxieme je voulais venir édité le titre du sujet pour qu'il soit plus lisible pour ceux qui feraient une recherche... Mais je me suis aperçu qu'on ne peux plus éditer les messages précédent.

exemple : [Plugin]Convertir Select en liste
ou [Plugin]Personaliser une liste select

Je ne sais si ma requête de modification de titre est possible, ou si cela apportera grand chose à la lisibilité, mais bon...

[eomer212]

, rarement vu un tel tortillage de cul pour chier droit, si je paraphrase..
un select avec un css adequat, ca aurait tout de suite resolu le probleme...

le probleme original du bandeau orange, c'est que ton css est mal defini..
c'est la la source du probleme.

[Juda-Priest]

... Hmmm... Le style par défaut des select est défini par le navigateur et l'os. La bande orange résulte au moment du survol des éléments de la liste du select. Et je n'arrive pas à savoir comment en définir le css.

De même pour styler le "input de select" je n'y suis pas arrivé (du moins sans passer par un JS).

Après je serais ravi que tu me montre le CSS "bien défini" pour styler mes selects. Je gagnerais du temps .

Libre à toi de me fork ou de just poser un exemple de CSS ici pour appuyer tes propos .