Yii 1.1: CJuiTabs Content

6 followers

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

Total 2 comments

#12321 report it
Joe.B at 2013/03/13 04:41pm
Greate article

Thanks for taking your time to write this article.

#12310 report it
mbala at 2013/03/13 03:04am
My Experience

I posted this article from experience. If anything wrong reply here.

Leave a comment

Please to leave your comment.

Write new article
  • Written by: mbala
  • Category: Tips
  • Yii Version: 1.1
  • Votes: +6
  • Viewed: 10,783 times
  • Created on: Sep 29, 2012
  • Last updated: Mar 13, 2013
  • Tags: CJuiTabs