Optimizando CJuiTabs para vistas voluminosas.

Hay casos en que las vistas muy voluminosas tardan en cargarse, y mientras eso sucede el sitio web se ve horrible, sin formato,  luego de unos segundos aparece el maravilloso jQueryUi.tabs (manejado en Yii mediante CJuiTabs).

El truco: Ocultar el componente y mostrarlo cuando el html completo termine de cargarse.

Hay que crear el componente jQuery.tabs() con CJuiTabs pasandole un estilo CSS de ocultación inicial (display: none;) eso causara que no se vea...hasta que le digamos que se vea.

Cuando le diremos que se vea ?
cuando el html cargue completo.

Cuando sabemos eso ? mediante otra belleza de Yii: el CClientScript, al cual le pediremos que inserte un script javascript al final cuando la página haya finalizado de cargarse usando la opción: CClientScript::POS_LOAD

1. <?php
2. $this->widget('zii.widgets.jui.CJuiTabs',array(
3.         'id'=>'article_tab',
4.         'htmlOptions'=>array('style'=>'display: none;'),  // INVISIBLE..
5.         'tabs'=>array(
6.                 'Datos del Articulo'=>$this->renderPartial('_form',
7.                         array('model'=>$model),true),
8.                 'Imagenes'=>$this->renderPartial('_form-images',
9.                         array('model'=>$model),true),
10.                 'Opciones'=>$this->renderPartial('_form-options',
11.                         array('model'=>$model),true),
12.                 'Stock'=>$this->renderPartial('_form-stock',
13.                         array('model'=>$model),true),
14.         ),
15.         'options'=>array(
16.                 'collapsible'=>false,
17.                 'cookie'=>9000,
18.         ),
19. ));
21. // VISIBLE solo cuando cargue todo..
22. Yii::app()->getClientScript()->registerScript("articletab", // un ID unico tambien
23. "$('#article_tab').show();" ,CClientScript::POS_LOAD);      // el ID del tab
24. ?>