1. Requirements
2. Usage
3. Know Issues
4. Next steps
5. Resources

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 ¶

• Work on vertical tabs
• Include some sort of scrolling method for large number of tabs using maybe jScrollPane and/or jQuery slimScroll

Resources ¶

• Demo
• Project
• jQuery EasyTabs web site