Raymond Selda has published a tutorial about how to Create a Tabbed Content Rotator using jQuery and the interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.
After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.
Allan Jardine is up to his old tricks again (his tricks are: creating helpful small tools!). This time he has created KeyTable, a library that adds the ability to use the keyboard to navigate around an HTML table.
Events can be bound (and unbound) to cells as required by the developer, allowing increased accessibility to Javascript enhanced tables. This library is somewhat similar to QFocuser that was posted on Ajaxian back at the start of the month, but specialises in table navigation. KeyTable also integrates nicely with DataTables, such that paging and sorting is taken into account.
To get started you just need to var keys = new KeyTable(); and then you can add init params for fine grained work, and you can also add events:
PLAIN TEXT
JAVASCRIPT:
-
/* Example event listener */
-
keys.event.focus( 1, 3, function() {
-
/* processing on cell 1,3 … */
-
} );
-
/* this is exactly the same as */
-
keys.event.focus( $(‘#example tbody tr:eq(3) td:eq(1)’)[0], function() {
-
/* processing on cell 1,3 … */
-
} );
The front page has an example that uses jEditable allowing you to mouse around, hit enter, change a field, and go back:
