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.
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
- Static Content for Tab l
- Static Content with ID for Tab 2
- 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