jqxTabs – Tabs widget built with jQuery


jqxTabs is breaking the content into multiple sections. You can populate it from ‘LI’ elements for the tab titles and ‘DIV’ elements for tab contents.
Browse examples: Tabs Demos jquery-tabs

Features

  • Selection and Content Animations
  • Keyboard Navigation
  • Tabs Reorder
  • Tabs Scrolling
  • Collapsible mode
  • Works across devices and browsers
  • Web Standards Compliant
  • Rich and easy to use JavaScript API
  • Easy customization and built-in themes
  • Search-Engine Friendly Rendering

Selection and Content Animations

jqxTabs comes with two built-in animation effects – content and selection animations. When the content animation is activated, and the user selects a new tab, the tabs content is displayed with ‘fade’ animation. The selection animation is another animation effect which is also activated when the user selects a new tab. In that effect, the selection is smoothly moved from the currently selected tab to the new tab.

Keyboard Navigation

The jQuery Tabs widget allows you to navigate through all Tab items by using the keyboard arrow keys. Keyboard navigation is perfect for application scenarios where accessibility is an important factor.

Tabs Reorder

With jqxTabs, you can easily change the order of the tabs by dragging a tab from one position and dropping it into another. The feature can be activated by setting the widget’s ‘reorder’ property to true. In the following image, the user drags the ‘Active Server Pages’ tab. javascript-tabs-drag In the following image, the ‘Active Server Pages’ tab is already dropped to its new position. javascript-tabs-drop

Tabs Scrolling

jqxTabs comes with built-in scrolling capabilities. Scroll buttons are automatically displayed when there is not enough available space for all tabs, You can also change the scroll buttons position to ‘left’ or ‘right’. tabs-scrolling

Works across devices and browsers

jqxTabs supports all major desktop and mobile web browsers – Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad). jqxTabs automatically detects the browser’s type and adjusts its internal behavior for optimal rendering and best user experience. You can easily use this widget even on touch devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript Tabs widget based on jQuery, HTML5 and CSS3.

Rich and easy to use JavaScript API

jqxTabs has a rich set of events and built-in functions guaranteeing full control over the Tabs. With the Tabs API, you can get the selected tab, select a new tab, disable or enable a tab or the entire widget. You can also add or remove tabs.

Easy customization and built-in themes

jqxTabs ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property.

Search-Engine friendly rendering

jQuery Tabs uses a list items and CSS for rendering. You can turn your list items into a nice-looking tabs by calling a single function. Below is a html markup for building a Tabs widget. 
<div id='jqxTabs'>
	<ul style='margin-left: 30px;'>
		<li>Node.js</li>
		<li>JavaServer Pages</li>
		<li>Active Server Pages</li>
	</ul>
	<div>
		Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
		It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
		Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
		Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
		Node.js includes a REPL environment for interactive testing.
	</div>
	<div>
		JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
		Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
		To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
		(Java Community Process) must both be met by the container.
	</div>
	<div>
		ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
		It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
		ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
		The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
	</div>
</div>