Bootstrap nút thả xuống: http://twitter.github.com/bootstrap/components.html#buttonDropdownsLàm thế nào để làm cho bootstrap nút menu sổ xuống chọn bởi bàn phím
Khi tôi chọn một nút thả xuống, tôi muốn sử dụng bàn phím lên/xuống để di chuyển giữa các mục menu và nhấn Enter để chọn một, giống như http://twitter.github.com/bootstrap/javascript.html#dropdowns
Bất kỳ ý tưởng nào?
Bootstrap có hỗ trợ gốc cho điều hướng bằng bàn phím.
Chỉ cần thêm role = "menu" để thả xuống menu của bạn
Dưới đây là một ví dụ, chỉ cần save as .html và tham gia một thử nghiệm
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">menu</button>
<ul class="dropdown-menu" role="menu">
<li> <a href="#">one</a> </li>
<li> <a href="#">two</a> </li>
<li> <a href="#">three</a> </li>
</ul>
</div>
</div>
</body>
</html>
Xin lưu ý rằng bất cứ điều gì bạn cung cấp cho trình đơn 'vai trò =" "' cần để có thể nhận được tập trung. Xem http://stackoverflow.com/a/1600194/601386. Chỉ các phần tử có thể nhận tiêu điểm mới có thể liên kết với các sự kiện bàn phím. – flu
Các lý do có thể xảy ra có thể không hoạt động trong một số trường hợp:
<div> hoặc một <span> cho .dropdown-toggle. Đặt nó là <button> và nó sẽ hoạt động. Lạ đủ, thậm chí không phải loại yếu tố này hoạt động: span.btn.btn-default.<a> bên trong mỗi <li> của bạn có thuộc tính là href="#" hoặc href="" hoặc thường có thuộc tính được xác định.role="menu" trên phần tử .dropdown-menu.
Đây có thể là điểm bắt đầu: http://stackoverflow.com/questions/1409214/keyboard-navigation-for-menu-using-jquery – nickhar