Searchng for different ways of designing web based UI I diceded to have a look at JQuery - a JavaScript library that allows you to create and style really impressive widgets to use on your website. To prove that it's really good thing to have a look, here's an example:
accordion example
Nice isn't it? That's an example you get with your first jQuery install. You can modify and style it any way you want thanks to css.
But, starting from the begining, lets anwser some of questions I had when I decided to do my first JQuery tutorial.
1. What is JQuery?
On project's website you can read that "jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications."
Sounds resonable - you use javascript to create "nice thingies" and lot's of work is already done by somebody else.
2. How to start with JQuery?
I found Getting started section of jquery website very helpful. You might want to start with looking at more demos, you can find good overview of widgets and functionalities JQuery offers. After that you'll probably decide to run some of those demos yourself. Here's how you add accordion widget to your website:
2.1 Go to JQuery Download Builder. Heres where you'll get your set of JavaScript and CSS classes that allows you to add those great widgets to your website. Builder's purpose is to allow you to choose what functionallity you'll need, what base style do you want to use and how big your package will be. On my first go, I just took everything they offer :).
2.2 After clicking "download" button you'll get a zipped archive with 3 directories (js, css, and development-bundle) and demo index.html file. Quick look at index.html will let you realise that you'll need to add few lines to your website's head section, to make the magic work for you.
2.3 Place the directories from the zipped archive wherever you need them. Add them to your website head section:
The last script is call to method that "tells" jQuery that your accordion div has #accordion id and it's headers are in h3 tags.
After that you can add the widget to your sites html:
And here you are, your first jQuery widget is there, on your website! :)
I was struggling for a long time between jQuery and Prototype, mostly because Prototype was default in Ruby on Rails (which I use for my projects). Now I'm more into jQuery, because of two things: one, you can do this: $('.link').click(function() { /* do something */}),
ReplyDeletewhereas in Prototype you'd have to bind the click separately to each link, or use 'each' syntax which is longer. Second thing is flot, a library for creating graphs. I needed various graphs for my projects, and I haven't yet found anything that was impossible with this library. You can read all about it here: http://flot.googlecode.com/
Prototype has an easier AJAX support though...