surfmap.js

帮助你建立javascript站点导航条

// ----------------------------------------------------------------------------
// Private section.
//
// The variables and functions in this section are used internally by the script
// and shouldn't be accessed directly from outside.
// ----------------------------------------------------------------------------

// Global variables
var items               = new Array();        // array of all items in the sitemap
var topItems            = new Array();        // top level items only
var browser             = "OTHER";            // browser version (IE, NS, NS6 or OTHER)
var selectedItem        = null;               // current selected item
var style               = null;               // site map style
var scriptURL           = null;               // URL to the script folder
var expandTopItems      = null;               // true to expand top level items
var mouseOverColor      = null;               // mouse over color
var selectedColor       = null;               // selected color
var selectedBackground  = null;               // selected background color

// pre-load static images
var blankImg = new Image();
var simpleImg = new Image();
var simplelImg = new Image();
var minusImg = new Image();
var colapseImg = new Image();
var colapselImg = new Image();
var plusImg = new Image();
var expandlImg = new Image();
var expandImg = new Image();
var spaceImg = new Image();
var treeLineImg = new Image();

// ----------------------------------------------------------------------------
// Calculates the Y coordinates of all visible sitemap items.
// ----------------------------------------------------------------------------
function adjustY()
  {
	
    //if ( browser == "NS6" ) {
    //  siteMapObj = document.getElementById('sitemap');
    //  siteMapObj.style.display = "none";
    //  siteMapObj.style.display = "";
    //}
    
    // This was reported necessary by Mozilla, but it works better without it.
	
    if ( browser != "NS" )
      return;

    var y = 0;
    var minWidth = 0;
    var minHeight = 0;
    for ( var i=0; i<items.length; i++ )
      {
        getSiteItemObj(items[i]).top = y;
        getSiteItemObj(items[i]).left = 0;
        if ( browser == "NS" ) {
			if ( getSiteItemObj(items[i]).visibility == "show" )
			  {
			    y += getSiteItemObj(items[i]).clip.height;
			    if ( getSiteItemObj(items[i]).clip.width > minWidth )
			      minWidth = getSiteItemObj(items[i]).clip.width;
			    minHeight += getSiteItemObj(items[i]).clip.height;
			  }
		}
      }
    document.sitemap.clip.right = minWidth;
    document.sitemap.clip.bottom = minHeight;
  }

// ----------------------------------------------------------------------------
// Return the site item DOM object for the given siteItem
// ----------------------------------------------------------------------------
function getSiteItemObj( siteItem )
  {
	if ( browser == "NS6" )
	  return document.getElementById("item"+siteItem.id);
	else
	  return siteItem.obj;
  }

// ----------------------------------------------------------------------------
// Return the icon DOM object for the given siteItem
// ----------------------------------------------------------------------------
function getIconObj( siteItem )
  {
	if ( browser == "NS6" )
	  return eval("document.icon"+siteItem.id);
	else
	  return siteItem.icon;
  }
  
// ----------------------------------------------------------------------------
// Return the tree icon DOM object for the given siteItem
// ----------------------------------------------------------------------------
function getTreeIconObj( siteItem )
  {
	if ( browser == "NS6" )
	  return eval("document.treeIcon"+siteItem.id);
	else
	  return siteItem.treeIcon;
  }

// ----------------------------------------------------------------------------
// Assign the tree icon DOM object for the given siteItem
// ----------------------------------------------------------------------------
function setTreeIconObj( siteItem, imgObj )
  {
	if ( browser == "NS6" )
	  eval("document.treeIcon"+siteItem.id).src = imgObj.src;
	else
	  siteItem.treeIcon.src = imgObj.src;
  }

// ----------------------------------------------------------------------------
// Return the style DOM object for the given siteItem
// ----------------------------------------------------------------------------
function getStyleObj( siteItem )
  {
	if ( siteItem.text != null ) {
		if ( browser == "NS6" )
		  return document.getElementById("style"+siteItem.id).style;
		else
		  return siteItem.style;
	} else {
		return null;
	}
  }

// ----------------------------------------------------------------------------
// Colapses a given item, hiding its entire subtree.
// ----------------------------------------------------------------------------
function colapse( siteItem )
  {
    if ( selectedItem == siteItem )
      selectItem( null );
    for ( var i=0; i<siteItem.children.length; i++ )
      {
        if ( browser == "IE" )
          getSiteItemObj(siteItem.children[i]).style.display = "none";
        else if ( browser == "NS" )
          getSiteItemObj(siteItem.children[i]).visibility = "hide";
        else if ( browser == "NS6" )
          getSiteItemObj(siteItem.children[i]).style.display = "none";
        
       colapse( siteItem.children[i] );
      }
  }



// ----------------------------------------------------------------------------
// Displays the sitemap
// ----------------------------------------------------------------------------
function display()
  {
	if ( browser == "IE" )
      _writeln( "<table border='0' cellspacing='0' cellpadding='0' style='position:relative'><tr><td valign=top align=left>" );
    if ( browser == "NS6" )
      _writeln( "<div id='sitemap'>" );
      
    for ( var i=0; i<topItems.length; i++ )
      renderItem( topItems[i], "" );

    if ( browser == "IE" )
      _writeln( "</td></tr></table>" );
    else if ( browser == "NS6" )
      _writeln( "</div>" );
    else if ( browser == "NS" )
      window.onResize = restoreIcons;
    else
      return;
 
    for ( var i=0; i<topItems.length; i++ )
      {
        var siteItem = topItems[i];
        if ( browser == "IE" )
          getSiteItemObj(siteItem).style.display = "block";
        else if ( browser == "NS" )
          getSiteItemObj(siteItem).visibility = "show";
        // do nothing for NS6
          
        if ( (expandTopItems) && (siteItem.children.length != 0) )
          {
            expand( siteItem );
            siteItem.opened = true;
            updateIcons( siteItem );
          }
       }
       
    if ( browser != "NS6" )
      adjustY();
  }



// ----------------------------------------------------------------------------
// Expands a given item, restoring its entire subtree.
// ----------------------------------------------------------------------------
function expand( siteItem )
  {
    for ( var i=0; i<siteItem.children.length; i++ )
      {
        if ( browser == "IE" )
          getSiteItemObj(siteItem.children[i]).style.display = "block";
        else if ( browser == "NS" )
          getSiteItemObj(siteItem.children[i]).visibility = "show";
        else if ( browser == "NS6" )
          getSiteItemObj(siteItem.children[i]).style.display = "block";
        
        if ( siteItem.children[i].opened )
          expand( siteItem.children[i] );
      }
  }



// ----------------------------------------------------------------------------
// Expands a given item and colapses every other at the same level.
// ----------------------------------------------------------------------------
function expandColapse( siteItem )
{
  var children;
  if ( siteItem.parent == null )
    if ( expandTopItems )
      {
        expand( siteItem );
        return;
      }
    else
      children = topItems;
  else
    children = siteItem.parent.children;
  for ( var i=0; i<children.length; i++ )
    if ( (children[i].opened) && (children[i] != siteItem) )
    
      {
        children[i].opened = false;
        colapse( children[i] );
        updateIcons( children[i] );
      }
  expand( siteItem );
}

// ----------------------------------------------------------------------------
// Returns the tree icon for a given item.
// ----------------------------------------------------------------------------
function getTreeIcon( siteItem )
  {
    var icon;
    if ( siteItem.children.length == 0 )
      if ( style == "OUTLINE" )
        icon = blankImg;//"blank.gif";
      else if ( siteItem.last )
        icon = simplelImg;//"simplel.gif";
      else
        icon = simpleImg;//"simple.gif";
    else if ( siteItem.opened )
      if ( style == "OUTLINE" )
        icon = minusImg;//"minus.gif";
      else if ( siteItem.last )
        icon = colapselImg;//"colapsel.gif";
      else
        icon = colapseImg;//"colapse.gif";
    else if ( style == "OUTLINE" )
      icon = plusImg;//"plus.gif";
    else if ( siteItem.last )
      icon = expandlImg;//"expandl.gif";
    else
      icon = expandImg;//"expand.gif";
    return icon;
  }


  
// ----------------------------------------------------------------------------
// Called when an item is clicked. Expands/collapses the item and selects
// the item.
// ----------------------------------------------------------------------------
function itemClicked( siteItem )
  {
    if ( (siteItem.children.length != 0) && (browser != "OTHER") )
      {
        siteItem.opened = !siteItem.opened;
        if ( siteItem.opened )
          expandColapse( siteItem );
        else
          colapse( siteItem );
      }
    selectItem( siteItem );
    adjustY();
  }


  
// ----------------------------------------------------------------------------
// Called when the mouse moves out of an item.
// ----------------------------------------------------------------------------
function itemMouseOut( siteItem )
  {
    siteItem.mouseOver = false;
    if ( (getStyleObj(siteItem) != null) && (!siteItem.selected) )
      getStyleObj(siteItem).color = "";
    updateIcons( siteItem );
    adjustY();
  }


  
// ----------------------------------------------------------------------------
// Called when the mouse moves over an item from outside.
// ----------------------------------------------------------------------------
function itemMouseOver( siteItem )
  {
    siteItem.mouseOver = true;
    if ( (getStyleObj(siteItem) != null) && (!siteItem.selected) )
      getStyleObj(siteItem).color = mouseOverColor;
    updateIcons( siteItem );
    adjustY();
    var message = "";
    if ( siteItem.message != null )
      message = siteItem.message;
    else if ( siteItem.url != null )
      message = siteItem.url;
    return message;
  }



// ----------------------------------------------------------------------------
// Outputs an anchor (<A>) tag for one item.
//
// Parameters:
//   siteItem     item for which to output the link
//   element      HTML code to write inside the anchor tag
// ----------------------------------------------------------------------------
function outputItemAnchor( siteItem, element )
  {
    var itemAnchStr = "";
    itemAnchStr += "<td nowrap>";
    if ( siteItem.url == null )
      itemAnchStr += "<a href='javascript:itemClicked(items["+siteItem.id+"])'";
    else
      {
        itemAnchStr += "<a href='"+siteItem.url+"'";
        if ( siteItem.target != null )
          itemAnchStr += " target='"+siteItem.target+"'";
        itemAnchStr += " onClick='itemClicked(items["+siteItem.id+"])'";
      }
    itemAnchStr += " onMouseOver='window.status=itemMouseOver(items["+siteItem.id+"]); return true'";
    itemAnchStr += " onMouseOut='itemMouseOut(items["+siteItem.id+"]); window.status=\"\"; return true'";
    itemAnchStr += ">";
    itemAnchStr += element;
    itemAnchStr += "</a>";
    itemAnchStr += "</td>";
    _write( itemAnchStr );
  }


  
// ----------------------------------------------------------------------------
// Generates the HTML code for a given item.
//
// Parameters:
//   siteItem   item for which to generate the HTML
//   left       piece of HTML to "ident" the item
// ----------------------------------------------------------------------------
function renderItem( siteItem, left )
  {
    if ( browser == "IE" )
      {
        _write( "<table border='0' cellspacing='0' cellpadding='0' id='item"+siteItem.id+"' style='position:relative;display:none' width='100%'>" );
      }
    else if ( browser == "NS" )
      {
        _write( "<layer id='item"+siteItem.id+"' position='relative' visibility='hide'>" );