mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:40:10 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'accessibility' into 2.1.0-wip

Browse Source 
Conflicts:
	docs/assets/js/bootstrap.min.js
	docs/javascript.html
	docs/templates/pages/javascript.mustache
This commit is contained in:
Jacob Thornton 2012-06-02 16:11:35 -07:00
commit 5e5965ca6f
12 changed files with 577 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/assets/css/bootstrap.css vendored
View File

@ -2384,12 +2384,17 @@ table .span24 {
margin-left: 2px; margin-left: 2px;
} }
.dropdown:hover .caret, .dropdown a:focus .caret,
.dropdown a:hover .caret,
.open .caret { .open .caret {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
} }
.navbar .nav .open > a {
color: #ffffff;
}
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -2443,11 +2448,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 {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #0088cc; background-color: #0088cc;
outline: 0;
} }
.open { .open {
@ -3810,6 +3817,7 @@ input[type="submit"].btn.btn-mini {
margin: 0; margin: 0;
} }
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
@ -3817,7 +3825,8 @@ input[type="submit"].btn.btn-mini {
} }
.navbar .nav .active > a, .navbar .nav .active > a,
.navbar .nav .active > a:hover { .navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #222222; background-color: #222222;
@ -3947,6 +3956,7 @@ input[type="submit"].btn.btn-mini {
background-color: transparent; background-color: transparent;
} }
.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
.navbar .nav li.dropdown.active > .dropdown-toggle:hover { .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
color: #ffffff; color: #ffffff;
} }

80
docs/assets/js/bootstrap-dropdown.js vendored
View File

@ -26,7 +26,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, 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 () {
@ -41,34 +41,82 @@
, toggle: function (e) { , toggle: function (e) {
var $this = $(this) var $this = $(this)
, $parent , $parent
, selector
, isActive , isActive
if ($this.is('.disabled, :disabled')) return if ($this.is('.disabled, :disabled')) return
selector = $this.attr('data-target') $parent = getParent($this)
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open') isActive = $parent.hasClass('open')
clearMenus() clearMenus()
if (!isActive) $parent.toggleClass('open') if (!isActive) {
$parent.toggleClass('open')
$this.focus()
}
return false return false
} }
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
} }
function clearMenus() { function clearMenus() {
$(toggle).parent().removeClass('open') getParent($(toggle))
.removeClass('open')
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
} }
@ -91,10 +139,12 @@
* =================================== */ * =================================== */
$(function () { $(function () {
$('html').on('click.dropdown.data-api', clearMenus) $('html')
.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 + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery); }(window.jQuery);

151
docs/assets/js/bootstrap-modal.js vendored
View File

@ -52,8 +52,9 @@
this.isShown = true this.isShown = true
escape.call(this) this.escape()
backdrop.call(this, function () {
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) { if (!that.$element.parent().length) {
@ -69,6 +70,8 @@
that.$element.addClass('in') that.$element.addClass('in')
that.enforceFocus()
transition ? transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown') that.$element.trigger('shown')
@ -91,90 +94,96 @@
$('body').removeClass('modal-open') $('body').removeClass('modal-open')
escape.call(this) this.escape()
$(document).off('focusin.modal')
this.$element.removeClass('in') this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) : this.hideWithTransition() :
hideModal.call(this) this.hideModal()
} }
} , enforceFocus: function () {
var that = this
$(document).on('focusin.modal', function (e) {
/* MODAL PRIVATE METHODS if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
* ===================== */ that.$element.focus()
}
function hideWithTransition() { })
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
backdrop.call(this)
}
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow , escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
this.$backdrop.addClass('in') , hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
doAnimate ? this.$element.one($.support.transition.end, function () {
this.$backdrop.one($.support.transition.end, callback) : clearTimeout(timeout)
callback() that.hideModal()
})
}
} else if (!this.isShown && this.$backdrop) { , hideModal: function (that) {
this.$backdrop.removeClass('in') this.$element
.hide()
.trigger('hidden')
$.support.transition && this.$element.hasClass('fade')? this.backdrop()
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : }
removeBackdrop.call(this)
} else if (callback) { , removeBackdrop: function () {
callback() this.$backdrop.remove()
} this.$backdrop = null
} }
function removeBackdrop() { , backdrop: function (callback) {
this.$backdrop.remove() var that = this
this.$backdrop = null , animate = this.$element.hasClass('fade') ? 'fade' : ''
}
function escape() { if (this.isShown && this.options.backdrop) {
var that = this var doAnimate = $.support.transition && animate
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) { this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
e.which == 27 && that.hide() .appendTo(document.body)
})
} else if (!this.isShown) { if (this.options.backdrop != 'static') {
$(document).off('keyup.dismiss.modal') this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
} else if (callback) {
callback()
}
}
} }

231
docs/assets/js/bootstrap.js vendored
View File

@ -594,7 +594,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, 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 () {
@ -609,34 +609,82 @@
, toggle: function (e) { , toggle: function (e) {
var $this = $(this) var $this = $(this)
, $parent , $parent
, selector
, isActive , isActive
if ($this.is('.disabled, :disabled')) return if ($this.is('.disabled, :disabled')) return
selector = $this.attr('data-target') $parent = getParent($this)
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open') isActive = $parent.hasClass('open')
clearMenus() clearMenus()
if (!isActive) $parent.toggleClass('open') if (!isActive) {
$parent.toggleClass('open')
$this.focus()
}
return false return false
} }
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
} }
function clearMenus() { function clearMenus() {
$(toggle).parent().removeClass('open') getParent($(toggle))
.removeClass('open')
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
} }
@ -659,10 +707,12 @@
* =================================== */ * =================================== */
$(function () { $(function () {
$('html').on('click.dropdown.data-api', clearMenus) $('html')
.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 + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery);/* ========================================================= }(window.jQuery);/* =========================================================
@ -719,8 +769,9 @@
this.isShown = true this.isShown = true
escape.call(this) this.escape()
backdrop.call(this, function () {
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) { if (!that.$element.parent().length) {
@ -736,6 +787,8 @@
that.$element.addClass('in') that.$element.addClass('in')
that.enforceFocus()
transition ? transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown') that.$element.trigger('shown')
@ -758,90 +811,96 @@
$('body').removeClass('modal-open') $('body').removeClass('modal-open')
escape.call(this) this.escape()
$(document).off('focusin.modal')
this.$element.removeClass('in') this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) : this.hideWithTransition() :
hideModal.call(this) this.hideModal()
} }
} , enforceFocus: function () {
var that = this
$(document).on('focusin.modal', function (e) {
/* MODAL PRIVATE METHODS if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
* ===================== */ that.$element.focus()
}
function hideWithTransition() { })
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
backdrop.call(this)
}
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow , escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
this.$backdrop.addClass('in') , hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
doAnimate ? this.$element.one($.support.transition.end, function () {
this.$backdrop.one($.support.transition.end, callback) : clearTimeout(timeout)
callback() that.hideModal()
})
}
} else if (!this.isShown && this.$backdrop) { , hideModal: function (that) {
this.$backdrop.removeClass('in') this.$element
.hide()
.trigger('hidden')
$.support.transition && this.$element.hasClass('fade')? this.backdrop()
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : }
removeBackdrop.call(this)
} else if (callback) { , removeBackdrop: function () {
callback() this.$backdrop.remove()
} this.$backdrop = null
} }
function removeBackdrop() { , backdrop: function (callback) {
this.$backdrop.remove() var that = this
this.$backdrop = null , animate = this.$element.hasClass('fade') ? 'fade' : ''
}
function escape() { if (this.isShown && this.options.backdrop) {
var that = this var doAnimate = $.support.transition && animate
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) { this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
e.which == 27 && that.hide() .appendTo(document.body)
})
} else if (!this.isShown) { if (this.options.backdrop != 'static') {
$(document).off('keyup.dismiss.modal') this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
} else if (callback) {
callback()
}
}
} }

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

File diff suppressed because one or more lines are too long

113
docs/javascript.html
View File

@ -200,18 +200,19 @@
<h2>Live demo</h2> <h2>Live demo</h2>
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p> <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade"> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h3>Modal Heading</h3> <h3 id="myModalLabel">Modal Heading</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4>Text in a modal</h4> <h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4> <h4>Popover in a modal</h4>
<p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<h4>Tooltips in a modal</h4> <h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
@ -228,8 +229,8 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >Close</a> <a href="#" role="button" class="btn" data-dismiss="modal" >Close</a>
<a href="#" class="btn btn-primary">Save changes</a> <a href="#" role="button" class="btn btn-primary">Save changes</a>
</div> </div>
</div> </div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
@ -274,24 +275,25 @@
<p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
<p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch Modal&lt;/a&gt;
</pre> </pre>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide" id="myModal"&gt; &lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
&lt;p&gt;One fine body…&lt;/p&gt; &lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt; &lt;a href="#" role="button" class="btn"&gt;Close&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt; &lt;a href="#" role="button" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<div class="alert alert-info"> <div class="alert alert-info">
<strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js. <strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.
</div> </div>
@ -365,41 +367,42 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns"> <div class="span9 columns">
<h2>Examples</h2> <h2>Examples</h2>
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p> <p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
<div id="navbar-example" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a> <a class="brand" href="#">Project Name</a>
<ul class="nav"> <ul class="nav" role="navigation">
<li class="dropdown"> <li class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="http://google.com">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li id="fat-menu" class="dropdown"> <li id="fat-menu" class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -410,33 +413,33 @@ $('#myModal').on('hidden', function () {
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<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" 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"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" 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"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" 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"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a tabindex="-1" href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> <!-- /tabs --> </ul> <!-- /tabs -->
@ -456,16 +459,16 @@ $('#myModal').on('hidden', function () {
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
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"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a 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 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 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;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -474,11 +477,11 @@ $('#myModal').on('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt; &lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt; &lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
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"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;

113
docs/templates/pages/javascript.mustache vendored
View File

@ -122,18 +122,19 @@
<h2>{{_i}}Live demo{{/i}}</h2> <h2>{{_i}}Live demo{{/i}}</h2>
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p> <p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade"> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h3>{{_i}}Modal Heading{{/i}}</h3> <h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4>{{_i}}Text in a modal{{/i}}</h4> <h4>{{_i}}Text in a modal{{/i}}</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>{{_i}}Popover in a modal{{/i}}</h4> <h4>{{_i}}Popover in a modal{{/i}}</h4>
<p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p> <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
<h4>{{_i}}Tooltips in a modal{{/i}}</h4> <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
<p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p> <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
@ -150,8 +151,8 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a> <a href="#" role="button" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a> <a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div> </div>
</div> </div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
@ -196,24 +197,25 @@
<p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> <p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
<p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p> <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt;
</pre> </pre>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide" id="myModal"&gt; &lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt; &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn" data-dismiss="modal"&gt;{{_i}}Close{{/i}}&lt;/a&gt; &lt;a href="#" role="button" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt; &lt;a href="#" role="button" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<div class="alert alert-info"> <div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}} <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
</div> </div>
@ -287,41 +289,42 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns"> <div class="span9 columns">
<h2>{{_i}}Examples{{/i}}</h2> <h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p> <p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
<div id="navbar-example" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="brand" href="#">{{_i}}Project Name{{/i}}</a> <a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
<ul class="nav"> <ul class="nav" role="navigation">
<li class="dropdown"> <li class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li id="fat-menu" class="dropdown"> <li id="fat-menu" class="dropdown">
<a href="#" 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"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -332,33 +335,33 @@ $('#myModal').on('hidden', function () {
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<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" 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"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" 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"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" 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"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
</ul> <!-- /tabs --> </ul> <!-- /tabs -->
@ -378,16 +381,16 @@ $('#myModal').on('hidden', function () {
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
{{_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"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a 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 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 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;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -396,11 +399,11 @@ $('#myModal').on('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt; &lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt; &lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
{{_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"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;

1
js/.jshintrc
View File

@ -4,6 +4,7 @@
"laxbreak" : true, "laxbreak" : true,
"browser" : true, "browser" : true,
"debug" : true, "debug" : true,
"devel" : true,
"boss" : true, "boss" : true,
"expr" : true, "expr" : true,
"asi" : true "asi" : true

80
js/bootstrap-dropdown.js vendored
View File

@ -26,7 +26,7 @@
/* DROPDOWN CLASS DEFINITION /* DROPDOWN CLASS DEFINITION
* ========================= */ * ========================= */
var toggle = '[data-toggle="dropdown"]' var toggle = '[data-toggle=dropdown]'
, 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 () {
@ -41,34 +41,82 @@
, toggle: function (e) { , toggle: function (e) {
var $this = $(this) var $this = $(this)
, $parent , $parent
, selector
, isActive , isActive
if ($this.is('.disabled, :disabled')) return if ($this.is('.disabled, :disabled')) return
selector = $this.attr('data-target') $parent = getParent($this)
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open') isActive = $parent.hasClass('open')
clearMenus() clearMenus()
if (!isActive) $parent.toggleClass('open') if (!isActive) {
$parent.toggleClass('open')
$this.focus()
}
return false return false
} }
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
} }
function clearMenus() { function clearMenus() {
$(toggle).parent().removeClass('open') getParent($(toggle))
.removeClass('open')
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
} }
@ -91,10 +139,12 @@
* =================================== */ * =================================== */
$(function () { $(function () {
$('html').on('click.dropdown.data-api', clearMenus) $('html')
.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 + ', [role=menu]' , Dropdown.prototype.keydown)
}) })
}(window.jQuery); }(window.jQuery);

151
js/bootstrap-modal.js vendored
View File

@ -52,8 +52,9 @@
this.isShown = true this.isShown = true
escape.call(this) this.escape()
backdrop.call(this, function () {
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) { if (!that.$element.parent().length) {
@ -69,6 +70,8 @@
that.$element.addClass('in') that.$element.addClass('in')
that.enforceFocus()
transition ? transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown') that.$element.trigger('shown')
@ -91,90 +94,96 @@
$('body').removeClass('modal-open') $('body').removeClass('modal-open')
escape.call(this) this.escape()
$(document).off('focusin.modal')
this.$element.removeClass('in') this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) : this.hideWithTransition() :
hideModal.call(this) this.hideModal()
} }
} , enforceFocus: function () {
var that = this
$(document).on('focusin.modal', function (e) {
/* MODAL PRIVATE METHODS if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
* ===================== */ that.$element.focus()
}
function hideWithTransition() { })
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
backdrop.call(this)
}
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow , escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
this.$backdrop.addClass('in') , hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
doAnimate ? this.$element.one($.support.transition.end, function () {
this.$backdrop.one($.support.transition.end, callback) : clearTimeout(timeout)
callback() that.hideModal()
})
}
} else if (!this.isShown && this.$backdrop) { , hideModal: function (that) {
this.$backdrop.removeClass('in') this.$element
.hide()
.trigger('hidden')
$.support.transition && this.$element.hasClass('fade')? this.backdrop()
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : }
removeBackdrop.call(this)
} else if (callback) { , removeBackdrop: function () {
callback() this.$backdrop.remove()
} this.$backdrop = null
} }
function removeBackdrop() { , backdrop: function (callback) {
this.$backdrop.remove() var that = this
this.$backdrop = null , animate = this.$element.hasClass('fade') ? 'fade' : ''
}
function escape() { if (this.isShown && this.options.backdrop) {
var that = this var doAnimate = $.support.transition && animate
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) { this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
e.which == 27 && that.hide() .appendTo(document.body)
})
} else if (!this.isShown) { if (this.options.backdrop != 'static') {
$(document).off('keyup.dismiss.modal') this.$backdrop.click($.proxy(this.hide, this))
} }
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
} else if (callback) {
callback()
}
}
} }

9
less/dropdowns.less
View File

@ -34,11 +34,16 @@
margin-top: 8px; margin-top: 8px;
margin-left: 2px; margin-left: 2px;
} }
.dropdown:hover .caret, .dropdown a:focus .caret,
.dropdown a:hover .caret,
.open .caret { .open .caret {
.opacity(100); .opacity(100);
} }
.navbar .nav .open > a {
color: @navbarLinkColorActive;
}
// The dropdown menu (ul) // The dropdown menu (ul)
// ---------------------- // ----------------------
.dropdown-menu { .dropdown-menu {
@ -89,11 +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 {
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
text-decoration: none; text-decoration: none;
background-color: @dropdownLinkBackgroundHover; background-color: @dropdownLinkBackgroundHover;
outline: 0;
} }
// Open state for the dropdown // Open state for the dropdown

5
less/navbar.less
View File

@ -222,6 +222,7 @@
padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
} }
// Hover // Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover; color: @navbarLinkColorHover;
@ -230,7 +231,8 @@
// Active nav items // Active nav items
.navbar .nav .active > a, .navbar .nav .active > a,
.navbar .nav .active > a:hover { .navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: @navbarLinkColorActive; color: @navbarLinkColorActive;
text-decoration: none; text-decoration: none;
background-color: @navbarLinkBackgroundActive; background-color: @navbarLinkBackgroundActive;
@ -337,6 +339,7 @@
} }
// Dropdown link on hover // Dropdown link on hover
.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
.navbar .nav li.dropdown.active > .dropdown-toggle:hover { .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
color: @white; color: @white;
} }