Я видел этот очень простой selectbox на youtube, где параметры выбора видны при наведении (вместо нажатия), как показано на следующем скриншоте.
Я пытаюсь создать аналогичный эффект в следующем простом поле выбора. Может кто-то, пожалуйста, помогите, как это можно сделать? Спасибо.
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
Вот один из способов сделать это, хотя я бы предпочел использовать более плагин (вместо жесткого кодирования 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).
});
Отредактировано, чтобы включить alert, демонстрируя изменения в значении элемента select: JS Fiddle demo.
Отредактировано, чтобы включить css и 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>
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;
}
Это заставляет меню скрывать элементы unselected до тех пор, пока ul не зависнет, а затем покажет все параметры и будет использовать click() для присвоения имени класса unselected для элементов без клика; который позволяет щелкнувшему элементу быть все еще видимым при мыши.
Вышеупомянутый CSS отражает самое последнее изменение, чтобы сделать отображаемые в настоящее время и :hover -ed, li более заметными.
Последняя демонстрация JS Fiddle.
Отредактировано, потому что, ну, мне стало немного скучно. И мне нечего было делать, поэтому я сделал простой плагин:
(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 demo, включая "плагин" .
Примечания:
select (что вы, безусловно, можете сделать, и работает нормально), он немного висит с потоком страниц (или много), но это может внесите поправки в CSS (я бы предположил, хотя я еще не пробовал).dl элементов вместо текущего ul, что позволит дать объяснение доступным параметрам.Отредактировано, потому что я чувствовал, что должен быть видимый элемент "руководства", а также попытаться объяснить, как все это работает.
Учитывая 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>
Используйте jQuery для вызова плагина:
$('#sizes').selectUl();
Это занимает вышеприведенный выбор и создает ul со следующей разметкой:
<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>
Используемый CSS (в демонстрации):
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;
}
Невозможно открыть поле select простым способом, которым вы описываете. Не случайно изображение, которое вы предоставили, не похоже на нормальный блок выбора. Это потому, что на самом деле это, скорее всего, список ul, который выглядит так, как он есть, показывая себя на зависании, что на самом деле возможно.
Я создал пример над jsfiddle о том, как это можно сделать.
Если вам интересно это сделать, у меня есть простой, не-javascript способ сделать это на мой текущий проект на самом деле (посмотрите на меню "Я хочу" наверху). Как сказал @Marcus, это не с полем выбора, но выполняется с неупорядоченным списком (<ul>).
html прост:
<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’s happening</a></li>
<li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>
Важной частью является css, по существу, только первые 2 правила. Похоже, что div расширяется из-за overflow:visible на :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
}
При работе в данный момент так не удается проверить youtube, но из стиля я предполагаю, что это "выбрать" элемент управления не является фактическим элементом управления. Скорее всего, он реализован как навигационное выпадающее меню, но вместо того, чтобы переходить к URL-адресу, он заменяет содержимое и значение входной метки. Затем в форме submit он может получить значение метки.
Ссылка на обновленный плагин jquery Forked $.selectUI plugin