wijtabs jQuery Widget

Break content into multiple sections that can be swapped to save screen real estate with scrollable tabs, sortable tabs, and even allow users to add tabs dynamically.

Syntax

Javascript (Usage)
$(function () { var options; // Type: wijmo.tabs.wijtabs.options $(".selector").wijtabs(options); });

Javascript (Usage)

$(function () {
    var options; // Type:  wijmo.tabs.wijtabs.options
     
    $(".selector").wijtabs(options);
});

Javascript (Specification)
function wijtabs() : any;

Browser Compatibility

Options

	Name	Description
	ajaxOptions	Default value: null Additional Ajax options to consider when loading tab content (see $.ajax).
	alignment	Default value: 'top' Determines the tabs' alignment in respect to the content.
	cache	Default value: false Determines whether or not to cache the remote tabs content, for example, to load content only once or with every click.
	collapsible	Default value: false Determines whether a tab can be collapsed by a user. When this is set to true, an already selected tab will be collapsed upon reselection.
	cookie	Default value: null Stores the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. This option requires a cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options.
	disabledIndexes	Default value: [] An array containing the position of the tabs (zero-based index) that should be disabled upon initialization.
	event	Default value: 'click' The type of event to be used for selecting a tab.
	hideOption	Default value: null This is an animation option for hiding the tab's panel content.
	idPrefix	Default value: 'ui-tabs-' If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
	panelTemplate	Default value: "" This is the HTML template from which a new tab panel is created in case a tab is added via the add method or if a panel for a remote tab is created on the fly.
	scrollable	Default value: false Determines whether to wrap to the next line or enable scrolling when the number of tabs exceeds the specified width.
	showOption	Default value: null This is an animation option for showing the tab's panel content.
	sortable	Default value: false Determines whether the tab can be dragged to a new position.
	spinner	Default value: "" The HTML content of this string is shown in a tab title while remote content is loading. Pass in an empty string to deactivate that behavior. A span element must be present in the A tag of the title for the spinner content to be visible.
	tabTemplate	Default value: "" HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the url and tab label that are passed as arguments to the add method.

Top

Methods

	Name	Description
	abort	Terminate all running tab ajax requests and animations.
	add	Add a new tab.
	destroy	The destroy() method will remove the wijtabs functionality completely and will return the element to its pre-init state.
	disableTab	Disabled a tab.
	enableTab	Enable a disabled tab.
	length	Retrieve the number of tabs of the first matched tab pane.
	load	Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true.
	remove	Removes a tab.
	select	Selects a tab; for example, a clicked tab.
	url	Changes the url from which an Ajax (remote) tab will be loaded.
	widget	Returns a jQuery object containing the original element or other relevant generated element.

Top

Events

	Name	Description
	add	The add event handler. A function called when a tab is added.
	beforeShow	The beforeShow event handler. A function called before a tab is shown.
	disable	The disable event handler. A function called when a tab is disabled.
	enable	The enable event handler. A function called when a tab is enabled.
	load	The load event handler. A function called after the content of a remote tab has been loaded.
	remove	The remove event handler. A function called when a tab is removed.
	select	The select event handler. A function called when clicking a tab.
	show	The show event handler. A function called when a tab is shown.

Top

See Also

Widgets

Reference