On Jan 17, 8:56 pm, MorningZ <[EMAIL PROTECTED]> wrote:
> Anyone have an example of using the "show" callback of the UI.Tabs?
>
> I am having a problem where for a second or two on initial page load
> the un-jQuery-tabbed <ul> list is showing, and then when the ".tabs()"
> gets run then it shows the tabbed display that i want
>
> So i figured i would set the main <div> to "display: none" and then on
> that "show" event unhide the div.... so then instead the user would
> see a blank area and then the fully tabbed interface
>
> I see the option in the ui.tabs.js file:
>
> $.ui.tabs = function(el, options) {
>
> this.source = el;
>
> this.options = $.extend({
> // basic setup
> initial: 0,
> // callbacks
> add: function() {},
> remove: function() {},
> enable: function() {},
> disable: function() {},
> click: function() {},
> hide: function() {},
> show: function() {},
>
> and I tried this simple setup:
>
> $("#TabContainer ul").tabs({
> show: function() { alert('Show Event') }
> });
>
> but there is no reference in the rest of the js of that option/
> event... (perhaps it is an incomplete feature?)
The feature is absolutely complete :-)
> Maybe some other advice on how to avoid seeing the untabbed <ul> to
> start?
To avoid such a flash of unstyled content you can attach the classes
that would be added while initializing tabs right away in your HTML
source:
<ul class="ui-tabs-nav"> ... </ul>
<div class="ui-tabs-panel ui-tabs-hide"> ... </div>
The second class "ui-tabs-hide" is optional and would hide your panel
until the proper one is revealed upon initialization.
--Klaus
