Yii 1.1: easytabs

EasyTabs simple wrapper
15 followers

Hi there. Here is my second small extension. A simple wrapper to jQuery EasyTabs

Requirements

  • Tested on Yii 1.1.10 and 1.1.13 but should work with previous versions that have jQuery above 1.4.3. Please note this from EasyTabs:

NOTE: Easytabs works with jQuery 1.4.3 and greater, but only the latest minor version of jQuery is actively supported (1.7 at this time).

Usage

The purpose of this extension is to allow you to use EasyTabs with Yii

The usage is pretty simple.

In your view place the following code:

$this->widget('ext.EasyTabs.EasyTabs', array(
    'tabs'=>array(
        array(
            'title' => 'Ajax Tab',
            'content'=>'Blábláblá',
        ),
        array(
            'title' => 'Nested Tabs',
            'content'=>$this->widget('ext.EasyTabs.EasyTabs', array(
                'tabs'=>array(
                    array(
                        'title' => 'Demos',
                    ),
                    array(
                        'title' => 'Guide',
                    ),
                ),
            ),true),    
        ),
        ),
    )
));

Avaliable options are:

  • id - If not present Yii will generate one for you
  • tabs - an array of arrays with the tabs options as follows:
    • id - this will prepended with the widget id. If not present a incremental integer will be used
    • url - If this is used then you are using a Ajax Tab (please see JQuery EasyTabs documentation and examples)
    • title - The text to appear in the tab
    • content - The content to appear in the tab panel (no rendering will be executed i just output the variable value)
    • contentTitle - The first line using an h2 html tag that will appear at the top of the tab panel. (If equal to '' then no title will appear. If empty then the tab title will appear.
  • options - the options to pass to jQuery EasyTabs plugin
  • baseScriptUrl - the path to the javascript files (only set this if you really need it)
  • cssFile - If you need to change the look and feel of the tabs grab the css file from the assets folder, change it and store wherever you wan't. Then use this option to specify the new path. Please keep in mind that some style options from the css allow the magic to option so change only what you really need.

Know Issues

  • When passing option uiTabs to the jQuery Plugin it doesn't work as expected

Found the problem and i'm working on it

Next steps

Resources

Total 5 comments

#12638 report it
badbold at 2013/04/02 09:59pm
render

can somebody teach me how to render form into the tabs? :(

#12052 report it
Ahamed Rifaideen at 2013/02/24 02:33am
good

nice work babe...

#11457 report it
Artur Oliveira at 2013/01/14 06:09pm
Demo up and running again

Sorry guys

Some problems with the demo server...

Everything ok now.

Feel free to try it on

#11444 report it
betelgeuse at 2013/01/14 08:31am
demo

demo is not working

#11417 report it
Artur Oliveira at 2013/01/13 01:38am
Feedbacks are greatly appreciated!

Hi everyone please feel free to comment my work, suggest improvements, your thoughts about my work.

Thanks

Leave a comment

Please to leave your comment.

Create extension