viernes, 21 de diciembre de 2012

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. ));
  20. // VISIBLE solo cuando cargue todo..
  21. Yii::app()->getClientScript()->registerScript("articletab", // un ID unico tambien
  22. "$('#article_tab').show();" ,CClientScript::POS_LOAD);      // el ID del tab
  23. ?>








4 comentarios:

  1. Hola,
    Me parece un artículo interesante pero yo me he encontrado con un problema al trabajar con las CJuiTabs y es que no soy capaz de modificar el title de cada tab o bien aparece el dichoso "yw0_tab_0" o con el "{id}". ¿Sabes como cambiarlo?

    Un saludo,

    ResponderEliminar
    Respuestas
    1. https://github.com/yiisoft/yii/issues/1805

      Eliminar
    2. al momento de configurar el widget debes crearle un id a cada tab
      $this->widget('zii.widgets.jui.CJuiTabs', array(
      'tabs'=>array(
      'StaticTab 1'=>'Content for tab 1',
      'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'MITABNOMBRE'),
      ),
      // additional javascript options for the tabs plugin
      'options'=>array(
      'collapsible'=>true,
      ),
      ));

      Eliminar
  2. Hola Javier, si aun no lo has solucionado, debe agregar la siguiente opción

    dentro de la configuración del widget:

    https://github.com/yiisoft/yii/issues/1805

    ResponderEliminar