2

在 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');}"
        )
    ));
4

3 回答 3

4

仅供将来参考，控制 TbTabs 上的 Tab 点击的一种解决方案是将 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');})");
于 2013-08-24T14:49:14.760 回答
1

标签是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'); });=> 不工作。

于 2013-07-24T03:57:45.373 回答
0

TbTab工作正常， 但没有change. 你可以在这里找到js 文档（适用的事件）：Bootstrap Tab
Bootstrap 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(
            '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)
        )
    ));

真正的功劳应该归于另一个堆栈问题

于 2016-01-19T13:28:10.453 回答