Monday, 18 January 2010

Removal of Tabs

Been working on a small feature that I have been meaning to get done for a while now. That is the removal of tabs from a portfolio as at moment you can add and remove objects, You can add tabs but you cannot remove them.

The design I settled on was having the delete icon appear just to the right of the tab link you was currently hovering over. This would only display on the current/last tab link that was hovered over instead of displaying one for each.
I used some jQuery animation to move the div across the page, Fading it out and back in at the new location. Simple hidden textbox has been used to take the tabId value to the form and from there it is deleted. I streamlined a bit of jQuery functions for deleting objects after ajax returns a object so now the item delete and tab delete use the same jQuery functions to find the element and fade it out in a nice animation.

This took a fair bit of work through out today as I was working on UI designs for it, the jQuery I had not done before and a little bit of Ajax editing. It currently is working but buggy as if you create a tab, The jQuery that builds the new navigation to display the new tab buggers up the delete hover and Ajax call. So I will need to reinitialise to stop this happen like I did with a previous example but will leave that till tomorrow.

No comments:

Post a Comment