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

You are viewing revision #5 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#4)next (#6) »

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: 34 846 times
Version: Unknown (update)
Category: How-tos
Written by: Interboy
Last updated by: xJose
Created on: Oct 1, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles