I'll split this into two posts. The first will look at how to create the functionality and the second, if you're interested, will focus on what the code is actually doing.
I think it does, and I also think it's got a number of areas where it can help in Visio's web output.
I'm not going to going into a lot of detail about jQuery as it's received a good deal of coverage recently, particularly since it's acceptance by Microsoft and Nokia. If you'd like to find out a bit more then take a look at these links for starters:
Save as web - frames and framesets
In standard form Visio's Save as web addon generates a basic 'holder' page that contains two frames. A left hand frame is home to the navigation and data functionality while the right hand one houses the drawing pages.
As we're already using frames then it's fairly simple to add a third one that will hold our page tabs. The basic setup will look like this (the new frameset and frame are highlighted green):
Using jQuery you can dynamically generate the page tabs as the page loads and it's then just a case of handling the tab clicks and setting the active tab as the drawing page changes.
I kept the majority of the code and css in a single new document (tabNav.htm) to try and make it as simple as possible to integrate into your own project. However, there are a few other changes to make so I'll quickly run through the steps required.
Based on a main html page generated from Visio's Save As Web Page addon, plus the associated files folder.
1) Download the jQuery core library from the jQuery homepage (note the current release file is jquery-1.2.6.min.js) and add it to your files folder.
2) Download my new tab navigation page (tabNav.htm) and add it to your files folder.
3) Open main page in an editor or something like Notepad, navigate to the bottom of the page to find the frames html. It should look something like this:
4) Edit the html so you end up with the new frameset, encapsulating both the orginal drawing frame (frmDrawing) and the new frame (frmTabNav). The result should look like this:
You can download some a sample text file here, but note that you'll need to change the src file paths to match your own project.
// Set active tab
var frmNav = parent.frames['frmTabNav'].window;
6) Save the file and open it in IE and you should see a tab for each of your pages.
So that, in a nutshell, is how to go about adding tab navigation functionality. In the next post I'll go into a bit more detail about the what's actually happening within the code.