Browser method list in browser?
I would like to know what can be done in the browser UI (using browser + CSS + javascript, not using Flash or Silverlight). For example, I think it's possible:
- Drag and drop
- Arrange list items horizontally and make them behave like menu items
- Make things on the page visible or invisible, depending on where the mouse cursor is.
I admit this is a broad question, but this is what I'm looking for: an overview of the available UIs (preferably with at least a little clue or hyperlink on how to implement each).
Do you know about such a list or dictionary?
I am particularly interested in any methods of user interaction and input (i.e. not just page layout and navigation where the end user only consumes information).
Edit: People responded that I should see what functionality is implemented in various JavaScript UI toolkits. FWIW, my next short review / summary after reviewing some of the suggestions.
- http://demos.mootools.net/ - implements a small (not wide) variety of user interface functions.
- http://ajaxian.com/by/topic/ui is not an organized or consistent link, rather like a blog that deals with different things.
- http://jqueryui.com/demos/ - A short, organized introduction to a dozen interactions and / or widgets
- http://plugins.jquery.com/ - a library of several thousand "plugins" in 20 categories ... vaster and not so immediately clear and so consistently documented as jqueryui demos
- http://www.dojotoolkit.org/ - needs a little navigation ... the simplest introduction to all functionality might be http://dojocampus.org/explorer/
- http://script.aculo.us/ - not very big
- http://extjs.com/ - quite a few powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
- http://mochikit.com/ 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 a special mention for "Layout Manager" and "CSS Reset".
- http://www.midorijs.com/ - pretty small and simple, no demo
To summarize, I think the best answers (i.e. the simplest to browse collections with the most functionality) are:
a source to share
Try any of these javascript libraries:
- http://www.dojotoolkit.org/
- http://mootools.net/
- http://jquery.com/
- http://script.aculo.us/
- http://extjs.com/
- http://mochikit.com/
- http://developer.yahoo.com/yui/
- http://www.midorijs.com/
If you accept HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (Requires Canvas support in your browser):
a source to share
look at the docs for things like mootools and jquery UI , there are many examples of crazy things you can do there.
Also check the ajaxians UI section
a source to share
check out jquery UI http://jqueryui.com/ and also plugins http://plugins.jquery.com/ this is a simple example of what you can achieve with Java Script
a source to share
I think you could basically do almost anything you can imagine to do with changing the page as it looks in response to user input. I mean js can create stunning visuals, including pretty complex animations and vectors, and pull data from anywhere, which allows for ajax, so you can render whatever you want however you want.
The question is how many resources they use on the client side. While almost anything is possible, not everything will necessarily be practical, and I doubt there is a reliable way to decide which things will be too resource intensive to be realistically implemented on the client side.
a source to share