Tabs

[MikeFoster]

Well... just look at them

The basic demo only illustrates the fundamental ideas used by xTabPanelGroup. And it doesn't yet have any styling.

xTabPanelGroup uses more Js from my library but is more flexible, and it's demo is a "finished page" from which you can start. xTabPanelGroup allows you to specify the width of the object - or it can be liquid (flow with the page), for example: TPG with liquid width. xTabPanelGroup has been used and tested by many different people.

Actually, I think the basic demo has turned out pretty nice. It uses much less Js and gives you the option of styling it and the page in your own way. But I don't yet consider the basic demo to be "finished". The basic demo is very useful for learning how "progressive enhancement" was accomplished in the xTabPanelGroup demo.

[rctneil]

So, can the xTabPanelGroup be used as an include like the basic demo?

[MikeFoster]

Yes. View the source of the page. All Js is in external files - except for the onload and onunload code which is minimal and could also be put in an external file.

All CSS is also in external files. Note that 'tpg_def.css' gets loaded by default and 'tpg_dyn.css' only gets loaded if Js is enabled (it overrides properties in tpg_def). I use a 'document.write' for this - if you use XHTML it can be done differently but I always use a HTML4.01 Strict doctype.

If you are asking about including the HTML with PHP then yes that can be done with either demo.

[MikeFoster]

If you want to use the xTabPanelGroup demo then it might be easier to just download my library distribution file. It contains the demo page and all the other files you'll need. The quick-start page (also in the zip) describes what you'll find after you unzip the file.

Btw - in the folder "cross-browser.com/x/examples" you'll also find CSS files which provide an alternate styling on the tabs: tpg_def_org.css and tpg_dyn_org.css.

[rctneil]

But how can i have tab groups on different pages and use one include file to make them work like I said before?

Sorry about all of this but as soon as i can use an include for the xtabpanelgroup demo then I can get it inserted into my site.

Thanks

Neil

[MikeFoster]

For example, here is the HTML for one of the tab groups from the demo:

<h3>Demo 1</h3>
<div>
<div id='tpg1' class='tabPanelGroup'>

  <div class='tabGroup'>
    <a href='#tpg11' class='tabDefault'>General</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
    <a href='#tpg12' class='tabDefault'>Javascript</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
    <a href='#tpg13' class='tabDefault'>CSS</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
    <a href='#tpg14' class='tabDefault'>HTML</a>
  </div>
  
  <div id='tpg11' class='tabPanel'>
    <h4>General</h4>
    <p>Tab panel groups. Multiple objects can be instantiated on one page.</p>
  </div>
  
  <div id='tpg12' class='tabPanel'>
    <h4>Javascript</h4>
    <p>Cross-browser, downgradeable, and unobtrusive. Disable Javascript and reload this page.</p>
  </div>
  
  <div id='tpg13' class='tabPanel'>
    <h4>CSS</h4>
    <p>In 2 files: tpg_def.css for default styles, and tpg_dyn.css for dynamic overrides when Javascript is enabled.</p>
  </div>
  
  <div id='tpg14' class='tabPanel'>
    <h4>HTML</h4>
    <p>The content is in the HTML - it is not written with Javascript.</p>
  </div>
  
</div>
</div>

Now, cut out the HTML for "tpg1" and paste it into a new file (tpg1_html.php), and php-include it with the following:

<h3>Demo 1</h3>
<div>
<?php include tpg1_html.php; ?>
</div>

[rctneil]

It's the javascript behind which makes it work which i want to "include". I want to "include" the javascript once so i can have many tpg's and they all use the 1 javascript file to make them all work. How?

[MikeFoster]

Did you download the demo and experiment with it?

Give us a link to your test page and I'll check it out.