X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=webapp%2Fresources%2Fdatatables-1.9.4%2Fextras%2FKeyTable%2Findex.html;fp=webapp%2Fresources%2Fdatatables-1.9.4%2Fextras%2FKeyTable%2Findex.html;h=1162d52d0563c19895e4652e6f42461383514ca4;hb=9bb6ee99ca7f738fac1087190b5481b8fe6e8d9f;hp=0000000000000000000000000000000000000000;hpb=2e3f6b76be585306f1003d849831840c0adb3360;p=proteocache.git diff --git a/webapp/resources/datatables-1.9.4/extras/KeyTable/index.html b/webapp/resources/datatables-1.9.4/extras/KeyTable/index.html new file mode 100644 index 0000000..1162d52 --- /dev/null +++ b/webapp/resources/datatables-1.9.4/extras/KeyTable/index.html @@ -0,0 +1,595 @@ + + + + + + + KeyTables example + + + + + + +
+
+ KeyTable example +
+ +

Preamble

+

KeyTable allows you to use keyboard navigation on an HTML table. The focused cell is shown through the CSS class ('focus') which in the case below is simply a blue border. Events such as 'focus', 'blur', 'esc' (the escape key) and 'return' (the return key) can be assigned event handling functions thought the API presented.

+

The example shown below has a few cells (selected at random, but near the top) with blur and focus events assigned to them. You can also see the navigation around the table using arrow keys.

+ +

Live example

+
+ Event information:
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet Explorer 4.0 (focus once)Win 95+4X
TridentInternet Explorer 5.0Win 95+ (blur)5C
Trident (focus)Internet Explorer 5.5Win 95+ (action/bold)5.5A
TridentInternet Explorer 6 (focus)Win 98+6A
TridentInternet Explorer 7Win XP SP2+ (blur)7A
TridentAOL browser (AOL desktop)Win XP (action/italic)6A
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
Gecko (focus - row)Firefox 1.5Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
GeckoCamino 1.0OSX.2+1.8A
GeckoCamino 1.5OSX.3+1.8A
GeckoNetscape 7.2Win 95+ / Mac OS 8.6-9.21.7A
GeckoNetscape Browser 8Win 98SE+1.7A
GeckoNetscape Navigator 9Win 98+ / OSX.2+1.8A
GeckoMozilla 1.0Win 95+ / OSX.1+1A
GeckoMozilla 1.1Win 95+ / OSX.1+1.1A
GeckoMozilla 1.2Win 95+ / OSX.1+1.2A
GeckoMozilla 1.3Win 95+ / OSX.1+1.3A
GeckoMozilla 1.4Win 95+ / OSX.1+1.4A
GeckoMozilla 1.5Win 95+ / OSX.1+1.5A
GeckoMozilla 1.6Win 95+ / OSX.1+1.6A
GeckoMozilla 1.7Win 98+ / OSX.1+1.7A
GeckoMozilla 1.8Win 98+ / OSX.1+1.8A
GeckoSeamonkey 1.1Win 98+ / OSX.2+1.8A
GeckoEpiphany 2.20Gnome1.8A
WebkitSafari 1.2OSX.3125.5A
WebkitSafari 1.3OSX.3312.8A
WebkitSafari 2.0OSX.4+419.3A
WebkitSafari 3.0OSX.4+522.1A
WebkitOmniWeb 5.5OSX.4+420A
WebkitiPod Touch / iPhoneiPod420.1A
WebkitS60S60413A
PrestoOpera 7.0Win 95+ / OSX.1+-A
PrestoOpera 7.5Win 95+ / OSX.2+-A
PrestoOpera 8.0Win 95+ / OSX.2+-A
PrestoOpera 8.5Win 95+ / OSX.2+-A
PrestoOpera 9.0Win 95+ / OSX.3+-A
PrestoOpera 9.2Win 88+ / OSX.3+-A
PrestoOpera 9.5Win 88+ / OSX.3+-A
PrestoOpera for WiiWii-A
PrestoNokia N800N800-A
PrestoNintendo DS browserNintendo DS8.5C/A1
KHTMLKonqureror 3.1KDE 3.13.1C
KHTMLKonqureror 3.3KDE 3.33.3A
KHTMLKonqureror 3.5KDE 3.53.5A
TasmanInternet Explorer 4.5Mac OS 8-9-X
TasmanInternet Explorer 5.1Mac OS 7.6-91C
TasmanInternet Explorer 5.2Mac OS 8-X1C
MiscNetFront 3.1Embedded devices-C
MiscNetFront 3.4Embedded devices-A
MiscDillo 0.8Embedded devices-X
MiscLinksText only-X
MiscLynxText only-X
MiscIE MobileWindows Mobile 6-C
MiscPSP browserPSP-C
Other browsersAll others--U
+
+
+ + +

Initialisation code

+ 
function fnMessage ( sMesg )
+{
+	var n = document.getElementById('info');
+	n.innerHTML += sMesg+"<br>";
+	n.scrollTop = n.scrollHeight;
+}
+
+$(document).ready( function () {
+	var keys = new KeyTable();
+	
+	/* Focus handler for all cells in last column */
+	keys.event.focus( 4, null, function( nNode, x, y ) {
+		fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
+	} );
+	
+	/* Focus handler for all cells in 8th row */
+	keys.event.focus( null, 7, function( nNode, x, y ) {
+		fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
+	} );
+	
+	/* Focus using coords. */
+	keys.event.focus( 1, 0, function( nNode ) {
+		keys.event.remove.focus( nNode );
+		fnMessage( "Cell 1,0 focus - this event has now been removed" );
+	} );
+	
+	keys.event.focus( 1, 3, function() {
+		fnMessage( "Cell 1,3 focus" );
+	} );
+	
+	/* focus with a node */
+	keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
+		fnMessage( "Cell 0,2 focus" );
+	} );
+	
+	/* Blur using a node */
+	keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
+		fnMessage( "Cell 1,2 blur" );
+	} );
+	
+	/* Blur using coords */
+	keys.event.blur( 2, 4, function() {
+		fnMessage( "Cell 2,4 blur" );
+	} );
+	
+	/* Action */
+	keys.event.action( 2, 2, function( nNode ) {
+		fnMessage( "Cell 2,2 action" );
+		if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
+			nNode.style.fontWeight = "bold";
+		} else {
+			nNode.style.fontWeight = "normal";
+		}
+	} );
+	
+	keys.event.action( 2, 5, function( nNode ) {
+		fnMessage( "Cell 2,5 action" );
+		if ( nNode.style.fontStyle == "" ) {
+			nNode.style.fontStyle = "italic";
+		} else {
+			nNode.style.fontStyle = "";
+		}
+	} );
+} );
+ + +

Other examples

+ + + +
+ + \ No newline at end of file