I need a single page exactly like the one in here: http://jqueryui.com/demos/sortable/#connect-lists-through-tabs . which is using jquery-ui, with some modifications
First: I need the items be expandable and collapsible like the one in here: http://jqueryui.com/demos/sortable/#portlets . And all items should be collapsed when the page is being loaded. With multi selection of the items, like the on in here: http://jqueryui.com/demos/selectable/#serialize .
Second: I have to specify the edit URL, lets assume it’s called edit_url then:
var edit_url = ‘http://localhost/items/edit/’;
Third: Each item headline should have 5 icons, and each icon should have (title=”some info” alt=”some info”) in its tag
1. Moving handler icon: Which will be used to move the current item.
2. Edit icon: which will open a dialog box and send two parameters to the edit_url in a post or get method (depending on which I will select)
option=full_edit&item_id=xx
3. Status icon: which will send two parameters depending on the current status
(option=enable&item_id=xx) OR (option=disable&item_id=xx)
and if the returned value from the edit_url was ‘success’ it should toggle the icon
4. Removing icon: Which will open a dialog box asking for confirmation, then once I confirmed it, it should send two parameters to the edit_url
option=delete&item_id=xx
and if the returned value from the edit_url was ‘success’ it should close the dialog box and hide & remove the current item. Otherwise, it should open a dialog box saying there is an error and couldn’t delete that item
5. Collapse/Expand icon: which will collapse or expand the item
PS: the dialog box, like the one in here:
http://jqueryui.com/demos/dialog/#modal-confirmation
Forth: Once I’m done with the sorting, And clicked on a button called “Save” it should send two parameters
option=sort&items=yy
while the items is an array like the following one
array
(
‘Nunc tincidunt’ => array
(
‘item-id’ => ‘order’,
‘item-id’ => ‘order’,
‘item-id’ => ‘order’,
‘item-id’ => ‘order’,
‘item-id’ => ‘order’
),
‘Proin dolor’ => array
(
‘item-id’ => ‘order’
‘item-id’ => ‘order’
‘item-id’ => ‘order’
‘item-id’ => ‘order’
‘item-id’ => ‘order
)
)
instead of the tabs name, should be the id or class element name of that tab tag
