CTabView with no tabs open initially

Yii 1.1 Tips, Snippets and Tutorials
1

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 @#$^@#$!

2

Hi Maxximus,

I’ve already entered an issue (43) related to the CTabView display under IE6. Are you using IE6 ?

8)

3

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.

4

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).

I’ve created an issue for this

8)

5

CTabView: how to start with especific tab??

ini()? where?

6

solution: $tab='tab2'