1

我正在为 UI 使用 Yii Booster Yii 扩展。我需要使用 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 来操作引导小部件吗？

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

4

3 回答 3

1

我用@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();
    }

}
于 2013-07-09T11:15:12.593 回答
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;
}

这里我们得到目标，应该是我们点击的标签的锚元素，得到href值，应该是我们配置的id。根据这个 id 决定 url，加载内容并更新 div。div 的 id 与 href 相同。

我还没有找到加载初始活动选项卡内容的方法，应该有方法触发 loadContent 函数，现在我使用 renderPartial 来获取内容

于 2012-11-25T08:08:58.813 回答
0

它是加载内容的新版本

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;}
于 2013-12-10T11:14:38.843 回答