How To Handle CJuiTabs In Yii

I created this yii cjuitabs article from my experience.When you read this article you can understand the yii cuitabs to handle differenct way.When i work on project, I need to assign the color for each tabs. I did this using span.

1. Static CJuiTabs
2. Render CJuiTabs
3. Dynamic CJutTabs
4. CJuiTabs With Class(Style)
5. Dynamic Yii CJui Tabs Menu With Color
6. Yii CJui Tabs Mouse Over Event

Static CJuiTabs

<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
               'Tab 1' => 'Content for tab 1',
               'Tab 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(
  //Click the selected tab to toggle its content closed/open.
   //To enable this functionality, set the collapsible option to true
  'collapsible' => true,

   //Open CJuitabs on mouse over
  'event'=>'mouseover',   
         ),
));
?>

This is the normal CJuiTabs view in Yii framework. Just create the tab and assign content for that tab. 

Here I did 3 things. They are

1. Static Content  for Tab l 
2. Static Content with ID for Tab 2
3. Content added dynamically using ajax url

---

Render CJuiTabs

<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
 'tabs' => array(
  'Tab 1' => 'Content for tab 1',
  'Tab 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) ),
  // Render view with ID
   'Render View With ID'=>array(
     'id'=>'renderid'
     'content'=>$this->renderPartial('_newpage2',
       array('value'=>$value),TRUE
    ),
 ),
 // additional javascript options for the tabs plugin
 'options' => array(
  'collapsible' => true,
 ),
  
'id'=>'MyTab',
));
?>
 

In this code, We can add content using renderPartial method in CJuiTabs. Here i added one parameter that is "value"(Optional)

---

Dynamic CJuiTabs

<?php
$tab_list=Componenttabs::gettabs();
$tabarray=array();
$i=1;

// Create Dynamic Tabs 
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,
   'options'=>array(
    'collapsible'=>true,
   ),
   'id'=>'categorytabs',
  ));
?>

components/Componenttabs.php
<?php
class Componenttabs extends CApplicationComponent{
public static function gettabs(){
$model=Category::model()->findAll();
$listdata=CHtml::listData($model,”,’name’);
return $listdata;
}
}
?>

This is my great work of my project. I created dynamic tabs and content.

---

CJuiTabs With Class(Style)

<style type='text/css' >
 .tabclass{
   color:'red';
   font-weight:bold; 
  }
</style> 
// Css class for dynamic CJuiTabs
<?php 
  $tabarray["<span class='tabclass'>Tab $i</span>"]=array(
       'id'=>$i, 
      'content'=>$this->renderPartial(
       '_newpage',
       array('value'=>$value),
       TRUE)
      );
?>

// Css class for static CJuiTabs
<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
               '<span class='tabclass'>Tab 1</span>' => 'Content for tab 1',
        ),
));
?>

When you create dynamic tab using $tabarray["Tab $i"], You can apply color class using span tag.

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

 

Dynamic Yii CJui Tabs Menu With Color

<?php
$tablist=array("Red","Green","Blue");
foreach($tablist as $tabs){
    $css='';
  if($tabs=='Red'){$css='color:red;';}
  else if($tabs=='Green'){$css='color:green;';}
  else if($tabs=='Blue'){$css='color:blue';} 
  $tabarray["<span id='tab-$key' style='$css'>$tabs</span>"]="$tabs Color";
}
?>
<?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    'options' => array(
        'collapsible' => true,        
    ),
    'id'=>'MyTab-Menu1'
));
?>

Yii CJui Tabs Mouse Over Event

<?php
$tablist=array("Red","Green","Blue");
foreach($tablist as $tabs){
    $css='';
  if($tabs=='Red'){$css='color:red;';}
  else if($tabs=='Green'){$css='color:green;';}
  else if($tabs=='Blue'){$css='color:blue';} 
  $tabarray["<span id='tab-$key' style='$css'>$tabs</span>"]="$tabs Color";
}
?>
 <?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    'options' => array(         
        'event'=>'mouseover',
    ),
    'id'=>'MyTab-Menu-Mouse'
));
?>

Download Yii CJuiTabs