From 0255f47eb3f4967851d014a9ef6fdf49a37dc548 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 21:36:58 -0800 Subject: [PATCH 1/3] add zindex option for tooltips/popovers and fix modal zindex doc example --- docs/assets/js/application.js | 9 ++++++++- docs/javascript.html | 14 +++++++++++++- docs/templates/pages/javascript.mustache | 14 +++++++++++++- js/bootstrap-tooltip.js | 4 ++++ 4 files changed, 38 insertions(+), 3 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 02cc730bd3..a071a855b4 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -106,7 +106,14 @@ $(function () { $('.tooltip-demo.well').tooltip({ selector: "a[rel=tooltip]" }) - $('.tooltip-test').tooltip() + + $('.tooltip-test').tooltip({ + 'z-index': 3000 + }) + + $('.popover-test').popover({ + 'z-index': 3000 + }) // popover demo $("a[rel=popover]") diff --git a/docs/javascript.html b/docs/javascript.html index 24de47157f..6bec3d122a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -221,7 +221,7 @@

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

Popover in a modal

-

This button should trigger a popover on hover.

+

This button should trigger a popover on hover.

Tooltips in a modal

This link and that link should have tooltips on hover.

@@ -740,6 +740,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Object structure is: delay: { show: 500, hide: 100 }

+ + z-index + number + 1020 + The tooltips z-index value +

Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.

@@ -840,6 +846,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Object structure is: delay: { show: 500, hide: 100 }

+ + z-index + number + 1010 + The popovers z-index value +

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 6e3ba25da4..ec711a3125 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -156,7 +156,7 @@

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

{{_i}}Popover in a modal{{/i}}

-

{{_i}}This button should trigger a popover on hover.{{/i}}

+

{{_i}}This button should trigger a popover on hover.{{/i}}

{{_i}}Tooltips in a modal{{/i}}

{{_i}}This link and that link should have tooltips on hover.{{/i}}

@@ -675,6 +675,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

+ + {{_i}}z-index{{/i}} + {{_i}}number{{/i}} + 1020 + The tooltips z-index value +

{{_i}}Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}

@@ -775,6 +781,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

+ + {{_i}}z-index{{/i}} + {{_i}}number{{/i}} + 1010 + The popovers z-index value +

{{_i}}Notice Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}

diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index 21f2311fb2..65f8895aa5 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -145,6 +145,9 @@ break } + debugger + if (this.options['z-index']) tp['z-index'] = this.options['z-index'] + $tip .css(tp) .addClass(placement) @@ -265,6 +268,7 @@ , trigger: 'hover' , title: '' , template: '
' + , 'z-index': false } }( window.jQuery ) From e726b231ba0c0c0effb13c9458842d64bda0e58c Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 21:59:06 -0800 Subject: [PATCH 2/3] add toggle to docs for popover/tooltip --- docs/assets/css/bootstrap.css | 2 +- docs/javascript.html | 6 ++++++ docs/templates/pages/javascript.mustache | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d9e8213dc2..ebe480eec6 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1978,7 +1978,7 @@ table .span12 { .navbar-search .search-query :-moz-placeholder { color: #eeeeee; } -.navbar-search .search-query ::-webkit-input-placeholder { +.navbar-search .search-query::-webkit-input-placeholder { color: #eeeeee; } .navbar-search .search-query:hover { diff --git a/docs/javascript.html b/docs/javascript.html index 6bec3d122a..d489241157 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -760,6 +760,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.tooltip('hide')

Hides an elements tooltip.

$('#element').tooltip('hide')
+

.tooltip('toggle')

+

Toggles an elements tooltip.

+ 
$('#element').tooltip('toggle')
@@ -868,6 +871,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')
+

.popover('toggle')

+

Toggles an elements popover.

+ 
$('#element').popover('toggle')
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index ec711a3125..9113c1776f 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -695,6 +695,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.tooltip('hide')

{{_i}}Hides an elements tooltip.{{/i}}

$('#element').tooltip('hide')
+

.tooltip('toggle')

+

{{_i}}Toggles an elements tooltip.{{/i}}

+ 
$('#element').tooltip('toggle')
@@ -803,6 +806,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.popover('hide')

{{_i}}Hides an elements popover.{{/i}}

$('#element').popover('hide')
+

.popover('toggle')

+

{{_i}}Toggles an elements popover.{{/i}}

+ 
$('#element').popover('toggle')
From 7cbb5868259ef95aacbd16812c25ac73ea76ca2d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 22:27:06 -0800 Subject: [PATCH 3/3] move the matcher and sorter into the options - encourage people to override them... --- docs/javascript.html | 17 ++++++++++++++++- docs/templates/pages/javascript.mustache | 17 ++++++++++++++++- js/bootstrap-typeahead.js | 21 ++++++++++++--------- 3 files changed, 44 insertions(+), 11 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index d489241157..53130bd16f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1353,7 +1353,7 @@ $('.myCarousel').carousel({ Name type - default + default description @@ -1370,6 +1370,18 @@ $('.myCarousel').carousel({ 8 The max number of items to display in the dropdown. + + matcher + function + case sensitive + The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match. + + + sorter + function + no sort + Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query. + @@ -1378,6 +1390,9 @@ $('.myCarousel').carousel({ 
 <input type="text" data-provide="typeahead">
+

Methods

+

.typeahead(options)

+

Initializes an input with a typahead.

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 9113c1776f..3c7a3b101f 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1288,7 +1288,7 @@ $('.myCarousel').carousel({ {{_i}}Name{{/i}} {{_i}}type{{/i}} - {{_i}}default{{/i}} + {{_i}}default{{/i}} {{_i}}description{{/i}} @@ -1305,6 +1305,18 @@ $('.myCarousel').carousel({ 8 {{_i}}The max number of items to display in the dropdown.{{/i}} + + {{_i}}matcher{{/i}} + {{_i}}function{{/i}} + case sensitive + {{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}} + + + {{_i}}sorter{{/i}} + {{_i}}function{{/i}} + no sort + {{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}} + @@ -1313,6 +1325,9 @@ $('.myCarousel').carousel({ 
 <input type="text" data-provide="typeahead">
+

{{_i}}Methods{{/i}}

+

.typeahead({{_i}}options{{/i}})

+

{{_i}}Initializes an input with a typahead.{{/i}}

\ No newline at end of file diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index b4d839c936..39331816e8 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -24,6 +24,8 @@ var Typeahead = function ( element, options ) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) + this.matcher = this.options.matcher + this.sorter = this.options.sorter this.$menu = $(this.options.menu).appendTo('body') this.source = this.options.source this.shown = false @@ -34,11 +36,6 @@ constructor: Typeahead - , matcher: function (item, query) { - // ;_; http://jsperf.com/asdfdfasdfa - return ~item.toLowerCase().indexOf(query) - } - , select: function () { var val = this.$menu.find('.active').attr('data-value') this.$element.val(val) @@ -77,12 +74,12 @@ return this.shown ? this.hide() : this } - q = this.query.toLowerCase() - - items = jQuery.grep(this.source, function (item) { - if (that.matcher(item, q)) return item + items = $.grep(this.source, function (item) { + if (that.matcher(item)) return item }) + items = this.sorter(items) + if (!items.length) { return this.shown ? this.hide() : this } @@ -233,6 +230,12 @@ , items: 8 , menu: '
    ' , item: '
    • ' + , matcher: function (item) { + return ~item.indexOf(this.query) + } + , sorter: function (items) { + return items + } } $.fn.typeahead.Constructor = Typeahead