Yii 1.1: How to create CJui Tabs : Render partial, Ajax tabs, color tabs

7 followers

Hey guys, today we will show you how to make a Yii CJuitabs as example. Some feature cases such as Static tabs, render partial tabs, Ajax tabs, color tabs... You can see our code, there are simple 3 steps to make it work.

**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/>";
 
?>

Screenshots: yii cjui tabs

Reference: - http://www.codexamples.com/95/yii-cjui-tabs/ - http://yii.codexamples.com/v1.1/CJuiTabs/

Total 1 comment

#17958 report it
Yair at 2014/08/17 04:47pm
Great article

Thanks for the info.

Leave a comment

Please to leave your comment.

Write new article