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

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:

3 0
7 followers
Viewed: 26 719 times
Version: 1.1
Category: How-tos
Written by: Interboy
Last updated by: xJose
Created on: Oct 1, 2013
Last updated: 4 years ago
Update Article

Revisions

View all history

Related Articles