'Save as web' tab navigation with jQuery - Part 1

A recent newsgroup question asked whether it would be possible to add tab style navigation to Visio's Save As Web Page output.  There are a number of ways you might tackle this and here is a JavaScript based approach and more specifically, one that uses JQuery.

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.

jQuery

If you're not familiar with jQuery, it's basically a JavaScript library that enables you to select elements within an html document and perform operations upon them. To quote from the homepage:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

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:

• jQuery and Microsoft - Scott Guthrie
• Introduction to jQuery - Rick Strahl

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.

Walkthrough

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.

5. Now search back up the same file for a JavaScript function named CurPageUpdate. Once you've found the function, insert the follow JavaScript statement at the end of the function just below LoadZoom();

   // Set active tab
   var frmNav = parent.frames['frmTabNav'].window;
   frmNav.SetActiveTab(pageIndex);

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.