Thursday, September 27, 2012

How To Handle CJuiTabs In Yii


I created this yii cjuitabs article from my experience.When you read this article you can understand the yii cuitabs to handle differenct way.When i work on project, I need to assign the color for each tabs. I did this using span.

Static CJuiTabs

<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
               'Tab 1' => 'Content for tab 1',
               'Tab 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(
  //Click the selected tab to toggle its content closed/open.
   //To enable this functionality, set the collapsible option to true
  'collapsible' => true,

   //Open CJuitabs on mouse over
  'event'=>'mouseover',   
         ),
));
?>

This is the normal CJuiTabs view in Yii framework. Just create the tab and assign content for that tab. 

Here I did 3 things. They are

  1. Static Content  for Tab l 
  2. Static Content with ID for Tab 2
  3. Content added dynamically using ajax url

Render CJuiTabs

<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
 'tabs' => array(
  'Tab 1' => 'Content for tab 1',
  'Tab 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) ),
  // Render view with ID
   'Render View With ID'=>array(
     'id'=>'renderid'
     'content'=>$this->renderPartial('_newpage2',
       array('value'=>$value),TRUE
    ),
 ),
 // additional javascript options for the tabs plugin
 'options' => array(
  'collapsible' => true,
 ),
  
'id'=>'MyTab',
));
?>
 
In this code, We can add content using renderPartial method in CJuiTabs. Here i added one parameter that is "value"(Optional)

Dynamic CJuiTabs

<?php
$tab_list=Componenttabs::gettabs();
$tabarray=array();
$i=1;

// Create Dynamic Tabs 
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,
   'options'=>array(
    'collapsible'=>true,
   ),
   'id'=>'categorytabs',
  ));
?>

components/Componenttabs.php
<?php
class Componenttabs extends CApplicationComponent{
public static function gettabs(){
$model=Category::model()->findAll();
$listdata=CHtml::listData($model,”,’name’);
return $listdata;
}
}
?>

This is my great work of my project. I created dynamic tabs and content.


CJuiTabs With Class(Style)

<style type='text/css' >
 .tabclass{
   color:'red';
   font-weight:bold; 
  }
</style> 
// Css class for dynamic CJuiTabs
<?php 
  $tabarray["<span class='tabclass'>Tab $i</span>"]=array(
       'id'=>$i, 
      'content'=>$this->renderPartial(
       '_newpage',
       array('value'=>$value),
       TRUE)
      );
?>

// Css class for static CJuiTabs
<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
               '<span class='tabclass'>Tab 1</span>' => 'Content for tab 1',
        ),
));
?>

When you create dynamic tab using $tabarray["Tab $i"], You can apply color class using span tag.

Hint: When you use more than one CJuiTabs "Dont Forget" to set "ID". Otherwise you will get some problem

 

Dynamic Yii CJui Tabs Menu With Color

<?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-$key' style='$css'>$tabs</span>"]="$tabs Color";
}
?>
<?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    'options' => array(
        'collapsible' => true,        
    ),
    'id'=>'MyTab-Menu1'
));
?>

Yii CJui Tabs Mouse Over Event

<?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-$key' style='$css'>$tabs</span>"]="$tabs Color";
}
?>
 <?php
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>$tabarray,
    'options' => array(         
        'event'=>'mouseover',
    ),
    'id'=>'MyTab-Menu-Mouse'
));
?>
Download Yii CJuiTabs

0 comments:

Post a Comment