mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
headerTitles widget: lots of new options
foo
This commit is contained in:
Mottie
parent
35be6689fb
commit
48b642124d
16
docs/css/tipsy.css
Normal file
16
docs/css/tipsy.css
Normal file
@ -0,0 +1,16 @@
|
||||
/* tipsy */
|
||||
.tipsy{font-size:12px;position:absolute;z-index:100000;padding:5px;}
|
||||
.tipsy-inner{background-color:#000;color:#FFF;max-width:250px;text-align:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px;}
|
||||
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000;}
|
||||
.tipsy-arrow-n{border-bottom-color:#000;}
|
||||
.tipsy-arrow-s{border-top-color:#000;}
|
||||
.tipsy-arrow-e{border-left-color:#000;}
|
||||
.tipsy-arrow-w{border-right-color:#000;}
|
||||
.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
@ -10,8 +10,12 @@
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/jquery.tipsy.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
@ -21,17 +25,94 @@
|
||||
<script src="../js/widgets/widget-headerTitles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
|
||||
var updateTooltips = function($cell, txt) {
|
||||
// dynamically update tipsy
|
||||
if ($cell.is(':hover')) {
|
||||
$cell
|
||||
.attr({ title : txt, 'original-title': txt })
|
||||
// hide, then show the tooltip to force updating & realignment
|
||||
.tipsy('hide')
|
||||
.tipsy('show');
|
||||
}
|
||||
return txt;
|
||||
};
|
||||
|
||||
$("#table1").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
headerTitle_prefix : 'Sort: ',
|
||||
headerTitle_text : [ 'A - Z', 'Z - A' ],
|
||||
headerTitle_numeric : [ '0 - 9', '9 - 0' ]
|
||||
headerTitle_useAria : true,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// This table is showing all of the headerTitle widget options
|
||||
$("#table2").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
// third click resets the sort
|
||||
sortReset: true,
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
// headerTitle_prefix : 'Sort: ', // option has been deprecated
|
||||
// use aria-label text
|
||||
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
|
||||
headerTitle_useAria : false,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// custom titles [ "ascending", "descending", "unsorted" ]
|
||||
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
|
||||
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
|
||||
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],
|
||||
|
||||
// title display; {prefix} adds above prefix
|
||||
// {type} adds the current sort order from above (text or numeric)
|
||||
// {next} adds the next sort direction using the sort order above
|
||||
headerTitle_output_sorted : '{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : '{current}; activate to {next}',
|
||||
headerTitle_output_nosort : 'No sort available',
|
||||
// use this type to override the parser detection result
|
||||
// e.g. use for numerically parsed columns (e.g. dates), but you
|
||||
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
|
||||
// use '' (empty string) to use the default
|
||||
headerTitle_type : ['', '', '', '', '', 'text'],
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// using defaults, no tooltips
|
||||
$("#table3").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles']
|
||||
});
|
||||
|
||||
// add tooltip
|
||||
$('.tooltip').tipsy({ gravity: 's' });
|
||||
|
||||
// switch aria mode
|
||||
var $state = $('#usearia'),
|
||||
$table1 = $('#table1'),
|
||||
// first table only
|
||||
wo = $table1[0].config.widgetOptions;
|
||||
$('button').on('click', function(){
|
||||
wo.headerTitle_useAria = !wo.headerTitle_useAria;
|
||||
// show current state in demo
|
||||
$state.text( wo.headerTitle_useAria );
|
||||
// force headerTitles widget to update
|
||||
$table1.trigger('refreshHeaderTitle');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
@ -45,70 +126,187 @@
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">2.15.7</span>,
|
||||
<ul>
|
||||
<li>Sorry for all of these breaking changes, I should have left this widget in beta.</li>
|
||||
<li>The <code>headerTitle_prefix</code>, <code>headerTitle_text</code>, <code>headerTitle_numeric</code> options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.</li>
|
||||
<li>Added <code>headerTitle_useAria</code>, <code>headerTitle_tooltip</code>, <code>headerTitle_output_sorted</code>, <code>headerTitle_output_unsorted</code>, <code>headerTitle_output_nosort</code>, <code>headerTitle_cur_text</code>, <code>headerTitle_cur_numeric</code>, <code>headerTitle_nxt_text</code>, <code>headerTitle_nxt_numeric</code>, <code>headerTitle_type</code> & <code>headerTitle_callback</code> options. See the options section below for more details.</li>
|
||||
<li>Added <code>"refreshHeaderTitle"</code> method to force the widget to update.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This widget adds a title to the table headers when they are sorted.</li>
|
||||
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
|
||||
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup>
|
||||
<col style="width:50px;">
|
||||
<col style="width:120px;">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>headerTitle_useAria</td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
When <code>true</code>, the headers titles are extracted from the <code>aria-label</code>. The text in that label is built from the <a href="http://mottie.github.io/tablesorter/docs/#variable-language"><code>$.tablesorter.language</code> option</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_tooltip</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Add a (tooltip) class name to the header, yeah you could have used the <a href="http://mottie.github.io/tablesorter/docs/#cssheader"><code>cssHeader</code> option</a> to do the same thing, but this option allows adding classes using an array.
|
||||
<pre class="prettyprint lang-js">headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_cur_text<br>
|
||||
headerTitle_cur_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{current}</code> 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.<br>
|
||||
<br>
|
||||
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
|
||||
headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_nxt_text<br>
|
||||
headerTitle_nxt_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{next}</code> 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.<br>
|
||||
<br>
|
||||
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_output_sorted<br>
|
||||
headerTitle_output_unsorted<br>
|
||||
headerTitle_output_nosort
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
Set the output string for each sort condition: sorted, unsorted or sorting disabled.<br>
|
||||
<br>
|
||||
Each of these option strings can include a <code>{name}</code>, <code>{current}</code> and <code>{next}</code> tag.
|
||||
<ul>
|
||||
<li>The <code>{name}</code> tag is replaced by the header text.</li>
|
||||
<li>The <code>{current}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_cur_text</code> or <code>headerTitle_cur_numeric</code> option.</li>
|
||||
<li>The <code>{next}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_nxt_text</code> or <code>headerTitle_nxt_numeric</code> option.</li>
|
||||
</ul>
|
||||
Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_output_sorted : 'current{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
|
||||
headerTitle_output_nosort : 'No sort available'</pre>
|
||||
Note: the reason "activate" is used instead of "click" is because the user can also <kbd>Tab</kbd> to the header cell and press <kbd>Enter</kbd> to initiate a sort.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_type</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Each column type is determined by the parser <code>type</code> 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.<br>
|
||||
<br>
|
||||
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.
|
||||
<pre class="prettyprint lang-js">headerTitle_type : ['', '', '', '', '', 'text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_callback</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
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 <code>$cell</code> (the header cell as a jQuery object), and the processed text (<code>txt</code>). The function <strong>must</strong> return the text!
|
||||
<pre class="prettyprint lang-js">headerTitle_callback : function($cell, txt) {
|
||||
return txt;
|
||||
}</pre>In this demo, you will notice that this function is used to dynamically update the tooltip.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Method</a></h3>
|
||||
<div>
|
||||
<h3>Force headerTitle widget update</h3>
|
||||
If you need to programmically force the header title to update, trigger a <code>refreshHeaderTitle</code> event on the table:
|
||||
<pre class="prettyprint lang-js">$('table').trigger('refreshHeaderTitle');</pre>
|
||||
In this demo, this method is used when switching between the default header title and aria-label text.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Evans</td>
|
||||
<td>33</td>
|
||||
<td>$9.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>22</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<div id="demo">
|
||||
|
||||
<h3>Tooltip plugin using togglable aria-label text</h3>
|
||||
<button>use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||||
|
||||
<table id="table1">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Tooltip plugin with alternative titles</h3>
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>No Tooltip Plugin</h3>
|
||||
<table id="table3">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
|
||||
@ -404,7 +404,7 @@
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li><a href="example-widget-header-titles.html">Header titles widget</a> (<span class="version">v2.15.6</span>)</li>
|
||||
<li><a href="example-widget-header-titles.html">Header titles widget</a> (v2.15.6; <span class="version updated">2.15.7</span>)</li>
|
||||
|
||||
<li><a href="example-pager.html">Pager plugin</a> (<span class="version updated">v2.15</span>).</li>
|
||||
<li>
|
||||
|
||||
7
docs/js/jquery.tipsy.min.js
vendored
Normal file
7
docs/js/jquery.tipsy.min.js
vendored
Normal file
@ -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('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>'));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<c.length?c[1]:!1,g=b(document).scrollTop()+a,h=b(document).scrollLeft()+a,e=b(this);e.offset().top<g&&(d="n");e.offset().left<h&&(f="w");b(window).width()+b(document).scrollLeft()- e.offset().left<a&&(f="e");b(window).height()+b(document).scrollTop()-e.offset().top<a&&(d="s");return d+(f?f:"")}}})(jQuery);
|
||||
@ -6,26 +6,85 @@
|
||||
/*global jQuery: false */
|
||||
;(function($){
|
||||
"use strict";
|
||||
var ts = $.tablesorter;
|
||||
|
||||
$.tablesorter.addWidget({
|
||||
ts.addWidget({
|
||||
id: 'headerTitles',
|
||||
options: {
|
||||
headerTitle_prefix : 'Sort: ',
|
||||
headerTitle_text : [ 'A - Z', 'Z - A' ],
|
||||
headerTitle_numeric : [ '0 - 9', '9 - 0' ]
|
||||
// use aria-label text
|
||||
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
|
||||
headerTitle_useAria : false,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : '',
|
||||
// custom titles [ ascending, descending, unsorted ]
|
||||
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 : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ],
|
||||
|
||||
// title display; {prefix} adds above prefix
|
||||
// {type} adds the current sort order from above (text or numeric)
|
||||
// {next} adds the next sort direction using the sort order above
|
||||
headerTitle_output_sorted : 'current{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
|
||||
headerTitle_output_nosort : 'No sort available',
|
||||
// use this type to override the parser detection result
|
||||
// e.g. use for numerically parsed columns (e.g. dates), but you
|
||||
// want the user to see a text sort, e.g. [ 'text', 'numeric' ]
|
||||
headerTitle_type : [],
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : null // function($cell, txt) { return txt; }
|
||||
},
|
||||
init: function(table, thisWidget, c, wo){
|
||||
// force refresh
|
||||
c.$table.on('refreshHeaderTitle', function(){
|
||||
thisWidget.format(table, c, wo);
|
||||
});
|
||||
// add tooltip class
|
||||
if ($.isArray(wo.headerTitle_tooltip)) {
|
||||
c.$headers.each(function(){
|
||||
$(this).addClass( wo.headerTitle_tooltip[this.column] || '' );
|
||||
});
|
||||
} else if (wo.headerTitle_tooltip !== '') {
|
||||
c.$headers.addClass( wo.headerTitle_tooltip );
|
||||
}
|
||||
},
|
||||
format: function (table, c, wo) {
|
||||
var txt;
|
||||
// clear out all titles
|
||||
c.$headers.attr('title', '');
|
||||
// only add titles to sorted columns
|
||||
$.each(c.sortList, function(indx, group) {
|
||||
txt = wo.headerTitle_prefix + wo['headerTitle_' + (c.parsers[ group[0] ].type || 'text')][ group[1] ];
|
||||
c.$headers.filter('[data-column="' + group[0] + '"]').attr('title', txt);
|
||||
c.$headers.each(function(){
|
||||
var t = this,
|
||||
$this = $(this),
|
||||
sortType = wo.headerTitle_type[t.column] || c.parsers[ t.column ].type || 'text',
|
||||
sortDirection = $this.hasClass(ts.css.sortAsc) ? 0 : $this.hasClass(ts.css.sortDesc) ? 1 : 2,
|
||||
sortNext = t.order[(t.count + 1) % (c.sortReset ? 3 : 2)];
|
||||
if (wo.headerTitle_useAria) {
|
||||
txt = $this.hasClass('sorter-false') ? wo.headerTitle_output_nosort : $this.attr('aria-label') || '';
|
||||
} else {
|
||||
txt = (wo.headerTitle_prefix || '') + // now deprecated
|
||||
($this.hasClass('sorter-false') ? wo.headerTitle_output_nosort :
|
||||
ts.isValueInArray( t.column, c.sortList ) >= 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 );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user