How To Change The Class Of Ul/li In Ctabview?

Yii 1.1 General Discussion
1

I start this topic in purpose continuation this one.

Hope it will be more productive.

Problem: All you can do with htmlOptions of CTabView widget is to set wrapper html-class of tabs menu. In CTabView.php attribute called ‘CSS_CLASS’.

But you can do nothing to change ‘li’/‘ul’ style.

It’s pretty strange, yii don’t have appropriate methods to change ‘tab’-widget style.

Solution i found is pretty rude - change basic classes. I hope you’ll help me make it better way.

Solution:

At first, when tabs created one set ‘a’-tag style. If you want to use something like Bootstrap, which work with ‘li’ style, it’s not suitable.

To solve creation problem i did next thing.

In framework/widget/CTabView.php i rearrange {$active} from ‘a’ to ‘li’:

Before:




protected function renderHeader()

{

echo "<ul class=\"nav nav-tabs\">\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}>{$title}</a></li>\n";

	}

	echo "</ul>\n";

}

After:




protected function renderHeader()

{

echo "<ul class=\"nav nav-tabs\">\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{$active}><a href=\"{$url}\">{$title}</a></li>\n";

	}

	echo "</ul>\n";

}

Next thing you have to do is change tabs behaviour in jQuery file Yii::app()->baseUrl() . assets/some_path/yiitab/jquery.yiitab.js

Before:




function activate(id) {

	var pos = id.indexOf("#");

	if (pos>=0) {

		id = id.substring(pos);

	}

	var $tab=$(id);

	var $container=$tab.parent();

	$container.find('>ul a').removeClass('active');

	$container.find('>ul a[href="'+id+'"]').addClass('active');

	$container.children('div').hide();

	$tab.show();

}

After:




function activate(id) {

	var pos = id.indexOf("#");

	if (pos>=0) {

		id = id.substring(pos);

	}

	var $tab=$(id);

	var $container=$tab.parent();

	$container.find('>ul li').removeClass('active');

	$container.find('>ul a[href="'+id+'"]').parent().addClass('active');

	$container.children('div').hide();

	$tab.show();

}

I know it’s bad idea change basic classes, so, once again, i hope you’ll help me make it better way.

Thanks in advance.

2

Dear Friend

I do not know wheteher the following is a right way of doing things.

Anyway we can do the things.

We can copy the following two files and place it inside the css folder of web application.

1.framework/web/js/source/jui/css/base/jquery-ui.css.

2.framework/web/js/source/jui/css/base/jquery.ui.tabs.css.

In the view where we are showing the tabs, we can register the css files.

Make sure that jquery.ui.tabs.css is registered after jquery-ui.css.




Yii::app()->clientScript->registerCssFile("css/jquery-ui.css");

Yii::app()->clientScript->registerCssFile("css/jquery.ui.tabs.css");

To prevent the default loading of css files, we can set the "cssFile" property to false in the widget.




$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'),

          'AjaxTab'=>array('ajax'=>array("trial/tabAjax")),

      ),

      'cssFile'=>false, //Here we are preventing the registeration of default css files.

      

      'options'=>array(

          'collapsible'=>true,

      ),

  ));

Now we can play with css in the file jquery.ui.tabs.css inside the css folder.

Regards.