I’d like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it’s possible to:
- Drag and drop
- Arrange list items horizontally, and make them behave like menu items
- Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that’s what I’m looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I’m especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various ‘JavaScript UI toolkits’. FWIW, the following are my brief review/summary after looking at some of the suggestions.
- http://demos.mootools.net/ — implements a small (not wide) variety of UI features
- http://ajaxian.com/by/topic/ui — not an organized or coherent reference, more like a blog that reviews various things.
- http://jqueryui.com/demos/ — concise, organized introduction to a dozen interactions and/or widgets
- http://plugins.jquery.com/ — a library of a couple of thousand ‘plug-ins’ in 20 categories … vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
- http://www.dojotoolkit.org/ — takes a bit of navigating … the easiest introduction to all functionality might be http://dojocampus.org/explorer/
- http://script.aculo.us/ — not very big
- http://extjs.com/ — quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
- http://mochikit.com/ — this is another small library
- http://developer.yahoo.com/yui/ — includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having “Layout Manager” and “CSS Reset”.
- http://www.midorijs.com/ — quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
Try any of these javascript libraries:
If you accept the HTML Canvas as valid HTML (Microsoft doesn’t), you can do even more (requires Canvas support in your browser):