2009/2/24 david <[email protected]>: > > Hi richard, > > I've done something like that, but very different :)) > > Here is my SIMPLE solution: > > - first clone the desired tab (let's call him cloneTab) and attach > cloned element to parent, and clonePosition of the cloned tab from the > creator tab > - next detach the creator tab, and replace it with an empty element > with the same dimension (let's call it emptyTab) > You should also append an empty element as first child of the > contener (let's call him emptyFirstTab) > - Next, motion, Effect.Parallel ( > - emptyTab to width=0 > - emptyFirstTab from width=0 to the desired > width > - cloneTab should move to its final position > ) > - Next, detach the emptyTab and the emptyFirstTab, and reattach as > the first child of the contener the cloneTab. > > You don't see any flickering if all attach/detach are grouped in the > code. > > -- > david > > > On 24 fév, 17:47, Richard Quadling <[email protected]> wrote: >> Hi. >> >> I've got a set of spans ... >> >> <div class="tabHs"> >> <span id="tabH_UserAdmin" class="tabHE">User Administration</span> >> <span id="tabH_ReportAdmin" class="tabHE">Report Administration</span> >> <span id="tabH_ReportGenerator" class="tabHE tabHA">Generate Report</span> >> </div> >> >> They are styled to look like tabs. There is CSS dealing with hovering, >> active/inactive, enabled/disabled. >> >> I've got an onClick handler on the class of tabHs (so I can have >> multiple tab controls). >> >> function tabHeadClick(ev){ >> console.group('tabHeadClick(', arguments, ')'); >> >> var el = ('click' === ev.type) ? ev.element() : ev; >> >> // Don't process disabled tabs. >> if (false == el.hasClassName('tabHD')){ >> // Update the tab header. >> el >> .addClassName('tabHA') >> .siblings() >> .without(el) >> .invoke('removeClassName', 'tabHA'); >> >> // Update the tab sheets. >> var a_IdParts = el.id.split('_'); >> var o_TabSheet = $('tabS_' + a_IdParts[1]); >> >> // Upda the required tab sheet if it exists and it is not >> currently active. >> if (o_TabSheet && !o_TabSheet.hasClassName('tabSA')){ >> // Make all other tabSheets inactive >> el >> .up('.tabC') >> .down('.tabSs') >> .childElements() >> .without(o_TabSheet) >> .invoke('addClassName', 'tabSI') >> .invoke('removeClassName', 'tabSA'); >> >> // Make this tabSheet active. >> sizeElements( >> o_TabSheet >> .addClassName('tabSA') >> .removeClassName('tabSI') >> ); >> } >> } >> >> console.groupEnd(); >> >> } >> >> What I want to do is, when they click a span is to slide that >> o_TabSheet to the top of the list. >> >> The user isn't dragging the tab, I just want the active tab to be the >> first in the list. A nice sliding effect would be what I would like to >> see, but I have no idea at all how to do such a thing. >> >> Regards, >> >> Richard. >> >> -- >> ----- >> Richard Quadling >> Zend Certified Engineer :http://zend.com/zce.php?c=ZEND002498&r=213474731 >> "Standing on the shoulders of some very clever giants!" > > >
That's a bit beyond me at the moment. I think the "sortable" functionality is what I am looking for. The Effect.Morph demo also looks promising. I think I need to determine the current width's and left's of my "tabs" and then morph them all to new positions, taking into account the widths. I'd like to have the active tab slide in front, so I assume some z-index stuff is also required. I think. -- ----- Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731 "Standing on the shoulders of some very clever giants!" --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
