// An example of a tabbed form in JQuery UI, based on the example file
// Requires the following files to run: jquery-1.2.6.js, ui.core.js,
// ui.tabs.js, flora.tabs.css, flora.css, i/tabs.png
// Requires the following files to run: jquery-1.2.6.js, ui.core.js,
// ui.tabs.js, flora.tabs.css, flora.css, i/tabs.png
1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3 "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <title>Using JQuery Tabs</title> 7 8 <meta http-equiv="pragma" content="no-cache"> 9 <meta http-equiv="cache-control" content="no-cache"> 10 <meta http-equiv="expires" content="0"> 11 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 12 <meta http-equiv="description" content="This is my page"> 13 14 15 <link rel="stylesheet" href="flora.tabs.css" type="text/css" 16 media="screen" title="Flora Tabs"> 17 <script type="text/javascript" src="jquery-1.2.6.js"></script> 18 <script type="text/javascript" src="ui.core.js"></script> 19 <script type="text/javascript" src="ui.tabs.js"></script> 20 <script type="text/javascript"> 21 22 $(document).ready(function() { 23 24 $("#example > ul").tabs(); 25 26 // if tab is pressed from these fields, show the next tab 27 $("input#zipCode,input#notificationDate").bind("keydown", function(e) { 28 var keynum; 29 var keychar; 30 var numcheck; 31 32 if(window.event) // IE 33 { 34 keynum = e.keyCode; 35 } 36 else if(e.which) // Netscape/Firefox/Opera 37 { 38 keynum = e.which; 39 } 40 keychar = String.fromCharCode(keynum); 41 numcheck = /\t/; 42 if (numcheck.test(keychar)) { //it's a tab 43 selectNextTab(); 44 setFocus(); 45 } 46 }); 47 48 }); 49 50 51 52 function selectNextTab() { 53 var $tabs = $('#example > ul').tabs(); 54 var selected = $tabs.data('selected.tabs'); 55 56 switch(selected) { 57 case 0: 58 $('#example > ul').tabs('select', 1); 59 break; 60 61 case 1: 62 $('#example > ul').tabs('select', 2); 63 break; 64 65 case 2: 66 $('#example > ul').tabs('select', 3); 67 break; 68 69 } 70 } 71 72 function setFocus() { 73 var $tabs = $('#example > ul').tabs(); 74 var selected = $tabs.data('selected.tabs'); 75 76 switch(selected) { 77 case 1: 78 $('input#notificationtype').select(); 79 break; 80 81 case 2: 82 $('input#householdIncome').select(); 83 break; 84 85 case 3: 86 $('input#testInput').select(); 87 break; 88 } 89 90 91 } 92 93 </script> 94 </head> 95 <body> 96 97 <div id="example" class="flora"> 98 <ul> 99 100 <li> 101 <a href="#fragment-1"><span>The first thing</span> </a> 102 </li> 103 <li> 104 <a href="#fragment-2"><span>Second Thing</span> </a> 105 </li> 106 <li> 107 <a href="#fragment-3"><span>Thing Three</span> </a> 108 </li> 109 </ul> 110 <div id="fragment-1"> 111 <table width="98%" align="center"> 112 <tr> 113 <td width="10%"> 114 Address 1 115 </td> 116 <td> 117 <input type="text" id="address1" name="address1" 118 tabindex="1" size="45"> 119 </td> 120 </tr> 121 <tr> 122 <td> 123 Address 2 124 </td> 125 <td> 126 <input type="text" name="address2" tabindex="2" 127 size="45"> 128 </td> 129 </tr> 130 <tr> 131 <td> 132 City 133 </td> 134 <td> 135 <input type="text" name="city" tabindex="3"> 136 </td> 137 <td> 138 State 139 </td> 140 <td> 141 <select tabindex="4"> 142 <option> 143 Florida 144 </option> 145 <option> 146 New York 147 </option> 148 </select> 149 </td> 150 <td> 151 Zip Code 152 </td> 153 <td> 154 <input type="text" id="zipCode" name="zipCode" 155 tabindex="5"> 156 </td> 157 </tr> 158 </table> 159 160 161 </div> 162 <div id="fragment-2"> 163 <table width="98%" align="center"> 164 <tr> 165 <td width="20%"> 166 <span style="text-decoration: none; color: black;"> 167 Notification Type</span> 168 </td> 169 <td colspan="2"> 170 <input type="text" id="notificationtype" 171 tabindex="6"> 172 </td> 173 <td> 174 <span style="color: black">Notificaton Date</span> 175 </td> 176 <td colspan="1"> 177 <input type="text" id="notificationDate" 178 name="notificationDate" tabindex="7"> 179 </td> 180 </tr> 181 </table> 182 183 </div> 184 <div id="fragment-3"> 185 <table width="98%" align="center"> 186 <tr> 187 <td width="20%"> 188 <span style="text-decoration: none; color: black;">Test 189 Select</span> 190 </td> 191 <td colspan="2"> 192 <select id="testSelect" tabindex="8"> 193 <option> 194 One thing 195 </option> 196 <option> 197 The other Thing 198 </option> 199 </select> 200 </td> 201 <td> 202 <span style="color: black">Test Input</span> 203 </td> 204 <td colspan="1"> 205 <input type="text" id="testInput" name="testInput" 206 tabindex="9"> 207 </td> 208 </tr> 209 </table> 210 </div> 211 </div> 212 213 214 </body> 215 </html>
