मैं jQuery 1.11 का उपयोग कर रहा हूं। मैं अपने चयन ड्रॉप-डाउन को स्टाइल करना चाहता हूं क्योंकि चलो इसका सामना करते हैं, डिफ़ॉल्ट दिखता है। तो मैं कुछ शैलियोंमैं अपने स्टाइल वाले ड्रॉपडाउन में कीबोर्ड व्यवहार की नकल कैसे करूं?
.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;
}
मिल गया है और यह 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
फिडल इस illustrating जोड़ा यहां है - http://jsfiddle.net/cwzjL2uw/1/। मुद्दा यह है कि, हालांकि मैंने शैली हासिल की है, मैं कीबोर्ड चयन को दोहराने में विफल रहा हूं जो सामान्य चयन मेनू में है। मेरा सवाल यह है कि, मैं अपना मेनू इस प्रकार कैसे व्यवहार कर सकता हूं कि जब मैं "ए" अक्षर पर क्लिक करता हूं, तो पहले "ए" आइटम का चयन किया जाता है (इस मामले में "अलबामा"), जैसे नियमित चयन मेनू व्यवहार करता है।
मेनू सक्रिय होने पर कीप्रेस के लिए सुनो? – epascarello
चूंकि आपने 'jquery-ui' टैग किया है, ऑटोकंपलेट का उपयोग करने के बारे में कैसे? (http://jqueryui.com/autocomplete/) - क्या आप jquery को अपग्रेड कर सकते हैं या आप 1.11 का उपयोग कर अटक गए हैं? – ochi