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

Preamble

+

One of possible use of KeyTable is to use a table as a form element (for example a calendar date selector). For this you want to be table to tab into and out of the table, as you would do with any other form element on the page.

+

The example shown below as a small table as it's third input element, and you can tab between input fields. When the 'focus' reaches the end of the table, hitting tab will take you into the next field.

+ +

Live example

+ + + + + + + + + + + + + + + + + + + + + + + +
Input 1:
Input 2:
Input 3: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet Explorer 4.0Win 95+4X
TridentInternet Explorer 5.0Win 95+5C
TridentInternet Explorer 5.5Win 95+5.5A
TridentInternet Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
+
Input 4:
Input 5:
+
+ + +

Initialisation code

+ 
$(document).ready( function () {
+	var keys = new KeyTable( {
+		"form": true
+	} );
+} );
+ + +

Other examples

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