使ul列表工作，如选择输入 [英] Make ul list work like select input

问题描述

为了样式的原因，我希望能够使用ul列表作为选择表单元素。

我可以用我的代码填充一个隐藏的输入（不包含在这个jsfiddle中），现在这么好。但现在我试图让我的当按下键盘或使用鼠标时，ul的行为与选择输入相同。

在我以前的问题中，我遇到了一些键盘控制问题。他们现在已经修好了。请参阅：键盘上的自动滚动箭头向上/向下

问题仍然存在，即按下键盘按钮时鼠标不会被忽略。这导致悬停效果首先听到键盘输入，但是立即转到鼠标并选择这个li项目作为被选中。

这可以在我的jsfiddle示例中看到： http ：//jsfiddle.net/JVDXT/3/

我的javascript代码：

  // scrollTo插件
 $ .fn.scrollTo =函数（target，options，callback）{
 if（typeof options =='function'&&&长度== 2）{callback = options; options = target; } 
 var settings = $ .extend（{
 scrollTarget：target，
 offsetTop：100，
 duration：0，
 easing：'linear'
 }，options）; 
 return this.each（function（）{
 var scrollPane = $（this）; 
 var scrollTarget =（typeof settings.scrollTarget ==number）？settings.scrollTarget：$（ settings.scrollTarget）; 
 var scrollY =（typeof scrollTarget ==number）？scrollTarget：scrollTarget.offset（）。top + scrollPane.scrollTop（） -  parseInt（settings.offsetTop）; 
 scrollPane .animate（{scrollTop：scrollY}，parseInt（settings.duration），settings.easing，function（）{$ b $ if（typeof callback =='function'）{callback.call（this）;} 
}）; 
}）; 
} 
 
 
 //我的代码
 //列出鼠标的函数
 jQuery（。btn-group .dropdown-menu （））; 
 console.log（'mousie'）
 jQuery（.btn-group .dropdown-menu li）。removeClass（'selected'）; 
 jQuery（this）.addClass（'selected'）; 
}）
 
 //按下键盘时的操作
 jQuery（。btn-group ）.keydown（function（e）{
 if（e.keyCode == 38）{// up 
 console.log（'keyup pressed'）; 
 var selected = jQuery（' .selected'）; 
 jQuery（.btn-group .dropdown-menu li）。removeClass（'selected'）; 
 if（selected.prev（）。length == 0）{
 selected.siblings（）。last（）。addClass（'selected'）; 
} else {
 selected.prev（）。addClass（'selected'）; 
 jQuery '.btn-group .dropdown-menu'）。scrollTo（'。selected'）; 
} 
} 
 if（e.keyCode == 40）{// dow n 
 console.log（'keydown'）; 
 var selected = jQuery（'。selected'）; 
 jQuery（.btn-group .dropdown-menu li）。removeClass（'selected'）; 
 if（selected.next（）。length == 0）{
 selected.siblings（）。first（）。addClass（'selected'）; 
} else {
 selected.next（）。addClass（'selected'）; 
 jQuery（'。btn-group .dropdown-menu'）。scrollTo（'。selected'）; 
} 
} 
}）; 
  

所以任何人都可以教我如何在键盘按钮被按下时igonore鼠标，当用户再次触摸鼠标时。像默认的选择输入表单域一样。

更新

以下是一个新的 jsfiddle 。

解决方案

$ b

http://jsfiddle.net/coma/9KvhL/25/ p>

 （function（$，undefined）{
 
 $ .fn.dropdown = function（）{
 
 var widget = $（this）; 
 var label = widget.find（'span.valueOfButton'）; 
 var list = widget.children（'ul'）; 
 var select; 
 var highlight; 
 
 var select = function（i）{
 
 selected = $（i）; 
 label.text （selected.text（））; 
 
}; 
 
 var highlight = function（i）{
 
 highlight = $（i）; 
 
突出显示
 .addClass（'selected'）
 .siblings（'。selected'）
 .removeClass（选择）; 
}; 
 
 var scroll = function（event）{
 
 list.scrollTo（'。selected'）; 
 
}; 
 
 var hover = function（event）{
 
 highlight（this）; 
 
}; 
 
 var rebind = function（event）{
 
 bind（）; 
 
}; 
 
 var bind = function（）{
 
 list.on（'mouseover'，'li'，hover）; 
 widget.off（'mousemove'，rebind）; 
 
}; 
 
 var unbind = function（）{
 
 list.off（'mouseover'，'li'，hover）; 
 widget.on（'mousemove'，rebind）; 
 
}; 
 $ b list.on（'click'，'li'，function（event）{
 
 select（this）; 
 
}）; 
 $ b $ widget.keydown（function（event）{
 
 unbind（）; 
 
 switch（event.keyCode）{
 
 case 38：
 highlight（（highlight&& highlight.prev（）。length> 0）？highlighted.prev（）：list.children（）。last（））; 
 
 scroll（）; 
 break; 
 
 case 40：
 highlight（（突出显示& &&& highlight.next（）。length> 0）？突出显示.next（）：list.children（）。first（））; 
 
 scroll（）; 
 break; 
 
 case 13：
 if （突出显示）{
 
 select（突出显示）; 
 
} 
 break; 
 
} 
 
} ）; 
 
 bind（）; 
 
}; （b，b，b，b，b，b，b， = 2）{
 
 callback = options; 
 options = target; 
 
 
 var settings = $ .extend（{
 scrollTarget：target，
 offsetTop：185，
 duration：0，
 easing ：'linear'
}，options）; 
 
 return this.each（function（i）{
 
 var scrollPane = $（this）; 
 var scrollTarget =（typeof settings.scrollTarget ===' number）'settings.scrollTarget：$（settings.scrollTarget）; 
 var scrollY =（typeof scrollTarget ==='number'）？scrollTarget：scrollTarget.offset（）。top + scrollPane.scrollTop（） -  parseInt （settings.offsetTop，10）; 
 
 scrollPane.animate（{scrollTop：scrollY}，parseInt（settings.duration，10），settings.easing，function（）{
 $ b $ （typeof callback ==='function'）{
 
 callback.call（this）; 
} 
 
}）; 
 
}）; 
 
}; 
 
}）（jQuery）; 
 
 $（'div.btn-group'）。dropdown（）; 
  

关键是在鼠标移动时解除鼠标悬停和重新绑定。

我通过使用闭包函数重新构造它，并将逻辑添加到名为 dropdown 的jQuery方法中，以便您可以重用它，使用开关而不是一堆if和更多事情。

好吧，有超过一些插件可以将select转换为列表：

http://ivaynberg.github.io/select2/

http://harvesthq.github.io/chosen/

http://meetselva.github.io/combobox/

而且我也有我的！（准备用触摸设备使用与 http://uniformjs.com 相同的技巧）

https://github.com/coma/jquery.select

但是这个问题是关于如何使用该HTML并使其像行为一样避免悬停问题？

I want to be able to use a ul list as an select form element, for styling reasons.

I'm able to populate an hidden input with my code (not included in this jsfiddle), and so far so good.But now I'm trying to let my ul behave like the select input when the keyboard is pressed, or the mouse is used.

In my previous question i had some problems with keyboard controls. They are now fixed. See: Autoscroll on keyboard arrow up/down

The problem that remains is that the mouse is not ignored when the keyboard buttons are pressed. This is causing the "hover effect" to listen to the keyboard input first, but than immediately going to the mouse and select this li item as being selected.

This can be seen in my jsfiddle example: http://jsfiddle.net/JVDXT/3/

My javascript code:

// scrollTo plugin 
  $.fn.scrollTo = function( target, options, callback ){
  if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
  var settings = $.extend({
    scrollTarget  : target,
    offsetTop     : 100,
    duration      : 0,
    easing        : 'linear'
  }, options);
  return this.each(function(){
    var scrollPane = $(this);
    var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
    var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
    scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
      if (typeof callback == 'function') { callback.call(this); }
    });
  });
}


//My code
//The function that is listing the the mouse
jQuery(".btn-group .dropdown-menu li").mouseover(function() {
        console.log('mousie')
        jQuery(".btn-group .dropdown-menu li").removeClass('selected');
        jQuery(this).addClass('selected');
})  

//What to do when the keyboard is pressed
jQuery(".btn-group").keydown(function(e) {
    if (e.keyCode == 38) { // up
        console.log('keyup pressed');
        var selected = jQuery('.selected');
        jQuery(".btn-group .dropdown-menu li").removeClass('selected');
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass('selected');
        } else {
            selected.prev().addClass('selected');
            jQuery('.btn-group .dropdown-menu').scrollTo('.selected');
        }
    }
    if (e.keyCode == 40) { // down
        console.log('keydown');
        var selected = jQuery('.selected');
        jQuery(".btn-group .dropdown-menu li").removeClass('selected');
        if (selected.next().length == 0) {
            selected.siblings().first().addClass('selected');
        } else {
            selected.next().addClass('selected');
            jQuery('.btn-group .dropdown-menu').scrollTo('.selected');
        }
    }
});

So could anyone teach me how to igonore the mouse when the keyboard buttons are pressed, but listing to the mouse when it's touched again by the user. Like the default select input form field.

Update

Here's a new jsfiddle.

解决方案

Check this out:

http://jsfiddle.net/coma/9KvhL/25/

(function($, undefined) {

    $.fn.dropdown = function() {

        var widget = $(this);
        var label = widget.find('span.valueOfButton');
        var list = widget.children('ul');
        var selected;
        var highlighted;

        var select = function(i) {

            selected = $(i);
            label.text(selected.text());

        };

        var highlight = function(i) {

            highlighted = $(i);

            highlighted
            .addClass('selected')
            .siblings('.selected')
            .removeClass('selected');
        };

        var scroll = function(event) {

            list.scrollTo('.selected');

        };

        var hover = function(event) {

            highlight(this);

        };

        var rebind = function(event) {

            bind();

        };

        var bind = function() {

            list.on('mouseover', 'li', hover);
            widget.off('mousemove', rebind);

        };

        var unbind = function() {

            list.off('mouseover', 'li', hover);
            widget.on('mousemove', rebind);

        };

        list.on('click', 'li', function(event) {

            select(this);

        });

        widget.keydown(function(event) {

            unbind();

            switch(event.keyCode) {

                case 38:
                    highlight((highlighted && highlighted.prev().length > 0) ? highlighted.prev() : list.children().last());

                    scroll();
                    break;

                case 40:
                    highlight((highlighted && highlighted.next().length > 0) ? highlighted.next() : list.children().first());

                    scroll();
                    break;

                case 13:
                    if(highlighted) {

                        select(highlighted);

                    }
                    break;

            }

        });

        bind();

    };

    $.fn.scrollTo = function(target, options, callback) {

        if(typeof options === 'function' && arguments.length === 2) {

            callback = options;
            options = target;
        }

        var settings = $.extend({
            scrollTarget  : target,
            offsetTop     : 185,
            duration      : 0,
            easing        : 'linear'
        }, options);

        return this.each(function(i) {

            var scrollPane = $(this);
            var scrollTarget = (typeof settings.scrollTarget === 'number') ? settings.scrollTarget : $(settings.scrollTarget);
            var scrollY = (typeof scrollTarget === 'number') ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop, 10);

            scrollPane.animate({scrollTop: scrollY}, parseInt(settings.duration, 10), settings.easing, function() {

                if (typeof callback === 'function') {

                    callback.call(this);
                }

            });

        });

    };

})(jQuery);

$('div.btn-group').dropdown();

The key is to unbind the mouseover and rebind when mouse moves.

I refactored it a little by using a closure function, adding the logic to a jQuery method called dropdown so you can reuse it, using switch instead of a bunch of if's and more things.

Well, there are bazillions of plugins to transform a select to a list:

http://ivaynberg.github.io/select2/

http://harvesthq.github.io/chosen/

http://meetselva.github.io/combobox/

and I have mine too! (ready for touch devices using the same trick as http://uniformjs.com)

https://github.com/coma/jquery.select

But this question is about taking that HTML and make it behave like a select avoiding the hover issue right?

这篇关于使ul列表工作，如选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！