For a project I'm converting I needed a tabbed view with all tabs closed initially. CTabView doesn't like that, but I wanted to use the build-in version. For that reason I extended CTabview with an additional control: noTab.
class MyTabView extends CTabView
{
public $noTab = false;
protected function renderHeader()
{
if ($this->noTab === true)
$this->activeTab='';
echo "<ul>n";
foreach($this->tabs as $id=>$tab)
{
$title=isset($tab['title'])?$tab['title']:'undefined';
$active=$id===$this->activeTab?' class="active"' : '';
$url=isset($tab['url'])?$tab['url']:"#{$id}";
echo "<li><a href="{$url}"{$active}><span>{$title}</span></a></li>n";
}
echo "</ul>n";
}
}
The Title is not urlencoded anymore, so it will accept HTML too, that way you can add some nice thumbnail image besides your title.
-edit- There was some CSS here… Looked nice in FF, but IE ahem, well @#$^@#$!
Hi, Yeah, tested eventually with IE6 and it broke. But the reason was also that I adapted the CSS to use the PNG tab from the official JQuery tabs plugin. looked really nice in FF but IE is spoiling the fun again.
By the way, I thought YiiTabs was the official JQuery tabs, but it isn't. This one is quite limited unfortunately.
One problem is that IE6 does not support the '>' child selector, so if you just remove them from the Tab CSS, the layout is better … but not yet 100% ok.
(I've encountered the same kind of issue with the yii Tree widget).