You are viewing revision #6 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.
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:
Reference:
Great article
Thanks for the info.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.