Question

如何在Yii Bootter中使用TbTabs时控制标签事件的更改？

这是我的代码（但是当我更改了标签时它没有提醒）：

$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

仅供将来参考，控制Tab点击TbTabs的一个解决方案是为每个标签分配Id并使用ClientScript处理事件，以下是它的工作原理：

为每个链接分配ID，如下所示：

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

然后使用CClientScript

注册你的js

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

Answer 2

标签是ul和li元素。他们没有change事件。

见代码：

foreach ($this->events as $name => $handler)
    {
        $handler = CJavaScript::encode($handler);
        $cs->registerScript(__CLASS__.'#'.$id.'_'.$name, "jQuery('#{$id}').on('{$name}', {$handler});");
    }

类似：$('ul').on('change', function () { alert('123'); }); =＆gt;不行。

Answer 3

TbTab工作正常，但change没有Bootstrap Tab个事件。
您可以找到Bootstrap Tab js文档（适用的事件）here：

所以你的代码需要做一些改变才能工作：

$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(
            'show.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is about to be shown.
            'shown.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is fully shown (after CSS transitions have completed)
        )
    ));

真正的信用应该转到Another Stack Question

Yii Bootster - TbTabs更改标签事件

3 个答案: