- NOTE! +
++ +
+
+
+
+
Notes
+-
+
- In 2.15.7,
+
-
+
- Sorry for all of these breaking changes, I should have left this widget in beta. +
- The
headerTitle_prefix,headerTitle_text,headerTitle_numericoptions has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.
+ - Added
headerTitle_useAria,headerTitle_tooltip,headerTitle_output_sorted,headerTitle_output_unsorted,headerTitle_output_nosort,headerTitle_cur_text,headerTitle_cur_numeric,headerTitle_nxt_text,headerTitle_nxt_numeric,headerTitle_type&headerTitle_callbackoptions. See the options section below for more details.
+ - Added
"refreshHeaderTitle"method to force the widget to update.
+
- This widget adds a title to the table headers when they are sorted.
- Click on any header. You may have to move the mouse off, then back on the header to see the title appear.
- This widget will not work with the original tablesorter plugin (v2.0.5).
Options
+
+
+
+
+
+ | Option | Default | Description |
|---|---|---|
| headerTitle_useAria | +false |
+
+ When true, the headers titles are extracted from the aria-label. The text in that label is built from the $.tablesorter.language option.
+ |
+
| headerTitle_tooltip | +"" |
+
+ Add a (tooltip) class name to the header, yeah you could have used the cssHeader option to do the same thing, but this option allows adding classes using an array.
+ headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']+ |
+
|
+ headerTitle_cur_text + headerTitle_cur_numeric + |
+ (see description) | +
+ When any of the header title output options use the {current} tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.+ + The array must contain text for ascending, descending and unsorted state (in that order). Defaults: + headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ], +headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]+ |
+
|
+ headerTitle_nxt_text + headerTitle_nxt_numeric + |
+ (see description) | +
+ When any of the header title output options use the {next} tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.+ + The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults: + headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ], +headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]+ |
+
|
+ headerTitle_output_sorted + headerTitle_output_unsorted + headerTitle_output_nosort + |
+ (see description) | +
+ Set the output string for each sort condition: sorted, unsorted or sorting disabled. + + Each of these option strings can include a {name}, {current} and {next} tag.
+
headerTitle_output_sorted : 'current{current}; activate to {next}',
+headerTitle_output_unsorted : 'current{current}; activate to {next} ',
+headerTitle_output_nosort : 'No sort available'
+ Note: the reason "activate" is used instead of "click" is because the user can also Tab to the header cell and press Enter to initiate a sort.
+ |
+
| headerTitle_type | +[] |
+ Each column type is determined by the parser type value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.+ + As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type. + headerTitle_type : ['', '', '', '', '', 'text']+ |
+
| headerTitle_callback | +null |
+
+ This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters $cell (the header cell as a jQuery object), and the processed text (txt). The function must return the text!
+ headerTitle_callback : function($cell, txt) {
+ return txt;
+}In this demo, you will notice that this function is used to dynamically update the tooltip.
+ |
+
Method
+
+
+
+ Force headerTitle widget update
+ If you need to programmically force the header title to update, trigger arefreshHeaderTitle event on the table:
+ $('table').trigger('refreshHeaderTitle');
+ In this demo, this method is used when switching between the default header title and aria-label text.
+ Demo
-| First Name | -Last Name | -Age | -Total | -Discount | -Date | -
|---|---|---|---|---|---|
| Peter | -Parker | -28 | -$9.99 | -20% | -Jan 18, 2001 9:12 AM | -
| John | -Evans | -33 | -$9.99 | -25% | -Dec 10, 2002 5:14 AM | -
| Clark | -Kent | -22 | -$15.89 | -44% | -Jan 12, 2003 11:14 AM | -
| Bruce | -Almighty | -45 | -$15.89 | -44% | -Jan 18, 2001 9:12 AM | -
| Bruce | -Evans | -22 | -$13.19 | -11% | -Jul 6, 2006 8:14 AM | -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Tooltip plugin using togglable aria-label text
+ : true + +| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM |
| John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
Tooltip plugin with alternative titles
+| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM |
| John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
No Tooltip Plugin
+| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM |
| John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
Javascript
diff --git a/docs/index.html b/docs/index.html
index eaa5adc5..7e3ed1a5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -404,7 +404,7 @@
-Header titles widget (v2.15.6)
+ Header titles widget (v2.15.6; 2.15.7)
Pager plugin (v2.15).
diff --git a/docs/js/jquery.tipsy.min.js b/docs/js/jquery.tipsy.min.js
new file mode 100644
index 00000000..9b730b6a
--- /dev/null
+++ b/docs/js/jquery.tipsy.min.js
@@ -0,0 +1,7 @@
+/* tipsy, facebook style tooltips for jquery
+ * version 1.0.0a
+ * (c) 2008-2010 jason frame [jason@onehackoranother.com]
+ * released under the MIT license
+ * Modified to use themes: https://github.com/Mottie/tipsy
+ */
+(function(b){function l(a,c){this.$element=b(a);this.options=c;this.enabled=!0;this.fixTitle()}l.prototype={show:function(){var a=this.getTitle();if(a&&this.enabled){var c=this.tip(),d=this.options.theme[0]||"black",f=this.options.theme[1]||"white",g;c.find(".tipsy-inner").css({background:d,color:f})[this.options.html?"html":"text"](a);c[0].className="tipsy";c.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).prependTo(document.body);var a=b.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth, height:this.$element[0].offsetHeight}),f=c[0].offsetWidth,h=c[0].offsetHeight,e="function"==typeof this.options.gravity?this.options.gravity.call(this.$element[0]):this.options.gravity,k;switch(e.charAt(0)){case "n":k={top:a.top+a.height+this.options.offset,left:a.left+a.width/2-f/2};g={"border-bottom-color":d};break;case "s":k={top:a.top-h-this.options.offset,left:a.left+a.width/2-f/2};g={"border-top-color":d};break;case "e":k={top:a.top+a.height/2-h/2,left:a.left-f-this.options.offset};g={"border-left-color":d}; break;case "w":k={top:a.top+a.height/2-h/2,left:a.left+a.width+this.options.offset},g={"border-right-color":d}}2==e.length&&("w"==e.charAt(1)?k.left=a.left+a.width/2-15:k.left=a.left+a.width/2-f+15);c.css(k).addClass("tipsy-"+e);c.find(".tipsy-arrow").css(g)[0].className="tipsy-arrow tipsy-arrow-"+e.charAt(0);this.options.className&&c.addClass("function"==typeof this.options.className?this.options.className.call(this.$element[0]):this.options.className);this.options.fade?c.stop().css({opacity:0,display:"block", visibility:"visible"}).animate({opacity:this.options.opacity}):c.css({visibility:"visible",opacity:this.options.opacity})}},hide:function(){this.options.fade?this.tip().stop().fadeOut(function(){b(this).remove()}):this.tip().remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("original-title"))&&a.attr("original-title",a.attr("title")||"").removeAttr("title")},getTitle:function(){var a,b=this.$element,d=this.options;this.fixTitle();d=this.options;"string"== typeof d.title?a=b.attr("title"==d.title?"original-title":d.title):"function"==typeof d.title&&(a=d.title.call(b[0]));return(a=(""+a).replace(/(^\s*|\s*$)/,""))||d.fallback},tip:function(){this.$tip||(this.$tip=b('').html(''));return this.$tip},validate:function(){this.$element[0].parentNode||(this.hide(),this.options=this.$element=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled= !this.enabled}};b.fn.tipsy=function(a){function c(e){var c=b.data(e,"tipsy");c||(c=new l(e,b.fn.tipsy.elementOptions(e,a)),b.data(e,"tipsy",c));return c}function d(){var b=c(this);b.hoverState="in";0==a.delayIn?b.show():(b.fixTitle(),setTimeout(function(){"in"==b.hoverState&&b.show()},a.delayIn))}function f(){var b=c(this);b.hoverState="out";0==a.delayOut?b.hide():setTimeout(function(){"out"==b.hoverState&&b.hide()},a.delayOut)}if(!0===a)return this.data("tipsy");if("string"==typeof a){var g=this.data("tipsy"); if(g)g[a]();return this}a=b.extend({},b.fn.tipsy.defaults,a);a.live||this.each(function(){c(this)});if("manual"!=a.trigger){var g=a.live?"live":"bind",h="hover"==a.trigger?"mouseleave":"blur";this[g]("hover"==a.trigger?"mouseenter":"focus",d)[g](h,f)}return this};b.fn.tipsy.defaults={className:null,delayIn:0,delayOut:0,fade:!1,fallback:"",gravity:"n",html:!1,live:!1,offset:0,opacity:0.8,title:"title",theme:["black","white"],trigger:"hover"};b.fn.tipsy.elementOptions=function(a,c){return b.metadata? b.extend({},c,b(a).metadata()):c};b.fn.tipsy.autoNS=function(){return b(this).offset().top>b(document).scrollTop()+b(window).height()/2?"s":"n"};b.fn.tipsy.autoWE=function(){return b(this).offset().left>b(document).scrollLeft()+b(window).width()/2?"e":"w"};b.fn.tipsy.autoBounds=function(a,c){return function(){var d=c[0],f=1= 0 ? wo.headerTitle_output_sorted : wo.headerTitle_output_unsorted);
+ txt = txt.replace(/\{(current|next|name)\}/gi, function(m){
+ return {
+ '{name}' : $this.text(),
+ '{current}' : wo[ 'headerTitle_cur_' + sortType ][ sortDirection ] || '',
+ '{next}' : wo[ 'headerTitle_nxt_' + sortType ][ sortNext ] || ''
+ }[m.toLowerCase()];
+ });
+ }
+ $this.attr('title', $.isFunction(wo.headerTitle_callback) ? wo.headerTitle_callback($this, txt) : txt);
});
},
- remove: function (table, c) {
+ remove: function (table, c, wo) {
c.$headers.attr('title', '');
+ c.$table.off('refreshHeaderTitle');
+ // remove tooltip class
+ if ($.isArray(wo.headerTitle_tooltip)) {
+ c.$headers.each(function(){
+ $(this).removeClass( wo.headerTitle_tooltip[this.column] || '' );
+ });
+ } else if (wo.headerTitle_tooltip !== '') {
+ c.$headers.removeClass( wo.headerTitle_tooltip );
+ }
}
});
-