Skip to content

B
bootstrap
Commit f3e45c37 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

add show/shown hide/hidden events to dropdown + update dropdown links for... 

add show/shown hide/hidden events to dropdown + update dropdown links for testing + catch a few missed namespace things
parent f820de4b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 51 deletions
docs/assets/js/bootstrap.js
View file @ f3e45c37
...@@ -433,7 +433,7 @@ ...@@ -433,7 +433,7 @@
// CAROUSEL DATA-API // CAROUSEL DATA-API
// ================= // =================
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var $this = $(this), href var $this = $(this), href
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
var options = $.extend({}, $target.data(), $this.data()) var options = $.extend({}, $target.data(), $this.data())
...@@ -590,7 +590,7 @@ ...@@ -590,7 +590,7 @@
// COLLAPSE DATA-API // COLLAPSE DATA-API
// ================= // =================
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href var $this = $(this), href
var target = $this.attr('data-target') var target = $this.attr('data-target')
|| e.preventDefault() || e.preventDefault()
...@@ -630,10 +630,7 @@ ...@@ -630,10 +630,7 @@
var backdrop = '.dropdown-backdrop' var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle=dropdown]' var toggle = '[data-toggle=dropdown]'
var Dropdown = function (element) { var Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle) var $el = $(element).on('click.bs.dropdown', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
} }
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
...@@ -651,7 +648,14 @@ ...@@ -651,7 +648,14 @@
// if mobile we we use a backdrop because click events don't delegate // if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus) $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
} }
$parent.toggleClass('open')
$parent.trigger(e = $.Event('show.bs.dropdown'))
if (e.isDefaultPrevented()) return
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
} }
$this.focus() $this.focus()
...@@ -692,7 +696,13 @@ ...@@ -692,7 +696,13 @@
function clearMenus() { function clearMenus() {
$(backdrop).remove() $(backdrop).remove()
$(toggle).each(function () { getParent($(this)).removeClass('open') }) $(toggle).each(function (e) {
var $parent = getParent($(this))
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown'))
if (e.isDefaultPrevented()) return
$parent.removeClass('open').trigger('hidden.bs.dropdown')
})
} }
function getParent($this) { function getParent($this) {
...@@ -741,10 +751,10 @@ ...@@ -741,10 +751,10 @@
$(document) $(document)
.on('click.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('click.bs.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery); }(window.jQuery);
/* ======================================================================== /* ========================================================================
...@@ -1482,7 +1492,7 @@ ...@@ -1482,7 +1492,7 @@
var $element = $(element).is('body') ? $(window) : $(element) var $element = $(element).is('body') ? $(window) : $(element)
this.$body = $('body') this.$body = $('body')
this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.$scrollElement = $element.on('scroll.bs.scroll-spy.data-api', process)
this.options = $.extend({}, ScrollSpy.DEFAULTS, options) this.options = $.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
......
docs/assets/js/bootstrap.min.js
View file @ f3e45c37
This diff is collapsed.
docs/javascript.html
View file @ f3e45c37
...@@ -347,21 +347,21 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -347,21 +347,21 @@ $('#myModal').on('hidden.bs.modal', function () {
<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-labelledby="drop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</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-labelledby="drop2"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -369,11 +369,11 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -369,11 +369,11 @@ $('#myModal').on('hidden.bs.modal', function () {
<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-labelledby="drop3"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -389,31 +389,31 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -389,31 +389,31 @@ $('#myModal').on('hidden.bs.modal', function () {
<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-labelledby="drop4"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</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-labelledby="drop5"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</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-labelledby="drop5"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> <!-- /tabs --> </ul> <!-- /tabs -->
......
js/carousel.js
View file @ f3e45c37
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
// CAROUSEL DATA-API // CAROUSEL DATA-API
// ================= // =================
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var $this = $(this), href var $this = $(this), href
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
var options = $.extend({}, $target.data(), $this.data()) var options = $.extend({}, $target.data(), $this.data())
......
js/collapse.js
View file @ f3e45c37
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
// COLLAPSE DATA-API // COLLAPSE DATA-API
// ================= // =================
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href var $this = $(this), href
var target = $this.attr('data-target') var target = $this.attr('data-target')
|| e.preventDefault() || e.preventDefault()
......
js/dropdown.js
View file @ f3e45c37
...@@ -26,10 +26,7 @@ ...@@ -26,10 +26,7 @@
var backdrop = '.dropdown-backdrop' var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle=dropdown]' var toggle = '[data-toggle=dropdown]'
var Dropdown = function (element) { var Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle) var $el = $(element).on('click.bs.dropdown', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
} }
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
...@@ -47,7 +44,14 @@ ...@@ -47,7 +44,14 @@
// if mobile we we use a backdrop because click events don't delegate // if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus) $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
} }
$parent.toggleClass('open')
$parent.trigger(e = $.Event('show.bs.dropdown'))
if (e.isDefaultPrevented()) return
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
} }
$this.focus() $this.focus()
...@@ -88,7 +92,13 @@ ...@@ -88,7 +92,13 @@
function clearMenus() { function clearMenus() {
$(backdrop).remove() $(backdrop).remove()
$(toggle).each(function () { getParent($(this)).removeClass('open') }) $(toggle).each(function (e) {
var $parent = getParent($(this))
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown'))
if (e.isDefaultPrevented()) return
$parent.removeClass('open').trigger('hidden.bs.dropdown')
})
} }
function getParent($this) { function getParent($this) {
...@@ -137,9 +147,9 @@ ...@@ -137,9 +147,9 @@
$(document) $(document)
.on('click.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('click.bs.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery); }(window.jQuery);
js/scrollspy.js
View file @ f3e45c37
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
var $element = $(element).is('body') ? $(window) : $(element) var $element = $(element).is('body') ? $(window) : $(element)
this.$body = $('body') this.$body = $('body')
this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.$scrollElement = $element.on('scroll.bs.scroll-spy.data-api', process)
this.options = $.extend({}, ScrollSpy.DEFAULTS, options) this.options = $.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
......
js/tests/unit/dropdown.js
View file @ f3e45c37
...@@ -149,4 +149,71 @@ $(function () { ...@@ -149,4 +149,71 @@ $(function () {
$("#qunit-fixture").html("") $("#qunit-fixture").html("")
}) })
test("should fire show and hide event", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('show.bs.dropdown', function () {
ok(true, 'show was called')
})
.bind('hide.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
dropdown.click()
$(document.body).click()
})
test("should fire shown and hiden event", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('shown.bs.dropdown', function () {
ok(true, 'show was called')
})
.bind('hidden.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
dropdown.click()
$(document.body).click()
})
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment