Creating Vertical tabs

Yii 1.1 General Discussion
1

Hi dears,

I am using uiTabs of JQuery.

How to create Vertical tabs?

Thanks

2

I have tried to create the Tabs vertically but I am facing a problem.

I think there is a need to modify the base class CJuiTabs.php

There is need to add one more variable that will store the information about the style i.e. Display as Vertical or Horizontal.

if we define a variable named TabMode as such




public $tabMode='default'; // Which is by default Horizontal 

public $addiing_class='';

public $chaning_new='';

and this can be accessed as





		if($this->tabMode=='vertical'){

			$addiing_class=".addclass('ui-tabs-vertical ui-helper-clearfix')";

			$chaning_new="jQuery(\"#{$id} li\").removeClass('ui-corner-top').addClass('ui-corner-left');";			

		}


		Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"jQuery('#{$id}').tabs($options)".$this->addiing_class.";".$this->chaning_new."");

The CSS that I ma currently using is





.ui-tabs-vertical {

    width: 55em;

}

.ui-tabs-vertical .ui-tabs-nav {

    float: left;

    padding: 0.2em 0.1em 0.2em 0.2em;

    width: 12em;

}

.ui-tabs-vertical .ui-tabs-nav li {

    border-bottom-width: 1px !important;

    border-right-width: 0 !important;

    clear: left;

    margin: 0 -1px 0.2em 0;

    width: 100%;

}

.ui-tabs-vertical .ui-tabs-nav li a {

    display: block;

}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected {

    border-right-width: 1px;

    padding-bottom: 0;

    padding-right: 0.1em;

}

.ui-tabs-vertical .ui-tabs-panel {

    float: right;

    padding: 1em;

    width: 40em;

}

any help will be welcomed.