6
Używam jQuery 1.11. Chcę uprościć wybrane listy rozwijane, ponieważ, spójrzmy prawdzie w oczy, domyślnie wygląda na do bani. Więc znalazłem kilka stylówJak naśladować zachowanie klawiatury w menu rozwijanym Wybierz styl?
.selectMenu {
font-family: 'Oxygen', sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 42px;
}
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
padding: 11px 12px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
.select-styled:hover {
background-color: #7b7b7b;
}
.select-styled:active, .select-styled.active {
background-color: #737373;
}
.select-styled:active:after, .select-styled.active:after {
top: 9px;
border-color: transparent transparent #fff transparent;
}
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: #737373;
overflow: scroll;
}
.select-options li {
margin: 0;
padding: 12px 0;
text-indent: 15px;
border-top: 1px solid #676767;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
.select-options li:hover {
color: gray;
background: #fff;
}
.select-options li[rel="hide"] {
display: none;
}
ul.select-options {
max-height: 15em;
overflow-y: scroll;
overflow-x: hidden;
}
i dodało ten jQuery
$(function() {
$('select').each(function(){
styleSelectMenu($(this));
});
});
// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;
/*** NEW - start ***/
var $paddingCalculator = $('<div />', {
'class' : "select-styled test"
}).css({
width : 0,
visibility : "hidden"
}).appendTo("body");
$this.addClass('select-hidden');
var paddingWidth = $paddingCalculator.outerWidth() + 10;
$paddingCalculator.remove();
//var selectWidth = $this.width() + paddingWidth;
var selectWidth = $this.outerWidth() + paddingWidth;
//alert(selectWidth);
if (!$this.parent().hasClass('select')) {
var $wrapper = $("<div />", {
'class' : "select"
}).css({
width : selectWidth
});
$this.wrap($wrapper);
} // if
/*** NEW - end ***/
if (!$this.next().hasClass('select-styled')) {
$this.after('<div class="select-styled"></div>');
} // if
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
if ($styledSelect.parent().find('ul').length > 0) {
$styledSelect.parent().find('ul').remove();
} // if
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
// This is the event when someone opens the list
$styledSelect.unbind('click')
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});
// This is the event when someone actually selects something from the list
$listItems.unbind('click.selectStyledItem')
$listItems.bind('click.selectStyledItem', function(event) {
clickListItem(event, $styledSelect, $this, $(this), $list);
});
$(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
});
var selectedIndex = $this[0].selectedIndex;
if (selectedIndex > 0) {
var name = $this.attr("name")
var selectedText = $("select[name='" + name + "'] option:selected").text();
selectItemFromStyledList($styledSelect, $this, selectedText, $list);
} // if
}
// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide)
{
$(styledSelect).text(selectedText).removeClass('active');
$(selectMenu).val($(selectMenu).attr('rel'));
$(listToHide).hide();
// Select option in the underlying list so that the form gets submitted
// with the right values
selectedOption = $(selectMenu).find("option").filter(function() { return $(this).html() == selectedText; });
$(selectMenu).find("option[selected='selected']").removeAttr("selected");
$(selectedOption).attr("selected","selected");
} // selectItemFromStyledList
function clickListItem(event, styledSelect, selectMenu, listItemClicked, list)
{
var $styledSelect = $(styledSelect);
var $selectMenu = $(selectMenu);
var $listItem = $(listItemClicked);
var $list = $(list);
event.stopPropagation();
var selectedText = $listItem.text();
selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
} // clickListItem
skrzypcach ilustrujący to tutaj - http://jsfiddle.net/cwzjL2uw/1/. Problem polega na tym, że mimo że osiągnąłem ten styl, nie udało mi się zreplikować zachowania klawiatury, jakie ma normalne menu wyboru. Moje pytanie brzmi: jak mogę sprawić, by moje menu zachowywało się tak, że gdy kliknę literę "A", pierwszy element "A" zostanie wybrany (w tym przypadku "Alabama"), tak jak zachowuje się normalne menu wyboru.
nasłuchiwać naciśnięcia klawisza, gdy menu jest aktywne? – epascarello
Skoro oznakowałeś 'jquery-ui', to co powiesz na używanie autouzupełniania? (http://jqueryui.com/autocomplete/) - czy można uaktualnić jquery lub czy utknąłeś przy użyciu 1.11? – ochi