Question

我们正在将Bootstrap 3用于UI组件。在bootstrap.js中，有Dropdown.prototype.keydown函数（参见http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js）我们想要自定义行为。该功能目前仅支持向上/向下键和转义。我们希望添加对左/右键的支持，因为我们已经添加了对嵌套下拉列表的支持以进行引导。

如果不编辑实际的bootstrap.js（在这种情况下不是选项），我就没有办法在Dropdown.prototype.keydown中覆盖此行为或自定义它。有没有这样做的模式，没有编辑bootstrap.js本身？

到目前为止，我提出的最好的方法是添加我自己的事件处理程序：

$(document).on('keydown.bs.dropdown.data-api', '[data-toggle=dropdown]' + ', [role=menu]', function (e) {
    alert('dfsa');
});

Answer 1

我通过复制引导源并将其编辑为仅处理左右键码来实现此功能，因为已经绑定了上下键。主要变化是第54,78和79行：https://github.com/twbs/bootstrap/blob/master/js/dropdown.js

右侧表现为向下，而左侧表现为向上。

我相信你可以解开它们并用你自己的功能来处理它们，但这是我开始工作的方式。

!function() {
  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }  

 var newDropdownFunction = function (e) {
    if (!/(37|39|27)/.test(e.keyCode)) return

    var $this = $(this)

    e.preventDefault()
    e.stopPropagation()

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    if (!isActive || (isActive && e.keyCode == 27)) {
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      return $this.trigger('click')
    }

    var desc = ' li:not(.divider):visible a'
    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)

    if (!$items.length) return

    var index = $items.index($items.filter(':focus'))

    if ((e.keyCode == 37) && index > 0)                 index--                        // up
    if ((e.keyCode == 39) && index < $items.length - 1) index++                        // down
    if (!~index)                                      index = 0

    $items.eq(index).trigger('focus')
  }

  $(document).on('keydown.bs.dropdown.data-api', '[data-toggle="dropdown"], [role="menu"], [role="listbox"]', newDropdownFunction)
}()

您可以通过此处进行测试：http://getbootstrap.com/javascript/#dropdowns并在控制台中运行。

在bootstrap.js中覆盖下拉列表中的行为

1 个答案: