CJuiTabs displays a tabs widget. CJuiTabs encapsulates the JUI tabs plugin. Changing the properties for Yii CJuitabs, Dynamic Yii CJuiTabs Menu Color, CJuiTabs in Yii

Screenshots:

yii cjui tabs

Hey guys, today we will show you how to make a Yii CJuitabs as example. Some features case, for example: Static tab, render partial tab, Ajax tab, color tabs... You can see our code, there are 3 steps.

**Note: **

  • Working for Yiiframework version 1.x

In view.php:

<h1>Default CJuiTabs: Static, render partial, Ajax tab</h1>
<?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>array(
        'StaticTab '=>'Content for tab 1',
        'StaticTab With ID'=>array('content'=>'Content for tab 2 With Id' , 'id'=>'tab2'),
        'Render Partial'=>array('id'=>'test-id','content'=>$this->renderPartial(
                                        '_renderpage',
                                        array('Values'=>'This Is My Renderpartial Page'),TRUE
                                        )),        
        // panel 3 contains the content rendered by a partial view
        'AjaxTab'=>array('ajax'=>$this->createUrl('ajax')),
    ),
    // additional javascript options for the tabs plugin
    'options'=>array(
        'collapsible'=>true,
    ),
    'id'=>'MyTab-Menu',
));
?>
 
<br />
<h1>Dynamic Yii CJui Tabs Menu With Color </h1>
<?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-$tabs' style='$css'>$tabs</span>"]="$tabs Color";
}
?>
<?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    // additional javascript options for the accordion plugin
    'options' => array(
        'collapsible' => true,        
    ),
    'id'=>'MyTab-Menu1'
));
?>
 
<br />
<h1>Yii CJui Tabs Mouse Over Event </h1>
 <?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    // additional javascript options for the accordion plugin
    'options' => array(         
        'event'=>'mouseover',
    ),
    'id'=>'MyTab-Menu-Mouse'
));
?>

in ajax.php file:

/** ajax.php **/

<?php
    echo "Ajax Rendered This Page"; 
   //Your processing   
?>

In _renderpage.php

/** _renderpage.php **/
<?php
    echo $Values."<br/>";
    echo "Render Page<br/>";
 
?>

Output:

Default CJuiTabs

Content for tab 1
Content for tab 2 With Id
This Is My Renderpartial Page
Render Page


Dynamic Yii CJui Tabs Menu With Color

Red Color
Green Color
Blue Color


Yii CJui Tabs Mouse Over Event

Red Color
Green Color
Blue Color

Return values

string, html jui tabs

References

  • http://demo.bsourcecode.com/yiiframework/cjuitabs/index