web-dev-qa-db-fra.com

Html Sélectionnez les options de la boîte sur le survol?

J'ai vu cette zone de sélection très simple sur youtube, où les options de sélection sont visibles en survol (au lieu de cliquer), comme le montre la capture d'écran suivante.

alt text

J'essaie de créer un effet similaire dans la zone de sélection simple suivante. Quelqu'un peut-il s'il vous plaît aider comment cela peut être fait? Merci.

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select>
htmlcsshtml-select
10
John

Voici une façon de le faire, même si je préférerais une approche plus plug-in (plutôt que de coder en dur le code HTML ul):

$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

JS Fiddle démo .

Edited pour inclure une alert démontrant les modifications apportées à la valeur de l'élément select: JS Fiddle demo .

Edited pour inclure les fichiers CSS et HTML utilisés dans la démo:

html

<select name="size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>

<ul id="selectUl">
    <li>small</li>
    <li>medium</li>
    <li>large</li>
</ul>

css:

select {
    opacity: 0.5;
}
ul {
    width: 8em;
    line-height: 2em;
}

li {
    display: list-item;
    width: 100%;
    height: 2em;
    border:1px solid #ccc;
    border-top-width: 0;
    text-indent: 1em;
    background-color: #f90;
}
li:first-child {
    border-top-width: 1px;
}

li.unselected {
    display: none;
    background-color: #fff;
}
ul#selectUl:hover li.unselected {
    background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
    display: list-item;
}
ul#selectUl:hover li {
    background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
    background-color: #f90;
}

Cela force le menu à masquer les éléments unselected jusqu'à ce que la ul soit survolé, puis affiche toutes les options et utilise l'événement click() pour affecter le nom de la classe unselected aux éléments non cliqués. ce qui permet à l’élément cliqué d’être toujours visible lors du mouseout.

Le code CSS ci-dessus reflète la modification la plus récente, afin de rendre plus visible la sélection actuellement sélectionnée et :hover-, li.

Dernière démo de JS Fiddle .

Edité parce que je me suis un peu ennuyé. Et comme je n'avais rien de mieux à faire, j'ai donc créé un plug-in simple:

(function($) {
    $.fn.selectUl = function(){
        var $origSelect = $(this);
        var newId = $(this).attr('name') + '-ul';
        var numOptions = $(this).children().length;

        $('<ul id="' + newId + '" class="plainSelect" />')
            .insertAfter($(this));

        for (var i = 0; i < numOptions; i++) {
            var text = $(this).find('option').eq(i).text();
           $('<li />').text(text).appendTo('#' + newId);
        }

        if ($(this).find('option:selected')) {
            var selected = $(this).find('option:selected').index();
            $('#' + newId)
                .find('li')
                .not(':eq(' + selected + ')')
                .addClass('unselected');
        }

        $('#' + newId + ' li')
            .hover(
                function(){
                    $(this).click(
                        function(){
                            var newSelect = $(this).index();
                            $(this)
                                .parent()
                                .find('.unselected')
                                .removeClass('unselected');
                            $(this)
                                .parent()
                                .find('li')
                                .not(this)
                                .addClass('unselected');
                            $($origSelect)
                                .find('option:selected')
                                .removeAttr('selected');
                            $($origSelect)
                                .find('option:eq(' + newSelect + ')')
                                .attr('selected',true);
                        });
                },
                function(){
            });
                    // assuming that you don't want the 'select' visible:
                    $(this).hide();

        return $(this);
    }
        })(jQuery);


$('#sizes').selectUl();

JS Fiddle démo, y compris le 'plug-in' .

Remarques:

  • Ce n'est pas absolument positionné, donc si vous avez plus d'une selectce que vous pouvez certainement faire et fonctionne bien), il _ (faitvisse avec le flux de page un peu (ou beaucoup), mais cela peut être modifié dans le CSS (j'imagine, même si je n'ai pas encore essayé).
  • Cela pourrait probablement se faire avec certaines options, en permettant éventuellement aux éléments dl d'être utilisés à la place de la ul actuelle, ce qui permettrait d'expliquer les options disponibles.
  • Je pense que cela pourrait être optimisé beaucoup plus qu’il ne l’est actuellement, mais je ne suis pas sûr de rien. Peut-être un peu de sommeil et, plus tard, une navigation tardive dans l’API jQuery pourrait donner quelques indications (bien que si quelqu'un voit quelque chose d’évident, veuillez laisser un commentaire! Ou prenez le JS Fiddle et, faute meilleur terme, fourchez-le (bien que j'apprécie évidemment les liens vers des forks/mises à jour ultérieurs).
  • Je ne suis pas tout à fait sûr des options de licence dont je dispose (puisque tout sur SO est Creative Commons cc-by-sa , selon Jeff Atwood , et le footer de ce site, quand même), mais pour ce que ça vaut, je suis plutôt heureux que quiconque prenne ce qui précède et, bien, fait ce que vous voulez avec lui (si cela vous est utile, amusez-vous!).

Edited parce que j’ai pensé qu’il devrait y avoir un élément de "guidage" visible, et aussi pour essayer d’expliquer un peu comment tout cela fonctionne.

Étant donné le html:

<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

Utilisez jQuery pour appeler le plugin:

$('#sizes').selectUl();

Cela prend la sélection ci-dessus et crée une ul avec le balisage suivant:

<ul id="sizes-ul" class="plainSelect">
    <li class="guidance">Select a size:</li>
    <li>XX-Small</li>
    <li class="unselected">X-Small</li>
    <li class="unselected">Small</li>
    <li class="unselected">Medium</li>
    <li class="unselected">Large</li>
    <li class="unselected">X-Large</li>
    <li class="unselected">XX-Large</li>
</ul>

Le CSS utilisé (dans la démo):

ul.plainSelect {
    /* targets those 'ul' elements created by the plug-in */
    border: 1px solid #000;
}
ul.plainSelect li {
    /* this styles the 'selected' li 'option' element */
    background-color: #f90;
    display: list-item;
}
ul.plainSelect li.guidance {
    /* this is the 'Select a Reason' guidance/explanation from the image in the question */
    border-bottom: 1px solid #000;
    padding: 0.3em;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #fff;
}

ul.plainSelect li.unselected {
    /* hides the 'unselected' options, and removes the background-color for contrast */
    background-color: #fff;
    display: none;
}

ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
    /* ensures that the 'li' elements pop-up when the list is hovered over, */
    /* and act/display like 'li' elements */
    display: list-item;
}

JS Fiddle démo .

32
David Thomas

Il est impossible d'ouvrir une boîte select de la manière la plus claire que vous décrivez. Ce n'est pas un hasard si l'image que vous avez fournie ne ressemble en rien à une boîte de sélection normale. En effet, il s’agit probablement d’une liste ul dont le style ressemble à ce qu’elle se présente, qui se révèle en survol, ce qui est effectivement possible.

J'ai créé un exemple plus sur jsfiddle de la façon dont cela pourrait être fait.

5
Marcus Whybrow

Si vous souhaitez le faire de cette manière, j'ai une façon simple et non javascript de le faire sur mon projet actuel en fait (regardez le menu "Je veux" en haut). Comme @Marcus l'a dit, il ne s'agit pas d'une zone de sélection, mais d'une liste non ordonnée (<ul>).

Le code HTML est simple: 

<div id="iWantToMenuContainer">
<ul id="i-want-to" class="menu">
    <li><a href="http://cumberlandme.info/contact">contact the town office</a></li>
    <li><a href="http://cumberlandme.info/upcoming-events">find out what&#8217;s happening</a></li>
    <li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>

la partie importante est le css, essentiellement les 2 premières règles. La div semble se développer à cause du overflow:visible sur :hover.

#iWantToMenuContainer {
    overflow:hidden;
}
#iWantToMenuContainer:hover {
    overflow:visible
    }
#iWantToMenuContainer ul {
    border:1px solid #b6c2b9;
    background:#fff;
    padding:1px 20px 3px 5px
    }
#iWantToMenuContainer a:link,#iWantToMenuContainer a:visited {
    display:block;
    background: #fff;    
}
#iWantToMenuContainer a:hover {
    background:#e6e6e6
    }
4
JakeParis

Au travail en ce moment, donc je ne peux pas vérifier youtube, mais d'après le style, je suppose que le contrôle "select" n'est pas un contrôle de sélection réel. Très probablement, il est implémenté comme un menu déroulant de navigation mais au lieu de naviguer vers une URL sur un clic, il remplace le contenu et la valeur d'une étiquette d'entrée. Ensuite, sur le formulaire de soumission, il peut récupérer la valeur de l'étiquette.

0
Adrian

Lien vers le plugin jquery mis à jour Plugin $ .selectUI

  • Corrige l'itération sur plusieurs éléments passés
0
Bob Gregor