0
頁面
上我想創建一個風格的選擇菜單，用戶可以交互。儘管我對它進行了設計，但我無法得到正常的鍵盤行爲來處理它。陷阱在輸入字段和移動Tab鍵的特定元素
具體來說，我需要標籤，我的選擇菜單，就像你通常可以點擊tab和循環使用您的網頁上輸入。我該怎麼做呢？我有我的風格的菜單，下面的CSS：
.selectMenu {
font-family: 'Oxygen', sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 42px;
}
/* line 85, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.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;
}
/* line 94, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
/* line 104, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:hover {
background-color: #7b7b7b;
}
/* line 107, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active, .select-styled.active {
background-color: #737373;
}
/* line 109, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active:after, .select-styled.active:after {
top: 9px;
border-color: transparent transparent #fff transparent;
}
/* line 116, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.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;
}
/* line 128, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.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;
}
/* line 134, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options li:hover {
color: gray;
background: #fff;
}
/* line 138, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options li[rel="hide"] {
display: none;
}
/* line 144, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
ul.select-options {
max-height: 15em;
overflow-y: scroll;
overflow-x: hidden;
}
和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();
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
一個例子小提琴是在這裏 - http://jsfiddle.net/cwzjL2uw/2/。任何想法如何設置點擊tab，以便它選擇我的程式化菜單？