CJuiTabs Content

You are viewing revision #4 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#5) »

When I used CJuiTabs I did something. They are **1. Direct Content for tab

  1. Append content Using Ajax
  2. Tab with ID and Id For every single tab of CJuitab
  3. Content Using renderPartial Method
  4. 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 064 times
Version: Unknown (update)
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