X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fadvanced_init%2Fhighlight.html;fp=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fadvanced_init%2Fhighlight.html;h=139a90fc7bd11688592f30770a7b90e27d229ab5;hb=9bb6ee99ca7f738fac1087190b5481b8fe6e8d9f;hp=0000000000000000000000000000000000000000;hpb=2e3f6b76be585306f1003d849831840c0adb3360;p=proteocache.git diff --git a/webapp/resources/datatables-1.9.4/examples/advanced_init/highlight.html b/webapp/resources/datatables-1.9.4/examples/advanced_init/highlight.html new file mode 100644 index 0000000..139a90f --- /dev/null +++ b/webapp/resources/datatables-1.9.4/examples/advanced_init/highlight.html @@ -0,0 +1,643 @@ + + +
+ + + +When highlighting rows using CSS :hover, you need to be aware of the sorting class which is applied to elements in the column currently being sorted (assuming it is enabled - it is by default). This example shows how to consider this in CSS, with highlighting for each row, and a little tint for the sorting column to maintain it's visibility as the column currently being sorted upon.
+ +Rendering engine | +Browser | +Platform(s) | +Engine version | +CSS grade | +
---|---|---|---|---|
Trident | +Internet + Explorer 4.0 | +Win 95+ | +4 | +X | +
Trident | +Internet + Explorer 5.0 | +Win 95+ | +5 | +C | +
Trident | +Internet + Explorer 5.5 | +Win 95+ | +5.5 | +A | +
Trident | +Internet + Explorer 6 | +Win 98+ | +6 | +A | +
Trident | +Internet Explorer 7 | +Win XP SP2+ | +7 | +A | +
Trident | +AOL browser (AOL desktop) | +Win XP | +6 | +A | +
Gecko | +Firefox 1.0 | +Win 98+ / OSX.2+ | +1.7 | +A | +
Gecko | +Firefox 1.5 | +Win 98+ / OSX.2+ | +1.8 | +A | +
Gecko | +Firefox 2.0 | +Win 98+ / OSX.2+ | +1.8 | +A | +
Gecko | +Firefox 3.0 | +Win 2k+ / OSX.3+ | +1.9 | +A | +
Gecko | +Camino 1.0 | +OSX.2+ | +1.8 | +A | +
Gecko | +Camino 1.5 | +OSX.3+ | +1.8 | +A | +
Gecko | +Netscape 7.2 | +Win 95+ / Mac OS 8.6-9.2 | +1.7 | +A | +
Gecko | +Netscape Browser 8 | +Win 98SE+ | +1.7 | +A | +
Gecko | +Netscape Navigator 9 | +Win 98+ / OSX.2+ | +1.8 | +A | +
Gecko | +Mozilla 1.0 | +Win 95+ / OSX.1+ | +1 | +A | +
Gecko | +Mozilla 1.1 | +Win 95+ / OSX.1+ | +1.1 | +A | +
Gecko | +Mozilla 1.2 | +Win 95+ / OSX.1+ | +1.2 | +A | +
Gecko | +Mozilla 1.3 | +Win 95+ / OSX.1+ | +1.3 | +A | +
Gecko | +Mozilla 1.4 | +Win 95+ / OSX.1+ | +1.4 | +A | +
Gecko | +Mozilla 1.5 | +Win 95+ / OSX.1+ | +1.5 | +A | +
Gecko | +Mozilla 1.6 | +Win 95+ / OSX.1+ | +1.6 | +A | +
Gecko | +Mozilla 1.7 | +Win 98+ / OSX.1+ | +1.7 | +A | +
Gecko | +Mozilla 1.8 | +Win 98+ / OSX.1+ | +1.8 | +A | +
Gecko | +Seamonkey 1.1 | +Win 98+ / OSX.2+ | +1.8 | +A | +
Gecko | +Epiphany 2.20 | +Gnome | +1.8 | +A | +
Webkit | +Safari 1.2 | +OSX.3 | +125.5 | +A | +
Webkit | +Safari 1.3 | +OSX.3 | +312.8 | +A | +
Webkit | +Safari 2.0 | +OSX.4+ | +419.3 | +A | +
Webkit | +Safari 3.0 | +OSX.4+ | +522.1 | +A | +
Webkit | +OmniWeb 5.5 | +OSX.4+ | +420 | +A | +
Webkit | +iPod Touch / iPhone | +iPod | +420.1 | +A | +
Webkit | +S60 | +S60 | +413 | +A | +
Presto | +Opera 7.0 | +Win 95+ / OSX.1+ | +- | +A | +
Presto | +Opera 7.5 | +Win 95+ / OSX.2+ | +- | +A | +
Presto | +Opera 8.0 | +Win 95+ / OSX.2+ | +- | +A | +
Presto | +Opera 8.5 | +Win 95+ / OSX.2+ | +- | +A | +
Presto | +Opera 9.0 | +Win 95+ / OSX.3+ | +- | +A | +
Presto | +Opera 9.2 | +Win 88+ / OSX.3+ | +- | +A | +
Presto | +Opera 9.5 | +Win 88+ / OSX.3+ | +- | +A | +
Presto | +Opera for Wii | +Wii | +- | +A | +
Presto | +Nokia N800 | +N800 | +- | +A | +
Presto | +Nintendo DS browser | +Nintendo DS | +8.5 | +C/A1 | +
KHTML | +Konqureror 3.1 | +KDE 3.1 | +3.1 | +C | +
KHTML | +Konqureror 3.3 | +KDE 3.3 | +3.3 | +A | +
KHTML | +Konqureror 3.5 | +KDE 3.5 | +3.5 | +A | +
Tasman | +Internet Explorer 4.5 | +Mac OS 8-9 | +- | +X | +
Tasman | +Internet Explorer 5.1 | +Mac OS 7.6-9 | +1 | +C | +
Tasman | +Internet Explorer 5.2 | +Mac OS 8-X | +1 | +C | +
Misc | +NetFront 3.1 | +Embedded devices | +- | +C | +
Misc | +NetFront 3.4 | +Embedded devices | +- | +A | +
Misc | +Dillo 0.8 | +Embedded devices | +- | +X | +
Misc | +Links | +Text only | +- | +X | +
Misc | +Lynx | +Text only | +- | +X | +
Misc | +IE Mobile | +Windows Mobile 6 | +- | +C | +
Misc | +PSP browser | +PSP | +- | +C | +
Other browsers | +All others | +- | +- | +U | +
Rendering engine | +Browser | +Platform(s) | +Engine version | +CSS grade | +
Javascript:
+$(document).ready(function() { + $('#example').dataTable(); +} );+ + + +
CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.
+.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted { + background-color: #ECFFB3; +} + +.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted { + background-color: #E6FF99; +} + +.ex_highlight_row #example tr.even:hover { + background-color: #ECFFB3; +} + +.ex_highlight_row #example tr.even:hover td.sorting_1 { + background-color: #DDFF75; +} + +.ex_highlight_row #example tr.even:hover td.sorting_2 { + background-color: #E7FF9E; +} + +.ex_highlight_row #example tr.even:hover td.sorting_3 { + background-color: #E2FF89; +} + +.ex_highlight_row #example tr.odd:hover { + background-color: #E6FF99; +} + +.ex_highlight_row #example tr.odd:hover td.sorting_1 { + background-color: #D6FF5C; +} + +.ex_highlight_row #example tr.odd:hover td.sorting_2 { + background-color: #E0FF84; +} + +.ex_highlight_row #example tr.odd:hover td.sorting_3 { + background-color: #DBFF70; +} ++ + +