Yii Bootster - TbTabs更改标签事件

Question

How can I control a change of tab event when using TbTabs in Yii Bootter?

Here is my code (but it didn't alert when I have changed tab):

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
            array('label' => 'Trainer Modules', 'content' => 'content tab 1',
            array('label' => 'Default Modules', 'content' => 'content tab 2',
        ),
        'events' => array(
            'change' => "js:function(){alert('123');}"
        )
    ));

Answer 1

Just for the future reference, one solution to control Tab clicks on TbTabs is to assign Id to each tab and handle the event using ClientScript, Here is how it works:

Assign id to each link like this:

$this->widget('bootstrap.widgets.TbTabs', array(
    'type'=>'tabs',
    'placement'=>'above', // 'above', 'right', 'below' or 'left'
    'tabs'=>array(
        array('label'=>'Section 1', 'active'=>true, 'linkOptions' => array('id'=>'link1')),
        array('label'=>'Section 2', 'linkOptions' => array('id'=>'link2')),
    ),
));

Then register your js using CClientScript

Yii::app()->clientScript->registerScript("link1Click", "$('#link1').click(function(){alert('link1 is clicked');})");
Yii::app()->clientScript->registerScript("link1Click", "$('#link2').click(function(){alert('link2 is clicked');})");