kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

abandon activedescendant because it was awful

Browse source
This commit is contained in:
Jacob Thornton 2012-05-17 00:39:14 -07:00
parent a7b49a7d92
commit 9889948f58
8 changed files with 68 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
docs/assets/css/bootstrap.css vendored
View file

@ -2419,18 +2419,13 @@ table .span24 {
} }
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover, .dropdown-menu .active > a:hover {
.dropdown-menu:hover #aria-active > a:hover,
.dropdown-menu #aria-active > a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #0088cc; background-color: #0088cc;
} outline: 0;
.dropdown-menu:hover #aria-active > a {
color: #333333;
background-color: #ffffff;
} }
.open { .open {

34
docs/assets/js/bootstrap-dropdown.js vendored
View file

@ -26,8 +26,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, active = 'aria-active'
, Dropdown = function (element) { , Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle) var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () { $('html').on('click.dropdown.data-api', function () {
@ -61,15 +60,16 @@
} }
, keydown: function (e) { , keydown: function (e) {
var $this = $(this) var $this
, $items , $items
, $active , $active
, $parent , $parent
, isActive
, index , index
if (e.keyCode == 27) return $this.click() if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return $this = $(this)
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -78,27 +78,23 @@
$parent = getParent($this) $parent = getParent($this)
$parent.hasClass('open') || $this.click() isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent) if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return if (!$items.length) return
index = $items.index($items.filter('#' + active)) index = $items.index($items.filter(':focus'))
$items
.eq(index)
.attr('id', '')
if (e.keyCode == 38 && index > 0) index-- // up if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (!~index) index = 0 if (!~index) index = 0
$items $items
.eq(index) .eq(index)
.attr('id', active) .focus()
} }
} }
@ -106,8 +102,6 @@
function clearMenus() { function clearMenus() {
getParent($(toggle)) getParent($(toggle))
.removeClass('open') .removeClass('open')
.find('#' + active)
.attr('id', '')
} }
function getParent($this) { function getParent($this) {
@ -145,12 +139,14 @@
* =================================== */ * =================================== */
$(function () { $(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html') $('html')
.on('click.dropdown.data-api', clearMenus) .on('click.dropdown.data-api', clearMenus)
$('body') $('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown) .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery); }(window.jQuery);

34
docs/assets/js/bootstrap.js vendored
View file

@ -594,8 +594,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, active = 'aria-active'
, Dropdown = function (element) { , Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle) var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () { $('html').on('click.dropdown.data-api', function () {
@ -629,15 +628,16 @@
} }
, keydown: function (e) { , keydown: function (e) {
var $this = $(this) var $this
, $items , $items
, $active , $active
, $parent , $parent
, isActive
, index , index
if (e.keyCode == 27) return $this.click() if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return $this = $(this)
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -646,27 +646,23 @@
$parent = getParent($this) $parent = getParent($this)
$parent.hasClass('open') || $this.click() isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent) if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return if (!$items.length) return
index = $items.index($items.filter('#' + active)) index = $items.index($items.filter(':focus'))
$items
.eq(index)
.attr('id', '')
if (e.keyCode == 38 && index > 0) index-- // up if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (!~index) index = 0 if (!~index) index = 0
$items $items
.eq(index) .eq(index)
.attr('id', active) .focus()
} }
} }
@ -674,8 +670,6 @@
function clearMenus() { function clearMenus() {
getParent($(toggle)) getParent($(toggle))
.removeClass('open') .removeClass('open')
.find('#' + active)
.attr('id', '')
} }
function getParent($this) { function getParent($this) {
@ -713,12 +707,14 @@
* =================================== */ * =================================== */
$(function () { $(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html') $('html')
.on('click.dropdown.data-api', clearMenus) .on('click.dropdown.data-api', clearMenus)
$('body') $('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown) .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery);/* ========================================================= }(window.jQuery);/* =========================================================

2
docs/assets/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

16
docs/javascript.html
View file

@ -374,7 +374,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav" role="navigation"> <ul class="nav" role="navigation">
<li class="dropdown"> <li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">Action</a></li> <li><a tabindex="-1" href="http://google.com">Action</a></li>
<li><a tabindex="-1" href="#anotherAction">Another action</a></li> <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -384,7 +384,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -396,7 +396,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav pull-right"> <ul class="nav pull-right">
<li id="fat-menu" class="dropdown"> <li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -413,7 +413,7 @@ $('#myModal').on('hidden', function () {
<li class="active"><a href="#">Regular link</a></li> <li class="active"><a href="#">Regular link</a></li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -423,7 +423,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -433,7 +433,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -462,7 +462,7 @@ $('#myModal').on('hidden', function () {
Dropdown Dropdown
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
@ -480,7 +480,7 @@ $('#myModal').on('hidden', function () {
Dropdown Dropdown
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;

16
docs/templates/pages/javascript.mustache vendored
View file

@ -297,7 +297,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav" role="navigation"> <ul class="nav" role="navigation">
<li class="dropdown"> <li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -307,7 +307,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -319,7 +319,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav pull-right"> <ul class="nav pull-right">
<li id="fat-menu" class="dropdown"> <li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li> <li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -346,7 +346,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -356,7 +356,7 @@ $('#myModal').on('hidden', function () {
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -385,7 +385,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Dropdown{{/i}} {{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
@ -403,7 +403,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Dropdown{{/i}} {{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;

34
js/bootstrap-dropdown.js vendored
View file

@ -26,8 +26,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, active = 'aria-active'
, Dropdown = function (element) { , Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle) var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () { $('html').on('click.dropdown.data-api', function () {
@ -61,15 +60,16 @@
} }
, keydown: function (e) { , keydown: function (e) {
var $this = $(this) var $this
, $items , $items
, $active , $active
, $parent , $parent
, isActive
, index , index
if (e.keyCode == 27) return $this.click() if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return $this = $(this)
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -78,27 +78,23 @@
$parent = getParent($this) $parent = getParent($this)
$parent.hasClass('open') || $this.click() isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent) if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return if (!$items.length) return
index = $items.index($items.filter('#' + active)) index = $items.index($items.filter(':focus'))
$items
.eq(index)
.attr('id', '')
if (e.keyCode == 38 && index > 0) index-- // up if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (!~index) index = 0 if (!~index) index = 0
$items $items
.eq(index) .eq(index)
.attr('id', active) .focus()
} }
} }
@ -106,8 +102,6 @@
function clearMenus() { function clearMenus() {
getParent($(toggle)) getParent($(toggle))
.removeClass('open') .removeClass('open')
.find('#' + active)
.attr('id', '')
} }
function getParent($this) { function getParent($this) {
@ -145,12 +139,14 @@
* =================================== */ * =================================== */
$(function () { $(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html') $('html')
.on('click.dropdown.data-api', clearMenus) .on('click.dropdown.data-api', clearMenus)
$('body') $('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown) .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery); }(window.jQuery);

10
less/dropdowns.less
View file

@ -94,17 +94,13 @@
// Hover state // Hover state
// ----------- // -----------
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover, .dropdown-menu .active > a:hover {
.dropdown-menu:hover #aria-active > a:hover,
.dropdown-menu #aria-active > a {
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
text-decoration: none; text-decoration: none;
background-color: @dropdownLinkBackgroundHover; background-color: @dropdownLinkBackgroundHover;
} outline: 0;
.dropdown-menu:hover #aria-active > a {
color: @dropdownLinkColor;
background-color: @dropdownBackground;
} }
// Open state for the dropdown // Open state for the dropdown