Jquery - first contact
Posted on June 3rd, 2008 in programming, web | 1 Comment »
Drag&drop Tabs
A dynamic user interface using the jQuery javascript library that allows an user to drag and drop a tab from one tab component to another.
- JQuery main documentation page
- An online tutorial on JQuery, by Jorn Zaefferer
- The tabs demo on the JQuery page.
- Draggable&Droppable elements demo on the JQuery page.
- A fantastic colection of interface components based on JQuery. (demos)
- The order of events over the past days :
- Friday, May 30: 3 hours of reading/resource searching on JQuery.
- Saturday, May 31: 3-4 hours of tutorials and examples, experiencing with the JQuery UI.
- Sunday, June 1: 2 hours - putting together the interface.
The JQuery UI components used are:
The order of events managed:
- Create the two tab sets using JQuery’s tabs component.
- Make the tabs draggable with JQuery’s draggable component.
- Make the heads of the tab sets a “droppable” area so that it can recieve a new dragged element.
- On the “drop” event : Get the corespondent content of a dragged tab, remove drgged tab from the source tab set, add new tab into the destination tab set with a coresponding content identical to the one it came from
I used the “flora” theme found in the resources available in the JQuery documentation.
View the interface!
Main issues:
-didn’t figure out why the movement from the right set to the left one doesn’t work propperly
-didn’t manage to make the 2 containing divs display “on the same line” in IE6.. tried with a wrapper div but still not working
RSS
