#javascript #jquery #knockout.js
#javascript #jquery #knockout.js
Вопрос:
Я создал пользовательский плагин выпадающего списка jquery, который, похоже, хорошо работает на настольных компьютерах и мобильных устройствах.
Однако на мобильных устройствах мы используем собственное поведение html, а на настольных компьютерах мы создаем выпадающий список так, как нам нужно, с помощью ul li, а затем добавляем его к тегу select.
Но я не могу сделать какой-либо выбор с клавиатуры, который мы обычно можем сделать из собственного выпадающего списка по умолчанию. Есть ли какое-либо решение? кто-нибудь может мне помочь, как мне это сделать с помощью keyCode или есть ли какое-либо решение?
alphaDropdown: function(){
(function(jQuery){
jQuery.fn.AlphaDropdown = function( configurations ){
var defaultConfigurations = {
disabledFirst: false
};
var extendedconfigurations = jQuery.extend(defaultConfigurations, configurations || {});
function setBackData( ){
jQuery('.selectr-desktop-custom').each(function(){
var selectedValue = jQuery(this).removeClass('active').find('select').eq(0).val();
var selectedIndex = jQuery(this).removeClass('active').find('select').eq(0)[0].selectedIndex;
if( !selectedValue || selectedValue == ""){
var dropdown = jQuery(this).find('select').eq(0)[0];
var _index = dropdown.selectedIndex;
if( _index >= 0 ){
selectedValue = dropdown.options[_index].innerText;
selectedIndex = _index;
}
}
if ( selectedIndex != -1 ) {
var moveBy = -(selectedIndex * 40), movewithY = 'translateY(' moveBy 'px)';
jQuery(this).find('ul').eq(0).css({
transform: movewithY
});
};
});
}
jQuery(this).each(function(){
if( jQuery(this).parents('.selectr-desktop-custom').length > 0 ){
jQuery(this).parents('.selectr-desktop-custom').children('ul').remove();
jQuery(this).unwrap('.selectr-desktop-custom');
}
var preselectedvalue = jQuery(this).val() ;
if( !preselectedvalue || preselectedvalue == ""){
var dropdown = jQuery(this).eq(0)[0];
var _index = dropdown.selectedIndex;
if( _index >= 0 ){
preselectedvalue = dropdown.options[_index].innerText;
}
}
var list = "<ul>"
jQuery(this).wrap("<div class='selectr-desktop-custom' tabindex='0'></div>");
jQuery(this).find('option').each(function(){
var currentValue = jQuery(this).val() amp;amp; jQuery(this).val().trim() != ""?jQuery(this).val():jQuery(this).text();
if( jQuery(this).index() == 0 ){
if( extendedconfigurations.disabledFirst amp;amp; currentValue == preselectedvalue ){
list = "<li class='disabled active drop' alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}else if( extendedconfigurations.disabledFirst amp;amp; currentValue != preselectedvalue ){
list = "<li class='disabled drop' alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}else if( !extendedconfigurations.disabledFirst amp;amp; currentValue == preselectedvalue ){
list = "<li class='active' alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}
else{
list = "<li alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}
}
else{
if( currentValue == preselectedvalue ){
list = "<li class='active' alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}else{
list = "<li alpha-value='" currentValue "'>" jQuery(this).text() "</li>";
}
}
});
list = "</ul>";
jQuery(this).before(list);
jQuery(this).parents('.selectr-desktop-custom').click(function(e){
e.stopPropagation();
jQuery('.selectr-desktop-custom').removeClass('active');
jQuery(this).addClass('active');
jQuery(this).find('ul').eq(0).css('transform','translateY(0)');
}).find('ul').eq(0).find('li').click(function(e){
var _index = jQuery(this).index();
var moveBy = -(_index * 40), movewithY = 'translateY(' moveBy 'px)';
var ul = jQuery(this).parent();
var dropdown = ul.parent().find('select').eq(0);
jQuery(this).parent().css({
transform: movewithY
});
var seletedValue = jQuery(this).attr('alpha-value') || null;
if( seletedValue ){
dropdown.val(seletedValue).find('option').each(function(){
if( jQuery(this).text() === seletedValue || jQuery(this).val() === seletedValue ){
jQuery(this).attr('selected','selected');
}else{
jQuery(this).attr('selected',null);
}
});
dropdown[0].selectedIndex = _index;
dropdown.trigger('change');
}
jQuery(this).addClass('active').siblings().removeClass('active').closest('.selectr-desktop-custom').removeClass('active');
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
jQuery('body').click(function(e){
setBackData();
});
});
setBackData();
return this;
}
})($);
} Комментарии:
1. Итак, существует ряд пользовательских выпадающих плагинов. Изучали ли вы, скажем, плагин jQuery UI «selectmenu», чтобы посмотреть, как они обрабатывают события клавиатуры?
2. Спасибо @James на самом деле у нас был выпадающий список. Мы должны сделать это в соответствии с этим, поэтому я переключился на создание пользовательского выпадающего списка. итак, есть ли в моем коде какое-либо решение, которым я могу манипулировать и достичь того, чего я хочу
3. Да, но это потребует от вас понимания событий на клавиатуре и желаемого эффекта, когда они произойдут. Вот почему я предлагаю изучить очень похожий пользовательский выпадающий список. Ссылка на источник
4. Спасибо @James, если я перейду по предоставленной вами ссылке, мне придется изменить свой пользовательский код, и это займет время. я работал над событиями клавиатуры ранее, но сейчас немного запутался, что делать с кодами клавиш клавиатуры, поэтому мне нужна помощь в этом