When I used CJuiTabs I did something. They are
- Direct Content for tab
- Append content Using Ajax
- Tab with ID and Id For every single tab of CJuitab
- Content Using renderPartial Method
- Dynamic Tab menu from database**
I post code below. It was very userful for me.
Format 1:Basic
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs' => array(
'StaticTab 1' => 'Content for tab 1',
'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
// panel 3 contains the content rendered by a partial view
'AjaxTab' => array('ajax' => $this->createUrl('...')),
),
// additional javascript options for the tabs plugin
'options' => array(
'collapsible' => true,
),
));
Format 2:Content Using Render Method
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs' => array(
'StaticTab 1' => 'Content for tab 1',
'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
// panel 3 contains the content rendered by a partial view
'AjaxTab' => array('ajax' => $this->createUrl('..')),
// Get Content From Another page. Also Pass Parameter
'Render View'=>$this->renderPartial('_newpage',
array('value'=>$value),
TRUE
)),
),
// additional javascript options for the tabs plugin
'options' => array(
'collapsible' => true,
),
// set id for this widgets
'id'=>'MyTab',
));
Format 3:Content Using Render Method And Set Id For Each Single Tab
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs' => array(
'StaticTab 1' => 'Content for tab 1',
'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
// panel 3 contains the content rendered by a partial view
'AjaxTab' => array('ajax' => $this->createUrl('..')),
'Render View'=>array('id'=>'renderid',
'content'=>$this->renderPartial(
'_newpage',
array('value'=>$value),TRUE)
),
),
// additional javascript options for the tabs plugin
'options' => array(
'collapsible' => true,
),
// set id for this widgets
'id'=>'MyTab',
));
Dynamic CJuiTabs
$tab_list=Componenttabs::gettabs();
$tabarray=array();
$i=1;
foreach ($tab_list as $key=>$value){
$tabarray["Tab $i"]=array('id'=>$i,
'content'=>$this->renderPartial(
'_newpage',
array('value'=>$value),
TRUE)
);
$i++;
}
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>
$tabarray,
/*array(
'StaticTab 1'=>'Content for tab 1',
'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),
// panel 3 contains the content rendered by a partial view
//'AjaxTab'=>array('ajax'=>$ajaxUrl),
),*/
// additional javascript options for the tabs plugin
'options'=>array(
'collapsible'=>true,
),
'id'=>'categorytabs',
));
Hint: When you use more than one CJuiTabs "Dont Forget" to set "ID". Otherwise you will get some problem
My Experience
I posted this article from experience. If anything wrong reply here.
Greate article
Thanks for taking your time to write this article.
How to use CJuiAutoComplete widget inside CJuiTabs
Hello there,
I am having issue while adding CJuiAutoComplete widget inside the CJuiTabs, I have total 3 Tabs. I want to use CJuiAutoComplete on 2nd tab but its not working on Chrome browser only.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.