You are viewing revision #5 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.
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
User Contributed Notes 3
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.
Leave a comment
If you have any questions, please ask in the forum instead.
Join the conversation to share a note.