Introduction

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. Try jqxTabs in our jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas!

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

jqxTabs 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.

In the following image, the 'Active Server Pages' tab is already dropped to its new position.

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'.