Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.

Source Code

<div id="myTabs" control="jquery_tabs">
	<div id="tab0" title="Tab 0">
            Less Filling!
	</div>
	<div id="tab1" title="Tab 1">
	    Tastes Great!
	</div>
</div>

In this sample, a tabs widget with the name of 'myTabs' is created with the initial option - “properties” suplied. The function argument of createControl is called when the widget renders, and an object containing all the data necessary to create some tabs is passed to the render object.

Create the control, and add some tabs immediately…

App.createControl(
	'myTabs', 
	'jquery_tabs', 
	{
		property: "rows"
	},
	function() {
		this.render({ rows: [{ id:"zero", title: "First Section", content: "someStringData" },
							{ id:"one", title: "Second Section", url: "myFile1.html" },
							{ id:"two", title: "Third Section", url: "myFile2.html" }
							]
		});
	}
);

Get the handle to an instance of the control, and set the on attribute and perform an action when a message is received (see Entourage MQ and Entourage Expressions for more information about what the callback function is doing here)…

App.getControl('myTabs2', 'jquery_tabs', function() {
 
	this.on("l:buildTabs then render");
 
});

The accordion control is made up of a container div and a single level of divs within that container which will constitute it's rows when it is rendered. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Functions either accept a single argument such as an integer or a string, otherwise they accept a one dimensional object literal. Any function that can be called as an action accepts the same parameters but in the action parameter format. For example…

this.reload({ index: 1, url: "myFile.html" });

is equivalent to…

<div control="jquery_tabs" id="myTabs"
	on="l:loadMe then reload[index=1, url='myFile.html']">
</div>