Create dojo tab cotainer in Zend Framework | Zend Framework Tutorial pdf

Create dojo tab cotainer in Zend Framework

Try online: Tab Container
In my prev ious posts I discussed how to create accordion container holding accordion panes and border container hav ing content panes.
In this article I am going to show y ou how easy it is to create tab continer that hold contents panes. Each content pane hav ing different contents. Contents in one tab pane are shown at a time. when use click on the tab pane's title, contents in that tab pane are shown.
Before reading this post, y ou better read and implement what I have discussed in my article "Zend Framework and Dojo: configuration".
Before creating tab continer and panes, y ou will need to understand and perform necessary configuration.I assume that y ou hav e read the post I have mentioned and hav e done the necessary configuration. Now let's get started.
First of all, y ou will need to create y our controller as
<?php
class ContainerController extends Zend_Controller_Action
{
public function tabAction()
{
}
}
In the code abov e we hav e defined our ContainerController ex tending it from Zend_Controller_A ction, and then we hav e defined our tabA ction.
Now, the nex t step is to create tab.phtml in
/application/v iews/scripts/container/ and place the following code in it.
<?php
$this->tabContainer()->captureStart('main-container', array('design' => 'headline'),
array(
'style'=>'height:400
px;width:800px'
));
echo $this->contentPane(
'home',
'This is home page',
array('region' => 'top','title'=>'Home'),
array('style' => 'background-color: white;')
);
echo $this->contentPane(
'gallery',
'Contents of gallery here',
array('region' => 'left', 'title'=>'Gallery'),
array('style' => 'width: 200px; background-color: white;')
);
echo $this->contentPane(
'Blog',
'Blog post here',
array('region' => 'center','title'=>'Blog'),
array('style' => 'background-color: white;')
);
echo $this->contentPane(
'about',
'Information about your company etc',
array('region' => 'bottom', 'title'=>'About Us'),
array('style' => 'background-color: white;')
);
echo $this->tabContainer()->captureEnd('main-container');
?>
Here we first call captureStart() method of tabContainer() dojo v iew helper, giv ing it an id, and array containing tab container special attributes. Nex t we define content panes. Each content pane holds the data. The contents panes in the tab container will become tab panes.
each content pane is defined as
echo $this->contentPane(
'home',
'This is home page',
array('region' => 'top','title'=>'Home'),
array('style' => 'background-color: white;')
);
Here "home" is the id of the content page, Nex t "string" is the contents that will appear in the tab pane. Nex t we hav e defined the array of the special attributes of the contents. Here title is the most important attribute. This title will appear on the tab. The last array contain css related attributes.