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!"
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
