CJuiTabs Content

When I used CJuiTabs I did something. They are

  • Direct Content for tab
  • Append content Using Ajax
  • Tab with ID and Id For every single tab of CJuitab
  • Content Using renderPartial Method
  • Dynamic Tab menu from database**

I post code below. It was very userful for me.

Format 1:Basic

$this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs' => array(
        'StaticTab 1' => 'Content for tab 1',
        'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
        // panel 3 contains the content rendered by a partial view
        'AjaxTab' => array('ajax' => $this->createUrl('...')),
    ),

    // additional javascript options for the tabs plugin
    'options' => array(
        'collapsible' => true,
    ),
));

Format 2:Content Using Render Method

$this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs' => array(
        'StaticTab 1' => 'Content for tab 1',
        'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
        // panel 3 contains the content rendered by a partial view
        'AjaxTab' => array('ajax' => $this->createUrl('..')),
 // Get Content From Another page. Also Pass Parameter
        'Render View'=>$this->renderPartial('_newpage',
                                array('value'=>$value),
                                              TRUE
       )),
    ),

    // additional javascript options for the tabs plugin
    'options' => array(
        'collapsible' => true,
    ),
    // set id for this widgets
    'id'=>'MyTab',
));

Format 3:Content Using Render Method And Set Id For Each Single 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' => 'tab2'),
        // panel 3 contains the content rendered by a partial view
        'AjaxTab' => array('ajax' => $this->createUrl('..')),
        'Render View'=>array('id'=>'renderid',
                             'content'=>$this->renderPartial(
                                '_newpage',
                                 array('value'=>$value),TRUE)
                              ),
    ),

    // additional javascript options for the tabs plugin
    'options' => array(
        'collapsible' => true,
    ),
    // set id for this widgets
    'id'=>'MyTab',
));

Dynamic CJuiTabs

$tab_list=Componenttabs::gettabs();
$tabarray=array();
$i=1;
foreach ($tab_list as $key=>$value){  
 $tabarray["Tab $i"]=array('id'=>$i,
                            'content'=>$this->renderPartial(
                                       '_newpage',                                
                                        array('value'=>$value),
                                        TRUE)
     );
 $i++;
}

$this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs'=>
  $tabarray,
/*array(
        'StaticTab 1'=>'Content for tab 1',
        'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),
        // panel 3 contains the content rendered by a partial view
        //'AjaxTab'=>array('ajax'=>$ajaxUrl),
    ),*/

    // additional javascript options for the tabs plugin
    'options'=>array(
        'collapsible'=>true,
    ),
    'id'=>'categorytabs',
));

Hint: When you use more than one CJuiTabs "Dont Forget" to set "ID". Otherwise you will get some problem

2 0
7 followers
Viewed: 20 063 times
Version: 1.1
Category: Tips
Tags: CJuiTabs
Written by: mbala
Last updated by: mbala
Created on: Sep 29, 2012
Last updated: 11 years ago
Update Article

Revisions

View all history

Related Articles