1

UIにYiiBoosterYii拡張機能を使用しています。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 ')
                )),
        )
    )
);

Yii Boosterウィジェットを操作するには、jqueryなどを使用する必要がありますか？php / yii/extensionsを使用するのはこれが初めてです。

私は少し混乱しているので、Yii Boosterはブートストラップウィジェットを統合して、phpで使用できるようにしています。しかし、クライアント側では、jqueryを使用してブートストラップウィジェットを操作する必要がありますか？

Yii Boosterを使用するためのチュートリアルはありますか？yii Boosterサイトへのリンクは知っていますが、イベント、ajaxに関連しない簡単な例があります。

4

3 に答える 3

1

これが機能しました。@Sergeyが言ったように、「shown」イベントを使用する必要があります。特定のタブを識別してコンテンツを読み込むために、各タブに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つのタブがあり、コンテンツはloadContentjavascript関数を使用してロードされます。

<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に基づいてURLを決定し、コンテンツをロードして、divを更新します。divのIDはhrefと同じです。

最初のアクティブなタブのコンテンツをロードする方法が見つかりません。loadContent関数を起動する方法があるはずです。今のところ、代わりにrenderPartialを使用してコンテンツを取得しています。

于 2012-11-25T08:08:58.813 に答える
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 に答える
0

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