Question

我正在使用Yii Booster Yii扩展UI。我需要使用ajax更新选项卡的内容。使用下面的代码，我可以使用renderPartial获取内容，但我想进行ajax调用并更新内容。

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
                array('label' => 'Home', 'content' => $this->renderPartial('home', NULL, true), 'active' => true),
                array('label' => 'Test', 'items' => array(
                        array('label' => 'Sub Tab 1', 'content' => $this->renderPartial('testpage', NULL, true)),
                        array('label' => 'Sub Tab 2', 'content' => 'some content ')
                )),
        )
    )
);

我是否需要使用jquery或其他东西来使用Yii Booster小部件？这是我第一次使用php / yii / extensions。

我有点困惑，所以Yii Booster集成了Bootstrap小部件，以便它们可以与php一起使用。但是对于客户端，我是否需要使用jquery来操作bootstrap小部件？

有没有使用Yii Booster的教程，我知道yii booster网站的链接，但是我们只有简单的例子，与事件无关，ajax。

Answer 1

有这个工作。正如@Sergey所说我需要使用'显示'事件。我给每个标签指定了ID，以识别特定的标签和加载内容。这是代码

<?php $this->widget('bootstrap.widgets.TbTabs', array(
        'id' => 'mytabs',
        'type' => 'tabs',
        'tabs' => array(
                array('id' => 'tab1', 'label' => 'Tab 1', 'content' => $this->renderPartial('tab1', null, true), 'active' => true),
                array('id' => 'tab2', 'label' => 'Tab 2', 'content' => 'loading ....'),
                array('id' => 'tab3', 'label' => 'Tab 3', 'content' => 'loading ....'),
        ),
        'events'=>array('shown'=>'js:loadContent')
    )
);?>

我们有3个标签，内容将使用loadContent javascript函数加载。

<script type="text/javascript">

function loadContent(e){

    var tabId = e.target.getAttribute("href");

    var ctUrl = ''; 

    if(tabId == '#tab1') {
        ctUrl = 'url to get tab 1 content';
    } else if(tabId == '#tab2') {
        ctUrl = 'url to get tab 2 content';
    } else if(tabId == '#tab3') {
        ctUrl = 'url to get tab 3 content';
    }

    if(ctUrl != '') {
        $.ajax({
            url      : ctUrl,
            type     : 'POST',
            dataType : 'html',
            cache    : false,
            success  : function(html)
            {
                jQuery(tabId).html(html);
            },
            error:function(){
                    alert('Request failed');
            }
        });
    }

    preventDefault();
    return false;
}

这里我们得到目标，它应该是我们单击的选项卡的锚元素，获取应该是我们配置的id的href值。根据此ID确定网址，加载内容并更新div。 div的id与href相同。

我还没有找到加载初始活动标签内容的方法，应该有办法解雇loadContent函数，现在我已经使用了renderPartial来获取内容

Answer 2

我用@Abdullahs的例子扩展了TbTabs类。它使用YiiBooster进行了测试，但也可以与其他Bootstrap插件一起使用。

用法：

$this->widget(
    'ext.ajaxTabs.widgets.ajaxTabs',
    array(
         'reload' => true, // Reload the tab content each time a tab is clicked. Delete this line to load it only once.
         'tabs' => array(
             array(
                 'label' => 'Static',
                 'content' => 'Static content'
             ),
             array(
                 'label' => 'Static rendered',
                 'content' => $this->renderPartial('index', null, true),
             ),
             // And finally AJAX:
             array(
                 'label' => 'AJAX',
                 'content' => 'loading ....',
                 'linkOptions' => array('data-tab-url' => Yii::app()->createAbsoluteUrl('site/'))
             )
         ),
    )
);

/protected/extensions/ajaxTabs/widget/ajaxTabs.php：

<?php

Yii::import('bootstrap.widgets.TbTabs');

class ajaxTabs extends TbTabs
{
    /**
     * @var bool Reload the tab content each time the tab is clicked. Default: load only once
     */
    public $reload = false;

    public function run()
    {
        $id = $this->id;

        /** @var CClientScript $cs */
        $cs = Yii::app()->getClientScript();
        $cs->registerScript(
            __CLASS__ . '#' . $id . '_ajax', '
                function TbTabsAjax(e) {

                    e.preventDefault();

                    var $eTarget = $(e.target);
                    var $tab = $($eTarget.attr("href"));
                    var ctUrl = $eTarget.data("tab-url");

                    if (ctUrl != "" && ctUrl !== undefined) {
                        $.ajax({
                            url: ctUrl,
                            type: "POST",
                            dataType: "html",
                            cache: false,
                            success: function (html) {
                                $tab.html(html);
                            },
                            error: function () {
                                alert("Request failed");
                            }
                        });
                    }
                    if(' . ($this->reload ? 0 : 1) . '){
                        $eTarget.data("tab-url", "");
                    }
                    return false;
                }'
        );
        $this->events['shown'] = 'js:TbTabsAjax';

        parent::run();
    }

}

Answer 3

它是loadContent的新版本

function loadContent(e){
var targetUrl = e.target.getAttribute('data-tab-url');
var contentID = e.target.getAttribute('href');
$(contentID).load(targetUrl, function(){
    $('.tabs').tabs(); //reinitialize tabs
});
e.preventDefault();
return false;}

YiiBooster使用ajax调用选中小部件内容更新

3 个答案: