Skinnable AJAX Tabstrip

by Acid.JS and WeMakeSites.NET

Are you planning to buy several components from Acid.JS? You can now compile your own Creative Web 2.0 Bundle and the more components you add to it, the more money you save. Start here.

TabStrip.XML 4.0 / July 17, 2010

TabStrip.XML is a powerful lightweight component providing tabbed interfaces for websites.

It is easy to configure by simply adding a few lines of code and defining placeholder element with an ID at the place where the tabstrip should render.

The latest version of the control comes with new client API of 10+ allowing total control over the tabstrips in runtime.

Content Loading Modes

TabStrip.XML supports three content loading modes - static, async and external. static loads declarative static content from the datafile, async loads content with AJAX and external uses <iframe />.

Use the dropdown below to test each of the modes:

 

 

Requirements

  • Standards-compliant (XHTML1.0, XHTML1.1, HTML5) or Skinny DTD public page

Skins Support

The full version of TabStrip.XML comes with a set of 12 skins that can be set either declaratively or via the client API of the control. The lite version is shipped with three skins only - Mac, Vista and XP that can be previewed when switching the modes in the example above. Below is a demo of TabStrip.XML with Mac skin:

 

Position of the TabStrip Buttons

One of the various features of TabStrip.XML is the ability to declaratively set position of the tabstrip buttons - top or bottom.

Use the dropdown below to switch the buttons position of the tabstrip:

 

 

Icon Support

TabStrip.XML supports icons for tab buttons that can be set declaratively via the displayicon and iconurl in the datafile of the tabstrip:

 

Client API of TabStrip.XML

The latest version of the control comes with new client API of 10+ allowing total control over the tabstrips in runtime - enable and disable tabs, add and remove tabs, show and hide tabs, etc. An extensive demo of the client methods is available in the download distribution of the control.

Below is a list of the API of TabStrip.XML:

  • Programmatically add tabs to a tabstrip
  • Programmatically remove tabs from a tabstrip
  • Programmatically set new skin to a tabstrip
  • Programmatically remove a tabstrip from the DOM of the page
  • Create a tabstrip in runtime
  • Remove all tabs
  • Hide Tab
  • Show Tab
  • Disable Tab
  • Enable Tab
  • Programmatically select tab

What's New in the Latest Version

  • Improved rendering and loading speed.
  • New property - mode - static, async and external.
  • Better exception and error handling allowing easier debugging and troubleshooting.
  • Rich client API for tabstrip manipulation in runtime.
  • New property - sortable.
  • New property - buttonposition.
  • Improved crossbrowser compliance.
  • A number of bugs addressed and fixed

Supported Browsers

TabStrip.XML works with all major browsers. Internet Explorer 6 is not supported, and the component does not initialize on that browser.

  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 9 Ready
  • Mozilla FireFox
  • Opera
  • Google Chrome
  • Apple afari

License Information

Free Trial1 - 3 WebsitesMultiple WebsitesDeveloper
The free license is for consideration and testing purposes only. The use of any Acid.JS component as a trial version on a live site is strictly proibited and will be considered an infringement of its copyright.A component purchased with this license is delivered with the full functionality and complete set of skins and can be used on 1-3 websites.The multiple website license allows the use of the component on an unrestricted number of websites, and is delivered with the full functionality and complete set of skins.The developer license includes the source code, full functionality and set of skins. The component can be used on multiple websites. Obfuscation before uploading on a live site is required.
download$20$30$200

If you consider purchasing more than one Acid.JS component you may create and order a custom Creative Web 2.0 Bundle and save money. More information about the Creative Web 2.0 Bundle program is available on my blog.

Difference Between the Free and the Commerical Versions

The free version of TabStrip.XML is displays a trial message at the bottom of each tabstrip and is shipped with three skins only. The full version is fully functional, does not display any trial messages and comes with the full set of 12 skins.

Check what is trending now on Acid.JS