Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Ian Alexander on Aug 08, 2009 18:09
open dhtmlx forum
dhtmlxTabbar: using background images on tabs

I have the following XML file:

<?xml version="1.0"?>
<tabbar hrefmode="ajax-html">
<row>
<tab id="a1" selected="1" width='70px' href="index.php">1</tab>

[other tabs deleted]

</row>
</tabbar>


Rather than have the number 1 show on the Tab I want to use a background image I have prepared called tab_home.png which I have designed for tabs which are right aligned.

This is the main html:


<html>
<head>
    <title>Right TabBar</title>
    <link rel="stylesheet" type="text/css" href="dhtmlxtabbar.css">
    <script src="dhtmlxcommon.js"></script>
    <script src="dhtmlxtabbar.js"></script>
<link rel="stylesheet" type="text/css" href="pb.css">
</head>

<body style="height:100%;">


<table>
<tr>
<td>
<div id="a_tabbar" style="width:780px;height:680px;"/>
</td>
</tr>
</table>

<br>

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");
tabbar.enableAutoSize(true,true);
</script>


</body>
</html>


What do I need to do in order to get the graphic to show as the tab's background image ?

Many thanks in advance for any help with this matter.
Answer posted by Alex (support) on Aug 10, 2009 01:49

you can change the tabbar images. Please, see details in the following post:

http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=8615

Answer posted by Ian on Aug 10, 2009 07:54
That doesn't seem to refer to what I want to do which is have a different name showing for each of my 10 tabs. I can't use plain text to name the tabs as they are right aligned but instead I have created 10 png images which show the names on the tabs and I sort of need them to be set using css background-image ?



Answer posted by Alex (support) on Aug 10, 2009 09:31

You can place html as the tab text. It can be an image:

tabbar.addTab(someId,"<img src='some.gif' style='...'>","100px");

Answer posted by Ian on Aug 10, 2009 09:52
I'm using an xml file to load the tab details though ... can it also be done that way or do I need to abandon the xml file and use javascript addTab instead?

Answer posted by Alex (support) on Aug 11, 2009 02:08

It's possible to apply the same approach in case of xml loading:

<tab id="" width="..." href="..."><![CDATA[<img src='some.gif' style='...'>]]></tab>

Answer posted by Ian on Aug 11, 2009 04:22
OK, that's working nicely now.  Many thanks for your help.