OK, with some experimentation, Ive cracked this one. The script that
ended up doing the trick:
var $tabs = $('#bucket1 > ul').tabs({
fx: { opacity: 'toggle' },
event: "mouseover"
//show: function(event, ui) {$tabs.attr('id', ui.index) }
})
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
$tabs.attr('id', 'activeTab:'+ui.index)
})
.tabs('rotate', 2000);
If anyone knows of a more efficient means of doing this, please post,
but this did accomplish what I was looking to do. Thanks again, Klaus!
-Adam
On Nov 11, 11:50 am, Adam <[EMAIL PROTECTED]> wrote:
> Klaus,
> Thanks very much for your help! Ive done some experimenting with what
> you sent, and the 'show:' method doesnt seem to be valid- when I
> uncomment that portion of the following script, the tabs interface
> breaks, but it works as it should if I leave it commented out:
>
> var $tabs = $('#bucket1 > ul').tabs({
> fx: { opacity: 'toggle' },
> //show: function(event, ui) { $tabs.attr('id', ui.index) };
> })
>
> .tabs('rotate', 2000);
>
> *I assumed that in the show:function you meant 'event' where you had
> 'e'. Could you please double check this? Also, could you specify how
> to add the prefix to the tab index when it does add the id to the UL
> element?
> Thanks!!
> -Adam
>
> On Nov 11, 10:05 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
>
> > You are initializing tabs twice, first $('#bucket1 > ul').tabs({ fx:
> > { opacity: 'toggle' } }) and immediately on the next line. That'll
> > give you unexpected results. I suggest to use the show callback to set
> > the class for the list element.
>
> > Here's some (untested) code:
>
> > var $tabs = $('#bucket1 > ul').tabs({
> > fx: { opacity: 'toggle' },
> > show: function(e, ui) {
> > $tabs.attr('id', ui.index);
> > }})
>
> > .tabs('rotate', 5000);
>
> > Note that an id starting with a number is invalid, thus you may want
> > to add a prefix to that id...
>
> > --Klaus
>
> > On 10 Nov., 23:19, Adam <[EMAIL PROTECTED]> wrote:
>
> > > I have an instance of UI Tabs working with fade transition and auto-
> > > rotate, and would like to change the appearance of the ul.ui-tabs-nav
> > > by changing the position of its background sprite. I attempted to add
> > > these lines to the function which initiates the tabs, but it seems to
> > > only run once, and given the auto-rotate functionality, I cant set a
> > > function to execute on click of one of the A elements. Can someone
> > > help to make this continually update the ID of my nav UL, or can
> > > someone think of a better way to do this?
>
> > > The script is this:
>
> > > <script type="text/javascript">
> > > $(function() {
> > > $('#bucket1 > ul').tabs({ fx: { opacity:
> > > 'toggle' } }).tabs('rotate', 5000);
>
> > > var $tabs = $('#bucket1 > ul').tabs();
> > > var selected = $tabs.data('selected.tabs');
> > > $('.ui-tabs-nav').attr("id", selected );
>
> > > });
>
> > > </script>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" 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/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
