Hi Klaus
Thanks for that
Unfortunately it's not working for me though
Here's the code I'm trying...
$(document).ready(function() {
// TABS BAR
$('#tabs').tabs({
select: function(event, ui) {
switch (ui.index) {
case 0:
// first tab selected, do something
break;
case 4:
// second tab selected, do something
alert('tab 5');
break;
}
}
});
});
Any idea why it's not working?
Also will it work if I put some jquery code like this... $
('.flexme2').flexigrid({height:'auto',striped:false});
Which is an example from the flexigrid jquery plugin
Cheers, B
On Jan 19, 9:06 am, Klaus Hartl <[email protected]> wrote:
> The ui data object passed to the event handler has an index (of the
> selected/clicked tab) property which you can decide upon which code to
> run.
>
> $('#example').tabs({
> select: function(event, ui) {
> switch (ui.index) {
> case 0:
> // first tab selected, do something
> break;
> case 1:
> // second tab selected, do something
> break;
> }
> }
>
> });
>
> HTH,
> --Klaus
>
> On 18 Jan., 22:53, batfastad <[email protected]> wrote:
>
>
>
> > Hi everyone
>
> > I'm new to jQuery and Javascript in general. I've been using
> > Javascript for years but only for simple form validation stuff so I'm
> > trying to learn the advanced JS syntax used by jQuery
> > I want to use the UI tabs widget with the flexigrid plugin showing
> > data on each tab. This should all work fine as I've found other people
> > doing the same in the flexigrid group.
>
> > But I've got a really basic question I need some help with.
> > I want is to be able to run some jQuery code when the user changes to
> > another tab.
> > I want to run different jQuery code depending on which tab is
> > selected.
>
> > From reading through the docs and examples I think I need to use the
> > tabsselect event but I'm having some trouble implementing. I think
> > I've got the syntax badly wrong!
>
> > Here's my code:
> > $(document).ready(function() {
>
> > $('#tabs').tabs();
> > $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
>
> > // Objects available in the function context:
> > ui.options // options used to intialize this widget
> > ui.tab // anchor element of the selected (clicked) tab
> > ui.panel // element, that contains the selected/clicked tab
> > contents
> > ui.index // zero-based index of the selected (clicked) tab
>
> > var $tabs = $('#example').tabs();
> > var selected = $tabs.data('selected.tabs');
>
> > if (selected = 'blah') {
> > // do stuff for blah tab
> > } elseif (selected = 'foo') {
> > // do stuff for foo tab
> > } elseif(selected = 'bar') {
> > // do stuff for bar tab
> > }
>
> > });
> > });
>
> > And obviously this isn't working... I really don't know what I'm doing
> > with this jQuery syntax yet. But I'm hoping someone can give me some
> > full examples so I can get learning.
> > I think the examples in the docs are only partial code snippets, so
> > combining them all like I've done above doesn't work.
>
> > Anyone got an example of what I'm trying to do?
>
> > Cheers, B- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
