Yii2-Tabs-X

This is the forum for the yii2-tabs-x extension for Yii framework 2.0. This is an extended tabs widget for Yii Framework 2 based on the bootstrap-tabs-x jQuery plugin by Krajee.

It helps you align tabs in multiple ways, add borders, achieve rotated/sideways titles, and more.

Refer detailed documentation and examples on usage of the extension.

Dear Krajee,

In yii1.x I used the CjuiTabs, but in Yii2.0 I switched (amongst other things) to your tabs-x. However, I used this code in yii1.x to render a (partial) view in a tab:




$tabs = array(); 

 

                $tabs['NAW gegevens'] = array( 

                        'id'=>'NAW', 

                        'content'=>$this->renderPartial('_NAW', array(

                                'form' => $form, 

                                'model'=>$model, 

                        ), 

                        true,false), 

                );  


$this->widget('zii.widgets.jui.CJuiTabs', array(  

                        'tabs' => $tabs, 

                        'options' => array( 

                                'collapsible' => false,

                        ), 

                ));




The $tabs is the same thing as you use in your examples with $items. But I can’t figure out how to implement this kind of thing with your extension in yii2. Help is very much appreciated.

kind regards,

Rob Mies

I have problem to get ajax tabs to load. At page load default tab content is not loaded, after click to tab content loads nicely. Also all jQuery is stuck before tab click is done ( at least in console).

Any suggestions, here is my tabs-x:

echo TabsX::widget([

    'items' => [


        [


            'label'=>'<i class="glyphicon glyphicon-user"></i> Settings',


            'active'=>true,


            'linkOptions'=>['data-url'=>Url::to(['/user/userprofile'])]


        ],


        [


            'label'=>'<i class="glyphicon glyphicon-list-alt"></i> Messages',


            'linkOptions'=>['data-url'=>Url::to(['/user/inbox'])]


        ],


        [


            'label'=>'<i class="glyphicon glyphicon-king"></i> Favorites',


            'linkOptions'=>['data-url'=>Url::to(['/user/viewfavorites'])]


        ],


    ],


    'position' => TabsX::POS_ABOVE,


    'bordered' => true,


    'encodeLabels' => false,


    'pluginOptions' => ['enableCache' => false]


]);

Is there a way to RELOAD an ajax loaded tab. For example after a form submition to repeat ajax call and get fresh content?

Hi Krajee, I wonder if tabx widget only supports static menu.

I’m trying to add dynamic options to the dropdown list from my database. From my code below, I inserted for loop but I don’t seem to make it work.


 

$items = [

         [

          'label'=>'<i class="glyphicon glyphicon-list-alt"></i> Dropdown',

          'items'=>[

               [

                 foreach($books as $book) {

                   'label'=>'<i class="glyphicon glyphicon-chevron-right"></i> echo $book->genre',

                   'encode'=>false,

                   'content'=>'',

                   'linkOptions'=>['data-url'=>Url::to(['bookshelf/browsebygenre','id' => $book->genre]],           

                 }

               ],

                             

           ];