Acid.JS Web 2.0 Components Help Topics

TabStrip.XML

TabStrip.XML Setup, Installation and Help Topics

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 allowing total control over the tabstrips in runtime.

View online demo of TabStrip.XML or download it straight away. Buy via PayPal.

Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.

Requirements

  • Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages.
  • Web-server (Apache, IIS)
  • The demos included in the download file require web-server with support for PHP (Apache, IIS).

Supported Browsers

  • 6
  • 7
  • 8
  • 9
  •  
  •  
  •  
  •  

Installing and Using TabStrip.XML

To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.

1. Copy the TabStrip.XML/ folder in the root of your website. The folder contains the skins and runtime scripts of the control and is included in the distribution of TabStrip.XML.

2. On the page which will use the component, include the required scripts either in the <head></head> or before the closing </body> tag:

<script type="text/javascript" src="TabStrip.XML/Scripts/jQuery.js"></script>
<script type="text/javascript" src="TabStrip.XML/Scripts/TabStrip.XML.js"></script>

3. Create a new <script type="text/javascript"></script> tag after the scripts from the previous step, and in it put the SETTINGS constant of the component to define some common properties that can be used by all tabstrips that you have on the same page:

TabstripXml.SETTINGS = {
	closeButtonHint: "Click to close tab",
	rootFolder: ""
};

The properties of the constant are:

  • closeButtonHint - tooltip for the tab close button.
  • rootFolder - By default, the TabStrip.XML folder is in the root of the website, but you can put it as a child of a different directory - for example - Scripts/. If you do so, you need to add the name of this directory here, and also modify the src attribute of the scripts you have included in Step 1, for example:
<script type="text/javascript" src="Scripts/TabStrip.XML/Scripts/jQuery.js"></script>
<script type="text/javascript" src="Scripts/TabStrip.XML/Scripts/TabStrip.XML.js"></script>

TabstripXml.SETTINGS = {
	closeButtonHint: "Click to close tab",
	rootFolder: "Scripts/"
};

Make sure you do not forget the trailing slash after the directory name in TabstripXml.SETTINGS.rootFolder, otherwise the files will not be included correctly.

4. Create an empty <div></div> element on the page that will be used to render the tabstrip and supply it with an id, for example:

<div id="my-first-tabstrip-xml"></div>

5. To render your first tabstrip when page loads, add the following code after the TabstripXml.SETTINGS constant from Step 3:

var tab1 = new TabstripXml({
	datafile: "tabsets/tab1.xml",
	placeholder: "my-first-tabstrip-xml",
	rendered: function(){
		
	}
});
tab1.pageload();

The properties of the pageload() method are:

  • datafile - path to the tabsttrip's .xml datafile (please, refer to the TabStrip.XML Datafiles chapter in this manual to learn how to create and use datafiles)
  • placeholder - the id of the <div></div> element you have created in Step 4.
  • rendered - (optional) function that will be executed when the tabstrip is rendered.

6. After you have created the tabsets/tab1.xml file and made sure that the path to it is the correct one, reload the page. If all of the steps have been followed correctly, your first tabstrip will render on the page at the place where you have put the <div id="my-first-tabstrip-xml"></div> with the settings that you have defined in the datafile.

TabStrip.XML Datafiles

TabStrip.XML uses simple .xml files to load and render content on the page via AJAX. The datafiles for the demo are stored in the tabsets/ folder, but this location can be arbitrary. Each datafile consists of two types of XML tags:

  • <tabstripxml /> - representing the tabstrip that will be rendered in the specified placeholder and containing the common settngs for the tabstrip, i.e: skin, default open tab, buttons position, content loading mode, etc.
  • <tab /> - representing a single tab, and containing tab-specific properties such as title, custom tab button click function, icon, enabled state and content. If you are upgrading from a previous version of the component, you need to change the <tabs /> tag to <tab /> in version 5.0 and above.

Attributes of the <tabstripxml /> Tag in the Datafiles

mode

The content rendering mode of TabStrip.XML is defined here and can be one of the following:

  • static - The content for each tab is taken from the datafile, for example: 
    <tabstripxml mode="static">

    <tab title="Home" onclientclick="" iconurl="icons/icon-01.png" enabled="true" source="none"><![CDATA[
	<div class="tabstrip-xml-content-wrapper">
		<h4>Home</h4>
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
]]></tab>
  • async - The content of each tab is loaded via AJAX and on demand when the tab is clicked. The AJAX is executed only when the tab is clicked for the first time. The path to the content file should be defined in the source attribute of the <tab />: 
    <tabstripxml mode="async">

    <tab title="Home" onclientclick="" iconurl="icons/icon-01.gif" enabled="true" source="home.html" />
  • external - The content if each tab is loaded in an <iframe /> and on demand when the respective tab is clicked. The path to the content file should be defined in the source attribute of the <tab />: 
    <tabstripxml mode="async">

    <tab title="Home" onclientclick="" iconurl="icons/icon-01.gif" enabled="true" source="home.html" />
  • template - The content of each tab is taken from an existing element on the page. This approach is excellent if you care about the SEO of your website. The template should be defined in the source attribute of the <tab /> and is actually the id of the template node: 
    <tabstripxml mode="template">

    <tab title="Home" onclientclick="" iconurl="icons/icon-01.gif" enabled="true" source="#home-template" />
  • the on-page HTML template: 
    <div class="tabstrip-xml-template" id="home-template">
	<div class="tabstrip-xml-content-wrapper">
		<h4>About Us</h4>
		<p>Lorem ipsum...</p>
	</div>
</div>
  • the CSS for the template, so it is not visible while the tabstrip is initialized: 
    <style type="text/css">
.tabstrip-xml-template
{
	display: none;
    padding: 4px;
}
</style>
allowclose

Requires a Boolean (true or false). If set to false, the tabs in the current tabstrip will render without a close button.

buttonsposition

Requires one of the following values - top, right, bottom, left that will define the position of the tab buttons.

skin

The values should be the name of the skin that will be applied to the current tabstrip. The skins of TabStrip.XML are located in the TabStrip.XML/Skins/ folder and the skin name is the name of the folder inside the Skins/ folder, for example "Vista". The trial version of the component includes one skin, while the full version is shipped with the full set of 12 skins.

enabled

Requires a Boolean (true or false). If value is false, the tabstrip will not initialize and will not render.

width

Requires a number, representing the width of the tabstrip in pixels.

tabpaneheight

Requires a number, representing the height of the tabstrip panes in pixels.

defaultopentab

Requires a zero-index number, representing the default selected tab. For example, if the second tab of the current tabstrip should be selected, you need to set 1:

<tabstripxml defaultopentab="1">
displayicon

Requires a Boolean (true or false). If value is true, then each <tab /> should be supplied with valid URL in the iconurl attribute, so the icon renders:

<tab iconurl="icons/icon-01.gif" />

Attributes of the <tab /> Tag in the Datafiles

title

The value should be a string representing the text for the tab button.

onclientclick

The value should be a function in case you want to execute custom code when the tab is clicked. Please, refer to the demos included in the distribution of the component to learn how to use this attribute.

iconurl

Please, refer to the previous chapter (Attributes of the <tabstripxml /> Tag in the Datafiles) - the part where the displayicon attribute has been explained.

enabled

Requires a Boolean (true or false). If value is false, the tab will be rendered disabled. Disabled tabs can be enabled by using the enable method of the component, which is explaned in the Client API of TabStrip.XML topic later in this manual.

source

Please, refer to the previous chapter (Attributes of the <tabstripxml /> Tag in the Datafiles) - the part where the mode attribute has been explained.

Client API of TabStrip.XML

Please, refer to the demo pages included in the distribution of the control for extensive description and information about the client API of TabStrip.XML.

pageload()

This is the main method that can be used to initialize and instance of TabStrip.XML on the page. Before executing the method you should supply several properties in the constructor of the component, as explained in Step 5 of the Installing and Using TabStrip.XML topic earlier in this manual:

  • datafile
  • placeholder
  • rendered
demand()

You can use the demand() method of the component to create and instance of it after the page was loaded (for example after partial page updates or upon user interaction). Basically, you need the same settings that are required for the pageload() method. Before executing the method you should supply several properties in the constructor of the component, as explained in Step 5 of the Installing and Using TabStrip.XML topic earlier in this manual:

  • datafile
  • placeholder
  • rendered
add()

Use this method to programmatically add tab to a given tabstrip. You need to supply values for the following properties:

  • title - Set text for the tab button.
  • content - Set content to the tab if the mode you have set in the datafile of the tabstrip is static.
  • index - Value should be either "first" or "last". If "first" - the button for the new tab will be added as first item.
  • icon - Value should be URL if the showicon in the datafile is set to true.
  • source - If the mode you have set in the datafile is async or external, the value should be a URL to the external file that will be loaded as tab content. If mode is template, the value of this property should be the id of an existing DOM element on the page whose content will be set as content of the new tab.
  • enabled - Requires a Boolean (true or false) value. If false, the new tab will be rendered as disabled. A disabled tab can be enabled back by using the enable() method and vice versa - can be disabled by using disable(). Both methods are explained later in this manual.
  • onclientclick - Requires a function and is optional. By using it you can assign a custom function that will be executed each time the tab is clicked, similar to the onclientclick property of the datafiles.
remove()

Use this method to programmatically remove tab from a given tabstrip. You need to supply values for the following properties:

  • tab - Requires a zero-index number, representing the tab you wish to remove from the tabstrip. Basically, the tab index is the data-index attribute of each tab. You can check the value of these attributes by using FireBug to inspect the rendered markup of the tab buttons.
destroy()

Use this method to completely remove a tabstrip from the page, dispose its events and nuke its content. The method does not require the setting of any properties. What you need is just reference to the tabstrip object you have previously created, for example:

tab1.destroy()
disable()

Use this method to programmatically disable a tab in a given tabstrip.

  • tab - Requires a zero-index number, representing the tab you wish to disable. Basically, the tab index is the data-index attribute of each tab. You can check the value of these attributes by using FireBug to inspect the rendered markup of the tab buttons.
enable()

Use this method to programmatically enable a tab in a given tabstrip.

  • tab - Requires a zero-index number, representing the tab you wish to enable. Basically, the tab index is the data-index attribute of each tab. You can check the value of these attributes by using FireBug to inspect the rendered markup of the tab buttons.
select()

Use this method to programmatically select a tab in a given tabstrip.

  • tab - Requires a zero-index number, representing the tab you wish to enable. Basically, the tab index is the data-index attribute of each tab. You can check the value of these attributes by using FireBug to inspect the rendered markup of the tab buttons.

TabStrip.XML Events

rendered

You can execute custom JavaScript code when a tabstip is rendered on the page. This can be done either by using the rendered property of the constructor of the component or via JavaScript or jQuery:

Via the rendered property:

var tab1 = new TabstripXml({
	datafile: "tabsets/tab1.xml",
	placeholder: "my-first-tabstrip-xml",
	rendered: function(){
		alert("Look ma! No hands!");	
	}
});

Via jQuery:

$("#my-first-tabstrip-xml").bind("tabstrip-xml-rendered", function(){
	alert("Look ma! No hands!");	
});

Fixing the Tabs for Internet Explorer 6 and 7

Due to poor CSS support, Internet Explorer 6 and 7 require the setting of special styles for the tab buttons. These styles can be found at the bottom in the TabStrip.XML/Scripts/TabStrip.XML.css file and are pretty self-explanatory.

Difference Between the Trial and the Full Version

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

If you wish to purchase the full version of the control, you can do it on the following page

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.

Upgrade to the Full Version after Purchase

After getting the full version you will notice that it contains only certain files, not the entire distribution required to run the script - the rest of the skins and JavaScript. You have to replace the files in the trial version distribution with the ones that you have received after having purchased the full version manually. After this, the control should work without trial notices and the emails sent by it will not contain trial strings.