CSDN博客

img shift_007

在web开发中做界面的工具(js)

发表于2004/7/11 15:25:00  3642人阅读

在web开发中做界面一般都是有美工做的,但是如果要做成类似windows一样的界面,就比较麻烦,前些日子我在网上找到一个免费的js,它类似与一个做控件的工具,有button,menu,toolbar等常用的控件,可以帮助web开发者画界面。它的使用很简单,如加一个按钮,<DIV class=tbButton IMG
class=tbIcon  src="bgcolor.gif" width=23> </DIV>,
只要指定class就可以了,最后引用这个js就可以了

下面的界面是用js做出来:

   

代码如下:toolbar.js

// Copyright 1999 Microsoft Corporation. All rights reserved.
// Author: Steve Isaac, Microsoft Corporation
//
// DHTML Toolbar Package
//
// This file (along with the companion toolbars.css file) implements full featured
// toolbars completely in DHTML.
//
// See tutorial.htm in the Doc directory for full info on how to use this package.
//
//
//=================================================================================================
//

// Public Style Classes
// --------------------
// tbToolbar:    Toolbar
// tbButton:     Toolbar button
// tbIcon:       Toolbar or menu icon
// tbSeparator:  Toolbar or menu separator
// tbMenu:       Pulldown menu
// tbMenuItem:   Menu item
// tbSubmenu:    Submenu
// tbGeneral:    Arbitrary HTML element in a toolbar.
// tbContentElement: Identifies an HTML element as the page body. One and only one
//               element on the page must have this class. The element must also have
//               its ID set to "tbContentElement".
//
// Public Attributes
// -----------------
// TBTYPE: Special type of element. Possible values are:
//   Elements: toggle
//             radio
//             <not specified> - Simple button
//
//   Toolbars: noMouseOver
//             <not specified> - Mouseover supported
//
// TBSTATE: State of the element. Possible values are:
//   Elements: gray (Disabled)
//             checked
//             unchecked
//            
//   Toolbars: dockedTop
//             dockedBottom
//             hidden
//
// tbOnMenuShow: Event handler that is called immediately prior to showing a menu or
//   submenu. Hosts use this to set the state of menu items. This attribute can either
//   be set on individual menus and submenus, or on a toolbar in which case it is
//   fired for every menu and submenu within that toolbar. The menu that is about
//   to be shown is given in tbEventSrcElement (see below).
//
// Public Functions
// ----------------
// TBSetState(element, newState)
//   Sets the state of an element.
//     element: element to set. This is an object.
//     newState: state to set. This is a string, same values as TBSTATE.
//
// TBRebuildToolbar(toolbar, rebuildMenus)
//   Use this routine to change the contents of a toolbar on the fly. Make all changes
//   (adding, removing and modifying toolbar elements), then call this routine once.
//  This routine can also be used to add an entirely new toolbar.
//     toolbar: toolbar to rebuild. This is an object.
//     rebuildMenus: Should the menus in this toolbar also be rebuilt? Only set this
//       to true if there have been changes; its an expensive operation.
//
// TBRebuildMenu(menu, rebuildSubmenus)
//   Use this routine to change the contents of a menu or a submenu on the fly. Make all changes
//   (adding, removing and modifying menu items), then call this routine once.
//     menu: menu to rebuild. This is an object.
//     rebuildSubmenus: Should the submenus also be rebuilt? Only set this
//       to true if there have been changes; its expensive.
//
// Public Globals
// --------------
// tbEventSrcElement: Contains the element that an event was fired on. The toolbar
// package doesn't support the event object; this object performs a similar function.
var tbEventSrcElement;

//
// Public Error Return Values
// --------------------------
TB_STS_OK = "OK" // Success return
TB_E_INVALID_CLASS = "Invalid class value" // An element has an unrecognized class attribute (probably a misspelling)
TB_E_INVALID_TYPE = "Invalid TBTYPE value"
TB_E_INVALID_STATE = "Invalid TBSTATE value"
TB_E_NO_ID = "Element does not have an ID"

//
//=================================================================================================
//
// Private Attributes
// ------------------
// TBTOOLBARWIDTH: Width of the toolbar (in px)
// TBUSERONCLICK: Temporary storage of an element's original onclick handler
//
// Private Constants. These can be used along with toolbar.css to change the look of the toolbar package.
// -----------------
TB_DISABLED_OPACITY_FILTER = "alpha(opacity=25)"
TB_HANDLE_WIDTH = 10
TB_HANDLE = '<DIV class=tbHandleDiv style="LEFT: 3"> </DIV>' +
            '<DIV class=tbHandleDiv style="LEFT: 6"> </DIV>'

TB_TOOLBAR_PADDING = 4
TB_SEPARATOR_PADDING = 5
TB_CLIENT_AREA_GAP = 0

//
// Private Globals
// ---------------
var TBInitialized = false; // Set to true when the package has initialized.
var tbToolbars = new Array();  // Array of all toolbars.
var tbContentElementObject = null; // Content element.
var tbContentElementTop = 0;  // Y pixel coordinate of the top of the content element.
var tbContentElementBottom = 0; // Y pixel coordinate of the bottom of the content element.
var tbLastHeight = 0; // Previous client window height (before resize in process).
var tbLastWidth = 0; // Previous client window width.
var tbRaisedElement = null; // Current toolbar button that is being shown raised.
var tbOnClickInProcess; // Executing user's onClick event.
var tbMouseOutWhileInOnClick;  // An onmouseout event occurred while executing the user's onClick event.

//
// Functions
//

// Public function for changing an element's state.
function TBSetState(element, newState) {

  newState = newState.toLowerCase();

  switch (element.className) {
    case "tbToolbar" :
      if ((newState != "dockedtop") && (newState != "dockedbottom") && (newState != "hidden")) {
        return TB_E_INVALID_STATE;   
      }
      element.TBSTATE = newState;
      if (newState == "hidden") {
        element.style.visibility = "hidden";
      } else {
        element.style.visibility = "visible";
      }
      TBLayoutToolbars();
      TBLayoutBodyElement();     
    break;
   
    case "tbButton" :
    case "tbButtonDown" :
    case "tbButtonMouseOverUp" :
    case "tbButtonMouseOverDown" :
    case "tbMenuItem" :
      if ((newState != "gray") && (newState != "checked") && (newState != "unchecked")) {
        return TB_E_INVALID_STATE;
      }
       
      currentState = element.TBSTATE;
      if (currentState == "") {
        currentState = "checked";
      }
     
      if (newState == currentState) {
        return;
      }

      if (element.className != "tbMenuItem") {
        image = element.children.tags("IMG")[0];
    
        // Going into disabled state 
        if (newState == "gray") {
          element.className = "tbButton"; 
          image.className = "tbIcon"; 
          element.style.filter = TB_DISABLED_OPACITY_FILTER;
        }
     
        // Coming out of disabled state. Remove disabled look.
        if (currentState == "gray") {
          element.style.filter = "";
        }
     
        if (newState == "checked") {
           element.className = "tbButtonDown"; 
           image.className = "tbIconDown";
        } else { //unchecked
           element.className = "tbButton"; 
           image.className = "tbIcon";
        } 
      }

      if ((element.TBTYPE == "radio") && (newState == "checked")) {
        radioButtons = element.parentElement.children;
        for (i=0; i<radioButtons.length; i++) {
          if ((radioButtons[i].NAME == element.NAME) && (radioButtons[i] != element)) {
            radioButtons[i].TBSTATE = "unchecked";
           
            if (element.className != "tbMenuItem") {
              radioButtons[i].className = "tbButton";
              radioButtons[i].children.tags("IMG")[0].className = "tbIcon";
            }
          }
        }
      }
     
      element.TBSTATE = newState;
      break;
     
    default :
      return TB_E_INVALID_CLASS;
  }
  return TB_STS_OK;
} //TBSetState


// Event handler for tbContentElementObject onmouseover events.
function TBContentElementMouseOver() {
  if (tbRaisedElement) {
    switch (tbRaisedElement.className) {
    case "tbMenu" :
      // Note: TBShowNormal is in tbmenus.js.
      TBShowNormal(tbRaisedElement);
      break;
    case "tbButtonMouseOverUp" :
      tbRaisedElement.className = "tbButton";
      break;
    case "tbButtonMouseOverDown" :
      tbRaisedElement.className = "tbButtonDown";
      break;
    }
    tbRaisedElement = null;
  }
}


// Global onmouseup handler.
function TBGlobalMouseUp() {
}


// Global onmousedown handler.
function TBGlobalMouseDown() {
  // Always bring down any menus that are being displayed.
  if (typeof(tbMenu) != "undefined") {
    TBHideMenus();
  }
}


//Global ondragstart and onselectstart handler.
function TBGlobalStartEvents() {
}

//Global mouse move handler.
function TBGlobalMouseMove() {
}


// Hander that simply cancels an event
function TBCancelEvent() {
  event.returnValue=false;
  event.cancelBubble=true;
}


// Toolbar button onmouseover handler
function TBButtonMouseOver() {
  var element, image;

  image = event.srcElement;
  element = image.parentElement;
 
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }
  // Change button look based on current state of image.
  if (image.className == "tbIcon") {
    element.className = "tbButtonMouseOverUp";
    tbRaisedElement = element;
  } else if (image.className == "tbIconDown") {
    element.className = "tbButtonMouseOverDown";
  }

  event.cancelBubble=true;
} // TBButtonMouseOver


// Toolbar button onmouseout handler
function TBButtonMouseOut() {
  var element, image;
 
  image = event.srcElement;
  element = image.parentElement;
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }
 
  tbRaisedElement = null;
 
  // Are we in the middle of an onClick event? Set a flag for the onclick handler and return if so.
  if (tbOnClickInProcess) {
    tbMouseOutWhileInOnClick = true;
    return;
  }

  switch (image.className) {
    case "tbIcon" :
      // Is the user cancelling unchecking a toggle/radio button by moving out?
      if (((element.TBTYPE == "toggle") || (element.TBTYPE == "radio")) && (element.TBSTATE == "checked")) {
        element.className = "tbButtonDown";
        image.className = "tbIconDown";
      } else {
        element.className = "tbButton";
      }
    break;
     
    case "tbIconDown" :
      // Is the user cancelling checking a toggle/radio button by moving out?
      if (((element.TBTYPE == "toggle") || (element.TBTYPE == "radio")) && (element.TBSTATE == "unchecked")) {
        element.className = "tbButton";
        image.className = "tbIcon";
      } else {
        element.className = "tbButtonDown"
      }
    break;
     
    case "tbIconDownPressed" :
      // The only time we'll see this is if the user is cancelling unchecking a checked toggle/radio
      element.className = "tbButtonDown";
      image.className = "tbIconDown";
    break; 
  }
  event.cancelBubble=true;
} // TBButtonMouseOut


// Toolbar button onmousedown handler
function TBButtonMouseDown() {
  var element, image;
 
  if (typeof(tbMenu) != "undefined") {
    TBHideMenus();
  }
 
  if (event.srcElement.tagName == "IMG") {
    image = event.srcElement;
    element = image.parentElement;
  } else {
    element = event.srcElement;
    image = element.children.tags("IMG")[0];
  }
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }
  switch (image.className) {
    case "tbIcon" :
      element.className = "tbButtonMouseOverDown";
      image.className = "tbIconDown";
    break;
     
    case "tbIconDown" :
      if ((element.TBTYPE == "toggle") || (element.TBTYPE == "radio")) {
        image.className = "tbIconDownPressed";
      } else {
        element.className = "tbButton";
        image.className = "tbIcon";
      }
    break;
  }  
 
  event.cancelBubble=true;
  return false;
  
} //TBButtonMouseDown

// Toolbar button onmouseup handler
function TBButtonMouseUp() {
  var element, image, userOnClick, radioButtons, i;
 
  if (event.srcElement.tagName == "IMG") {
    image = event.srcElement;
    element = image.parentElement;
  } else {
    element = event.srcElement;
    image = element.children.tags("IMG")[0];
  }
 
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }

  // Make sure this is one of our events
  if ((image.className != "tbIcon") && (image.className != "tbIconDown") && (image.className != "tbIconDownPressed")) {
    return;
  }

  // Initialize tbEventSrcElement so that the user's onClick handler can find out where the
  // event is coming from
  tbEventSrcElement = element;
 
  // Execute the  onclick handler that was on the event originally (user's onclick handler).
  // This is a little tricky; we have to call the anonymous function wrapper that was put around
  // the event by IE. Also, we set a global flag so that we can find out if a mouseout event occurs
  // while processing the user's onclick handler. mouseout and onclick behavior have to change
  // if this happens.
  tbOnClickInProcess = true;
  tbMouseOutWhileInOnClick = false;
  if (element.TBUSERONCLICK) {
    eval(element.TBUSERONCLICK + "anonymous()");
  }
  tbOnClickInProcess = false;
 
  // Is the nomouseover flag set on the toolbar?
  if (element.parentElement.TBTYPE == "nomouseover") {
    tbMouseOutWhileInOnClick = true;
  }

  //Update state and appearance based on type of button
  switch (element.TBTYPE) {
    case "toggle" :
      if (element.TBSTATE == "checked") {
        element.TBSTATE = "unchecked";
        if (tbMouseOutWhileInOnClick) {
          element.className = "tbButton";
        } else {
          element.className = "tbButtonMouseOverUp";
        }
        image.className = "tbIcon";
      } else {
        element.TBSTATE = "checked";
        if (tbMouseOutWhileInOnClick) {
          element.className = "tbButtonDown";
        } else {
          element.className = "tbButtonMouseOverDown";
        }
        image.className = "tbIconDown";
      }
    break;
     
    case "radio" :
      // Turn this element on if its not already on
      if (element.TBSTATE == "checked"){
        image.className = "tbIconDown";
        break;
      }
      element.TBSTATE = "checked";
      if (tbMouseOutWhileInOnClick) {
        element.className = "tbButtonDown";
      } else {
        element.className = "tbButtonMouseOverDown";
      }
      image.className = "tbIconDown";
   
      // Turn off every other radio button in this group by going through everything in the parent container
      radioButtons = element.parentElement.children;
      for (i=0; i<radioButtons.length; i++) {
        if ((radioButtons[i].NAME == element.NAME) && (radioButtons[i] != element)) {
          radioButtons[i].TBSTATE = "unchecked";
          radioButtons[i].className = "tbButton";
          radioButtons[i].children.tags("IMG")[0].className = "tbIcon";
        }
      }
    break;
   
    default : // Regular button
      if (tbMouseOutWhileInOnClick) {
        element.className = "tbButton";
      } else {
        element.className = "tbButtonMouseOverUp";
      }
      image.className = "tbIcon";
  }
 
  event.cancelBubble=true;
  return false;
 
} // TBButtonMouseUp


// Initialize a toolbar button
function TBInitButton(element, mouseOver) {
  var image;
 
  // Make user-settable properties all lowercase and do a validity check
  if (element.TBTYPE) {
    element.TBTYPE = element.TBTYPE.toLowerCase();
    if ((element.TBTYPE != "toggle") && (element.TBTYPE != "radio")) {
      return TB_E_INVALID_TYPE;
    }
  }
  if (element.TBSTATE) {
    element.TBSTATE = element.TBSTATE.toLowerCase();
    if ((element.TBSTATE != "gray") && (element.TBSTATE != "checked") && (element.TBSTATE != "unchecked")) {
      return TB_E_INVALID_STATE;
    }
  }
 
  image = element.children.tags("IMG")[0];

  // Set up all our event handlers
  if (mouseOver) {
    element.onmouseover = TBButtonMouseOver;
    element.onmouseout = TBButtonMouseOut;
  }
  element.onmousedown = TBButtonMouseDown;
  element.onmouseup = TBButtonMouseUp;
  element.ondragstart = TBCancelEvent;
  element.onselectstart = TBCancelEvent;
  element.onselect = TBCancelEvent;
  element.TBUSERONCLICK = element.onclick; // Save away the original onclick event
  element.onclick = TBCancelEvent;
  
  // Set up initial button state
  if (element.TBSTATE == "gray") {
    element.style.filter = TB_DISABLED_OPACITY_FILTER;
    return TB_STS_OK;
  }
  if (element.TBTYPE == "toggle" || element.TBTYPE == "radio") {
    if (element.TBSTATE == "checked") {
      element.className = "tbButtonDown";
      image.className = "tbIconDown";
    } else {
      element.TBSTATE = "unchecked";
    }
  }
  element.TBINITIALIZED = true;
  return TB_STS_OK;
} // TBInitButton


// Populate a toolbar with the elements within it
function TBPopulateToolbar(tb) {
  var i, elements, s;

  // Iterate through all the top-level elements in the toolbar
  elements = tb.children;
  for (i=0; i<elements.length; i++) {
    if (elements[i].tagName == "SCRIPT" || elements[i].tagName == "!") {
      continue;
    }
    switch (elements[i].className) {
      case "tbButton" :   
        if (elements[i].TBINITIALIZED == null) {
          if ((s = TBInitButton(elements[i], tb.TBTYPE != "nomouseover")) != TB_STS_OK) {
            alert("Problem initializing:" + elements[i].id + " Status:" + s);
            return s;
          }
        }
        elements[i].style.posLeft = tb.TBTOOLBARWIDTH;
        tb.TBTOOLBARWIDTH += elements[i].offsetWidth + 1;
      break;
      
      case "tbMenu" :
        if (typeof(tbMenu) == "undefined") {
          alert("You need to include tbmenus.js if you want to use menus. See tutorial for details. Element: " + elements[i].id + " has class=tbMenu");
        } else {
          if (elements[i].TBINITIALIZED == null) {
            if ((s = TBInitToolbarMenu(elements[i], tb.TBTYPE != "nomouseover")) != TB_STS_OK) {
               alert("Problem initializing:" + elements[i].id + " Status:" + s);
             return s;
            }
          }
          elements[i].style.posLeft = tb.TBTOOLBARWIDTH;
          tb.TBTOOLBARWIDTH += elements[i].offsetWidth + TB_MENU_BUTTON_PADDING;
        }
      break;
       
      case "tbGeneral" :
        elements[i].style.posLeft = tb.TBTOOLBARWIDTH;
        tb.TBTOOLBARWIDTH += elements[i].offsetWidth + 1;
      break;
               
      case "tbSeparator" :
        elements[i].style.posLeft = tb.TBTOOLBARWIDTH + 2;
        tb.TBTOOLBARWIDTH += TB_SEPARATOR_PADDING;
      break;
     
      case "tbHandleDiv":
      break;
 
      default :
        alert("Invalid class: " + elements[i].className + " on Element: " + elements[i].id + " <" + elements[i].tagName + ">");
        return TB_E_INVALID_CLASS;
    }
  }
  return TB_STS_OK;
} // TBPopulateToolbar


// Initialize a toolbar.
function TBInitToolbar(tb) {
  var s1, tr;

  // Set up toolbar attributes
  if (tb.TBSTATE) {
    tb.TBSTATE = tb.TBSTATE.toLowerCase();
    if ((tb.TBSTATE != "dockedtop") && (tb.TBSTATE != "dockedbottom") && (tb.TBSTATE != "hidden")) {
      return TB_E_INVALID_STATE;   
    }
  } else {
    tb.TBSTATE = "dockedtop";
  }
 
  if (tb.TBSTATE == "hidden") {
    tb.style.visibility = "hidden";
  }
 
  if (tb.TBTYPE) {
    tb.TBTYPE = tb.TBTYPE.toLowerCase();
    if (tb.TBTYPE != "nomouseover") {
      return TB_E_INVALID_TYPE;   
    }
  }
 
  // Set initial size of toolbar to that of the handle
  tb.TBTOOLBARWIDTH = TB_HANDLE_WIDTH;
   
  // Populate the toolbar with its contents
  if ((s = TBPopulateToolbar(tb)) != TB_STS_OK) {
    return s;
  }
 
  // Set the toolbar width and put in the handle
  tb.style.posWidth = tb.TBTOOLBARWIDTH + TB_TOOLBAR_PADDING;
  tb.insertAdjacentHTML("AfterBegin", TB_HANDLE);
 
  return TB_STS_OK;
} // TBInitToolbar


// Lay out the docked toolbars
function TBLayoutToolbars() {
  var x,y,i;
 
  x = 0; y = 0;
 
  // If no toolbars we're outta here
  if (tbToolbars.length == 0) {
    return;
  }
 
  // Lay out any dockedTop toolbars
  for (i=0; i<tbToolbars.length; i++) {
    if (tbToolbars[i].TBSTATE == "dockedtop") {
      if ((x > 0) && (x + parseInt(tbToolbars[i].TBTOOLBARWIDTH) > document.body.offsetWidth)) {
        x=0; y += tbToolbars[i].offsetHeight;
      }
      tbToolbars[i].style.left = x;
      x += parseInt(tbToolbars[i].TBTOOLBARWIDTH) + TB_TOOLBAR_PADDING;
      tbToolbars[i].style.posTop = y;
    }
  }

  // Adjust the top of the bodyElement if there were dockedTop toolbars
  if ((x != 0) || (y !=0)) {
    tbContentElementTop = y + tbToolbars[0].offsetHeight + TB_CLIENT_AREA_GAP;
  }
   
  // Lay out any dockedBottom toolbars
  x = 0; y = document.body.clientHeight - tbToolbars[0].offsetHeight;
  for (i=tbToolbars.length - 1; i>=0; i--) {
    if (tbToolbars[i].TBSTATE == "dockedbottom") {
      if ((x > 0) && (x + parseInt(tbToolbars[i].TBTOOLBARWIDTH) > document.body.offsetWidth)) {
        x=0; y -= tbToolbars[i].offsetHeight;
      }
      tbToolbars[i].style.left = x;
      x += parseInt(tbToolbars[i].TBTOOLBARWIDTH) + TB_TOOLBAR_PADDING;
      tbToolbars[i].style.posTop = y;
    }
  }
 
  // Adjust the bottom of the bodyElement if there were dockedBottom toolbars
  if ((x != 0) || (y != (document.body.offsetHeight - tbToolbars[0].offsetHeight))) {
    tbContentElementBottom = document.body.offsetHeight - y + TB_CLIENT_AREA_GAP;
  }
 
  tbLastHeight = 0;
  tbLastWidth = 0;
 
} // TBLayoutToolbars


// Adjust the position and size of the body element and the bottom and right docked toolbars.
function TBLayoutBodyElement() {
 
  tbContentElementObject.style.posTop = tbContentElementTop;
  tbContentElementObject.style.left = 0;
  tbContentElementObject.style.posHeight = document.body.offsetHeight - tbContentElementBottom - tbContentElementTop;
  tbContentElementObject.style.width = document.body.offsetWidth;
 
  // Update y position of any dockedBottom toolbars
  if (tbLastHeight != 0) {
    for (i=tbToolbars.length - 1; i>=0; i--) {
      if (tbToolbars[i].TBSTATE == "dockedbottom" && tbToolbars[i].style.visibility != "hidden") {
        tbToolbars[i].style.posTop += document.body.offsetHeight - tbLastHeight;
      }
    }
  }
 
  tbLastHeight = document.body.offsetHeight;
  tbLastWidth = document.body.offsetWidth;
 
} // TBLayoutBodyElement


// Initialize everything when the document is ready
function document.onreadystatechange() {
  var i, s;
 
  if (TBInitialized) {
    return;
  }
 
  TBInitialized = true;
 
  document.body.scroll = "no";
 
  // Add a <span> that we will use this to measure the contents of menus
  if (typeof(tbMenu) != "undefined") {
    document.body.insertAdjacentHTML("BeforeEnd", "<span ID=TBMenuMeasureSpan></span>");
  }
 
  // Find all the toolbars and initialize them.
  for (i=0; i<document.body.all.length; i++) {
    if (document.body.all[i].className == "tbToolbar") {
      if ((s = TBInitToolbar(document.body.all[i])) != TB_STS_OK) {
        alert("Toolbar: " + document.body.all[i].id + " failed to initialize. Status: " + s);
      }
      tbToolbars[tbToolbars.length] = document.body.all[i];
    }
  }
 
  // Get rid of the menu measuring span
  if (typeof(tbMenu) != "undefined") {
    document.all["TBMenuMeasureSpan"].outerHTML = "";
  }
 
  // Lay out the page
  TBLayoutToolbars();
  TBLayoutBodyElement();
 
  // Handle all resize events
  window.onresize = TBLayoutBodyElement;
   
  // Grab global mouse events.
  document.onmousedown = TBGlobalMouseDown;
  document.onmousemove = TBGlobalMouseMove;
  document.onmouseup = TBGlobalMouseUp;
  document.ondragstart = TBGlobalStartEvents;
  document.onselectstart = TBGlobalStartEvents;
}


//
// Immediately executed code
//
{
  tbContentElementObject = document.body.all["tbContentElement"];
  
  if (typeof(tbContentElementObject) == "undefined") {
    alert("Error: There must be one element on the page with an ID of tbContentElement");
  }

  if (tbContentElementObject.className != "tbContentElement") {
    alert('Error: tbContentElement must have its class set to "tbContentElement"');
  }
 
  // Add an onmouseover handler to the tbContentElement. We need this for when the DHTML Edting
  // control is the content element. IE doesn't give the toolbars onmouseout events in that case.
  document.write('<SCRIPT LANGUAGE="JavaScript" FOR="tbContentElement" EVENT="onmouseover"> TBContentElementMouseOver(); </scrip' +'t>'); 
 
}

// Rebuild toolbar; call after inserting or deleting items on toolbar.
function TBRebuildToolbar(toolbar, rebuildMenus)
{
  var toolbarFound = false;

  // Add a <span> that we will use this to measure the contents of menus
  if (typeof(tbMenu) != "undefined") {
    document.body.insertAdjacentHTML("BeforeEnd", "<span ID=TBMenuMeasureSpan></span>");
  }

  // Look through existing toolbars and see if we get a match
  for (i=0; i<tbToolbars.length; i++) {
    if (tbToolbars[i].id == toolbar.id) {
      toolbarFound = true;
      break;
    }
  }

  // is this is a new toolbar?
  if (false == toolbarFound) {  
      // new toolbar, initialize it and add it to toolbar array
    if ((s = TBInitToolbar(toolbar)) != TB_STS_OK) {
      alert("Toolbar: " + toolbar.id + " failed to initialize. Status: " + s);
    }

    // add the new toolbar to the internal toolbar array
    tbToolbars[tbToolbars.length] = toolbar;

  }
  else {

    // Set initial size of toolbar to that of the handle
    toolbar.TBTOOLBARWIDTH = TB_HANDLE_WIDTH;

    for (i=0; i<document.body.all.length; i++) {
      if (document.body.all[i].className == "tbMenu") {
        TBRebuildMenu(document.body.all[i], rebuildMenus);
      }
    }

    // Populate the toolbar with its contents
    if ((s = TBPopulateToolbar(toolbar)) != TB_STS_OK) {
      alert("Toolbar: " + document.body.all[i].id + " failed to populate. Status: " + s);
    }

    // Set the toolbar width and put in the handle
    toolbar.style.posWidth = toolbar.TBTOOLBARWIDTH + TB_TOOLBAR_PADDING;

    if (false == toolbarFound) // new toolbar, add handle
      tb.insertAdjacentHTML("AfterBegin", TB_HANDLE);
  }
 
  // Get rid of the menu measuring span
  if (typeof(tbMenu) != "undefined") {
    document.all["TBMenuMeasureSpan"].outerHTML = "";
  }
  
  // Lay out the page
  TBLayoutToolbars();
  TBLayoutBodyElement();
}
tbmenus.js

 // Copyright 1999 Microsoft Corporation. All rights reserved.
// Author: Steve Isaac, Microsoft Corporation
//
// DHTML Toolbar Package: Pulldown Menus
//
// Include this file if use pulldown menus in your toolbars. See tutorial.htm in
// the Doc directory for detailed instructions on how to do so.
//
// Public Constants
// ----------------
tbMenu = true; // Let the rest of the toolbar package know that menus are enabled.

//
// Private Constants. These can be used along with toolbar.css to change the look of
// the menus.
// -----------------
TB_MENU_BORDER_WIDTH = 4
TB_MENU_BORDER_HEIGHT = 4
TB_MENU_POPUP_X_OFFSET = 1
TB_MENU_POPUP_Y_OFFSET = 5
TB_MENU_BUTTON_PADDING = 5

// Private Attributes
// ------------------
// TBLEVEL: Index into the scriptlet array. Which scriptlet is this element in?
// TBMESTINGLEVEL: Attribute on scriptlets only. Index into the scriptlet array for this scriptlet.
// TBMENUBODY: Menu body string. On menus and submenus only.

//
// Private Globals
// ---------------
var tbMenuShowing = null;  // The menu that is current being displayed. Null means no menu is up.
var tbMenuCancel = null; // Cancelling a menu is occurring. This is the menu being cancelled.
var tbNumScriptlets = 0; // Number of scriptlets allocated for menu bodies.
var tbScriptlets = new Array(); // Scriptlet array.
var tbNextShowingMenu; // Menu about to be shown.

//
// Functions
//

// Public function for rebuilding a menu or submenu
function TBRebuildMenu(menu, rebuildSubmenus) {
var s, nestingDepth;

  TBHideMenus();
 
  // Calculate the initial nesting depth of this menu.
  if (menu.parentElement.className == "tbMenu" || menu.parentElement.className == "tbSubmenu") {
    nestingDepth = menu.parentElement.TBLEVEL + 1;
  } else {
    nestingDepth = 0;
  }

  // Rebuild the menu.
  if ((s = TBBuildMenu(menu, nestingDepth, rebuildSubmenus)) != TB_STS_OK) {
    alert("TBRebuildMenu: Error rebuilding menu: " + menu.id  + ". Status: " + s);         
    return s;
  }

}


// Make an element's borders appear raised
function TBShowRaised(element) {
  element.style.borderTopColor ="buttonhighlight";
  element.style.borderLeftColor ="buttonhighlight";
  element.style.borderBottomColor ="buttonshadow";
  element.style.borderRightColor ="buttonshadow";
}


// Make an element's borders appear depressed
function TBShowDepressed(element) {
  element.style.borderTopColor ="buttonshadow";
  element.style.borderLeftColor ="buttonshadow";
  element.style.borderBottomColor ="buttonhighlight";
  element.style.borderRightColor ="buttonhighlight"; 
}


// Make an element's borders appear normal
function TBShowNormal(element) {
  element.style.borderTopColor ="buttonface";
  element.style.borderLeftColor ="buttonface";
  element.style.borderBottomColor ="buttonface";
  element.style.borderRightColor ="buttonface"; 
}


// Menu onmouseover handler
function TBMenuMouseOver() {
  var element;

  element = event.srcElement;
  while (element.className != "tbMenu") {
    element = element.parentElement;
  }
  
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }
 
  if (tbMenuShowing == element) {
    event.cancelBubble=true;
    return;
  }
 
   
  if (tbMenuShowing) {
    TBShowNormal(tbMenuShowing);
    TBHideMenuBodies();
    tbNextShowingMenu = element;
    // Hack! This avoids IE thinking that portions of the menu body don't need to be painted.
    window.setTimeout("TBPopUpMenu(tbNextShowingMenu, 0)", 0);
  } else {
    TBShowRaised(element);
    tbRaisedElement = element;   
  }
 
  event.cancelBubble=true;
 
} // TBMenuMouseOver


// Menu onmouseout handler
function TBMenuMouseOut() {
  var element;

  element = event.srcElement;
  while (element.className != "tbMenu") {
    element = element.parentElement;
  }
    
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return;
  }

  // Make sure we got this event because the user really moused out, not just because we went into
  // a child element.
  if (element.contains(event.toElement)) {
    event.cancelBubble=true;
    return;
  }
   
  if (tbMenuShowing == element) {
    event.cancelBubble=true;
    return;
  }
 
  tbRaisedElement = null;
     
  TBShowNormal(element);
  event.cancelBubble=true;

} // TBMenuMouseOut


// Menu onmousedown handler
function TBMenuMouseDown() {
  var element;
 
  element = event.srcElement;
  while (element.className != "tbMenu") {
    element = element.parentElement;
  }
 
  if (element.TBSTATE == "gray") {
    event.cancelBubble=true;
    return false;
  }
 
  if (tbMenuShowing == element) {
    tbMenuCancel = element;
    event.cancelBubble=true;
    return false; 
  }
 
  TBPopUpMenu(element, 0);
 
  event.cancelBubble=true;
  return false; 

} // TBMenuMouseDown


// Menu onmouseup handler
function TBMenuMouseUp() {
  var element;
 
  element = event.srcElement;
  while (element.className != "tbMenu") {
    element = element.parentElement;
  }
 
  if (tbMenuCancel == element) {
    TBHideMenuBodies();
    TBShowRaised(element);
    tbMenuShowing = null;
  }
 
  tbMenuCancel = null;
 
  event.cancelBubble=true;
  return false;

} // TBMenuMouseUp


// Hide all scriptlets
function TBHideMenuBodies() {
  var i;
 
  for (i=0; i<tbNumScriptlets; i++) {
    tbScriptlets[i].style.posLeft = -2000;
    tbScriptlets[i].style.posTop = -2000;
    tbScriptlets[i].HideMenu();
  } 
}


// Bring up a menu or subMenu
function TBPopUpMenu(menu, nestingDepth) {
  var scriptlet = tbScriptlets[nestingDepth];
  var width = 0, height = 0;
  var tb, s;
 
  // Call the user's tbOnMenuShow handler, if there is one.
  tbEventSrcElement = menu;
  if (!menu.tbOnMenuShow) {
    tb = menu;
    while (tb.className != "tbToolbar") {
      tb = tb.parentElement;
    }
    s = tb.tbOnMenuShow;
  } else {
    s = menu.tbOnMenuShow;
  }
  if (s) {
    eval("function anonymous() { "+ s + " } anonymous()");
  }
 
  // If this is a menu button on the toolbar, make it look pressed
  if (menu.className == "tbMenu") {
    TBShowDepressed(menu);
  }
 
  // Position the scriptlet
  if (menu.className == "tbMenu") {
    scriptlet.style.posLeft = menu.offsetLeft + menu.parentElement.offsetLeft + TB_MENU_POPUP_X_OFFSET;
    scriptlet.style.posTop = menu.offsetTop + menu.parentElement.offsetTop + menu.parentElement.offsetHeight - TB_MENU_POPUP_Y_OFFSET;
  } else {
    scriptlet.style.posLeft = tbScriptlets[nestingDepth - 1].offsetLeft + tbScriptlets[nestingDepth - 1].subMenuX;
    scriptlet.style.posTop = tbScriptlets[nestingDepth - 1].offsetTop + tbScriptlets[nestingDepth - 1].subMenuY;
  }
   
  // Tell the scriptlet to display the menu
  scriptlet.ShowMenu(menu.id, menu.TBMENUBODY);
 
  // If we haven't cached the size, set the scriplet size and cache it for next time
  width = scriptlet.menuWidth + TB_MENU_BORDER_WIDTH;
  scriptlet.style.posWidth = width;

  height = scriptlet.menuHeight + TB_MENU_BORDER_HEIGHT;
  scriptlet.style.posHeight = height.toString();
 
   // Adjust menu position if we are outside of the browser window
  if (menu.className == "tbMenu") {
    if ((scriptlet.offsetTop + scriptlet.offsetHeight) > document.body.clientHeight) {
      scriptlet.style.posTop = (scriptlet.offsetTop - scriptlet.offsetHeight + menu.parentElement.offsetHeight - TB_MENU_POPUP_Y_OFFSET*2);
    }
  } else {
    if ((scriptlet.offsetTop + scriptlet.offsetHeight) > document.body.clientHeight) {
      scriptlet.style.posTop = (scriptlet.offsetTop - scriptlet.offsetTop + scriptlet.offsetHeight - document.body.clientHeight);
    }
    if ((scriptlet.offsetLeft + scriptlet.offsetWidth) > document.body.clientWidth) {
      scriptlet.style.posLeft = (scriptlet.offsetLeft - scriptlet.offsetWidth + menu.parentElement.offsetWidth - TB_MENU_BORDER_HEIGHT*2);
      if (scriptlet.offsetLeft < 0) {
        scriptlet.style.posLeft = 0;
      }
    }
  }
 
  // Force the scriptlet to draw on top of any windowed controls
  scriptlet.style.visibility = "visible";
 
  // Remember this menu
  if (menu.className == "tbMenu") {
    tbMenuShowing = menu;
  }
 
} // TBPopUpMenu


//Global onmousedown handler. Bring down any menus that are up.
function TBHideMenus() {
  if (tbMenuShowing) {
    TBHideMenuBodies();
    TBShowNormal(tbMenuShowing);
    tbMenuShowing = null;
  }
 
} // TBHideMenus


// Check for a menu icon. Extract it into an appropriate string if found. Return
// placeholder HTML if not found.
function TBCheckMenuIcon(element, disabled) {
  var i, s;

  // See if one of the element's immediate children is an icon (class == tbIcon).
  for (i=0; i<element.children.length; i++) {
    if (element.children[i].className == "tbIcon") {
      // Found it. Put the icon's outerHTML in our return string.
      if (element.TBSTATE == "checked") {
        element.children[i].className = "tbMenuIconChecked";
      } else {
        element.children[i].className = "tbMenuIcon";
      }
      s = element.children[i].outerHTML;
      element.children[i].className = "tbIcon";
      return '<td ' + disabled + '>' + s + '</td>';
    }
  }
 
  // Is this element a non-icon toggle or radio button?
  if (element.TBTYPE == "toggle" || element.TBTYPE == "radio") {
    if (element.TBSTATE == "checked") {
      return  '<td ' + disabled + '><span class="tbMenuItemChecked">a</span></td>';
    } else {
      return  '<td ' + disabled + '><span class="tbMenuBlankSpace">&nbsp;</span></td>';
    }
  }
 
  // Didn't find an icon or toggle/radio button, so return some blank space
  return '<td ' + disabled + '><span class="tbMenuBlankSpace">&nbsp;</span></td>';
}


// Walk the menu and submenu structures. Save onclick handlers. Create menu and
// subMenu bodies and put them into the appropriate scriptlets.
function TBBuildMenu(menu, nestingDepth, buildSubmenus) {
  var i, s, s1, items, disabled, element, sts;
 
  // Note which scriptlet this menu is going into
  menu.TBLEVEL = nestingDepth;
 
  // We need to wrap each menu body in a couple of divs and a table. Here's the outer string for this.
  s = '<div id=' + menu.id + ' class="tbMenuBodyOuterDiv"><div class="tbMenuBodyInnerDiv"><table id="TBMENUBODYTABLE" cellpadding=0 cellspacing=0 class="tbMenuBodyTable">';
 
  // Go through all the children in the menu, looking for menu body elements.
  items = menu.children.tags("DIV");
  for (i=0; i<items.length; i++) {
    element = items[i];
   
    if (element.TBSTATE == "gray"){
      disabled = 'style = "filter:' + TB_DISABLED_OPACITY_FILTER + '"';
    } else {
      disabled = "";
    }
   
    switch (element.className) {
      case "tbMenuItem" :
        if (element.id == "") {
          return TB_E_NO_ID;
        }
       
        // Save away the user's onclick event handler
        if (element.TBINITIALIZED == null) {
          element.TBUSERONCLICK = element.onclick;
          element.onclick = TBCancelEvent;
          element.TBINITIALIZED = true;
        }

        // Note which scriptlet this menu item is going into
        element.TBLEVEL = nestingDepth;
       
        // Wrap a table row around the menu item and put in its icon if it exists.
        s1 = TBCheckMenuIcon(element, disabled);
        s += '<tr TBELEMENTID="' + element.id + '" >' + s1 + '<td noWrap ' + disabled +'>' + element.outerHTML + '</td><td ' + disabled + '><span class="tbMenuBlankSpace">&nbsp</span></td></tr>';
      break;
       
      case "tbSubmenu" :
        if (!buildSubmenus) {
          return;
        }
       
        if (element.id == "") {
          return TB_E_NO_ID;
        }
               
        // Call ourselves recursively to populate the subMenu.
        if ((sts = TBBuildMenu(element, nestingDepth + 1, true)) != TB_STS_OK) {
          return sts;
        }
       
        // Wrap a table row around the menu item, put the icon in if it exists and
        // put the subMenu arrow in.
        s1 = TBCheckMenuIcon(element, disabled);
        s += '<tr TBELEMENTID="' + element.id + '" >' + s1 + '<td noWrap ' + disabled +'>' + element.outerHTML + '</td><td ' + disabled +'><span class="tbSubmenuGlyph">4</span></td></tr>';
      break;
       
      case "tbSeparator" :
        // Change the class to tbMenuSeparator. That way the separators aren't
        // visible on the main page.
        element.className = "tbMenuSeparator";
       
        // Save a separator as a couple of divs that span the entire width of the menu.
        s += '<tr class="tbMenuSeparator"><td align=center colspan=3><div class="tbMenuSeparatorTop"></div><div class="tbMenuSeparatorBottom"></div></td></tr>';
      break;
       
    }
  } 

  // We need to turn any relative URLs in the menu body into absolute URLs, because
  // relative URLs will not work in the scriptlet (IE makes them absolute relative
  // to the scriptlet when we paste them into the scriptlet). Do this by inserting
  // the menu body into the document and extracting the outerHTML. This is a rather
  // expensive way of doing this, but its the only way to guarantee that all
  // user-supplied URLs also gets updated...
  s += "</table></div></div>";

  document.body.insertAdjacentHTML("AfterBegin", s);
  s = document.body.all[0].outerHTML;
  document.body.all[0].outerHTML = "";
 
  // Save the menu body string on the menu object.
  menu.TBMENUBODY = s;
  return TB_STS_OK;
   
} // TBBuildMenu


// Initialize a toolbar menu element
function TBInitToolbarMenu(toolbarMenu, mouseOver) {
  var i, element, s, menuMeasureSpan = document.all["TBMenuMeasureSpan"];
 
  if (toolbarMenu.ID == "") {
    return TB_E_NO_ID;
  }

  toolbarMenu.align = "center";
 
  // Set up all our event handlers
  if (mouseOver) {
    toolbarMenu.onmouseover = TBMenuMouseOver;
    toolbarMenu.onmouseout = TBMenuMouseOut;
  }
  toolbarMenu.onmousedown = TBMenuMouseDown;
  toolbarMenu.onmouseup = TBMenuMouseUp;
  toolbarMenu.ondragstart = TBCancelEvent;
  toolbarMenu.onselectstart = TBCancelEvent;
  toolbarMenu.onselect = TBCancelEvent;
 
  // Calculate width of the menu button. Put whatever is in the menu's innerHTML into
  // a span, get rid of the menu body elements,  then use the offsetWidth of the span to
  // give us an accurate pixel count
  menuMeasureSpan.innerHTML = toolbarMenu.innerHTML;
  i = 0;
  while (i<menuMeasureSpan.children.length) {
    element = menuMeasureSpan.children[i];
    switch (element.className) {
      case "tbMenuItem" :
      case "tbSubmenu" :
      case "tbMenuSeparator" :
        element.outerHTML = "";
      break;
     
      default :
        i++;  
    }
  } 
  toolbarMenu.style.posWidth = menuMeasureSpan.offsetWidth;
 
  //Build the menus and subMenus.
  if ((s = TBBuildMenu(toolbarMenu, 0, true)) != TB_STS_OK) {
    alert("Problem with menu item or subMenu in menu: " + toolbarMenu.id + ". Status: " + s);         
    return s;
  }
  toolbarMenu.TBINITIALIZED = true;
   
  return TB_STS_OK;
 
} // TBInitToolbarMenu


// A scriptlet has fired ReadyStateChanged, and is therefore ready to be used.
function TBScriptletReadyState(scriptlet) {
  var title;
 
  // Put the document's title into the scriptlet. This keeps the IE title bar from changing when
  // mouse is in the scriptlet
  title = document.title;
  if (title == "") {
    title = document.location;
  }
  scriptlet.titleProp = title;
 
  // Put the opacity filter for disabled elements into the scriptlet.
  scriptlet.opacityFilter = TB_DISABLED_OPACITY_FILTER;
}


// A scriptlet has fired a custom event.
function TBScriptletEvent(scriptlet, eventName, eventObject) {

  var i;
 
  switch (eventName) {
    case "TBMenuClick" :
      var element = document.body.all[eventObject];
     
      TBHideMenus();
     
      // Initialize tbEventSrcElement so that the user's onClick handler can find out where the
      // event is coming from
      tbEventSrcElement = element;
     
      // Execute the  onclick handler that was on the event originally (user's onclick handler).
      // This is a little tricky; we have to call the anonymous function wrapper that was put around
      // the event by IE.
      if (element.TBUSERONCLICK) {
        eval(element.TBUSERONCLICK + "anonymous()");
      }
    break;
     
     
    case "TBDisplaySubmenu" :
      TBPopUpMenu(document.body.all[eventObject], parseInt(scriptlet.TBNESTINGLEVEL) + 1);
    break;
     
    case "TBHideSubmenu" :
      // hide all submenus
      for (i=tbNumScriptlets-1; i>=0; i--) {
        if (i > scriptlet.TBNESTINGLEVEL) {
          tbScriptlets[i].style.posLeft = -2000;
          tbScriptlets[i].style.posTop = -2000;
          tbScriptlets[i].HideMenu();
        }
      }
    break;
  }
 
} // TBScriptletEvent


// Recursively check the nesting depth of subMenus
function TBCheckNestingDepth(menu, nestingLevel) {
  var i;
 
    for (i=0; i<menu.children.length; i++) {
      if (menu.children[i].className == "tbSubmenu") {
        nestingLevel = TBCheckNestingDepth(menu.children[i], nestingLevel + 1);
      }
    }
    return nestingLevel;
}


//
// Immediately executed code
//
{
  var i, element;
 
  // Compute the maximum subMenu nesting depth of all the menus. This is the number
  // of scriptlets we need to allocate.
  // Stick an onmousedown handler in for all objects and applets on the page.
  // This is needed in order to bring down a menu if the user hapens to click in an
  // object.
  // See if there is an element that has a tbBodyObject class.
  for (i=0; i<document.body.all.length; i++) {
    element = document.body.all[i];
    if (element.className == "tbMenu") {
      if ((thisMenuNestingDepth = TBCheckNestingDepth(element, 1)) > tbNumScriptlets) {
        tbNumScriptlets = thisMenuNestingDepth;
      }
    }
    if ((element.tagName == "OBJECT" || element.tagName == "APPLET")) {
      document.write('<SCRIPT LANGUAGE="JavaScript" FOR="' + element.id + '" EVENT="onmousedown"> TBGlobalMouseDown(); </scrip' +'t>');   
    }
  }
 
  // Insert scriptlets into the body
  if (typeof(tbScriptletDefinitionFile) == "undefined") {
    alert('tbScripletDefinitionFile not defined!. You must include the following immediately before <script SRC=toolbars.js>: <script LANGUAGE="Javascript"> tbScriptletDefinitionFile = "location of menubody.htm file"; </scrip' + 't>');

  }
 
  for (i=0; i<tbNumScriptlets; i++) {
    document.write('<OBJECT data=' + tbScriptletDefinitionFile + ' class=tbScriptlet id=TBSCRIPTLET style="POSITION: absolute; TOP: -2000; LEFT: -2000" type=text/x-scriptlet></OBJECT>');
  }
 
  // Set up the tbScriptlets array
  if (tbNumScriptlets > 0) {
    if (tbNumScriptlets == 1) {
      tbScriptlets[0] = document.all["TBSCRIPTLET"];
    } else {
      tbScriptlets = document.all["TBSCRIPTLET"];
    }
  }
 
  // Mark each scriptlet with its nesting level.
  for (i=0; i<tbNumScriptlets; i++) {
   tbScriptlets[i].TBNESTINGLEVEL = i;
  }
 
  // Insert the scriptlet's event handlers into the body (this is the only way to get
  // events from dynamically created scriptlets.
  document.write('<SCRIPT LANGUAGE="JavaScript" FOR=TBSCRIPTLET EVENT="onreadystatechange"> TBScriptletReadyState(this); </scrip' +'t>');
  document.write('<SCRIPT LANGUAGE="JavaScript" FOR=TBSCRIPTLET EVENT="onscriptletevent(eventName, eventObject)"> TBScriptletEvent(this, eventName, eventObject); </scrip' +'t>');
}

还有一个toolbar.css用来定位控件的位置

/* Copyright 1999 Microsoft Corporation. All rights reserved. */
/* Author: Steve Isaac, Microsoft Corporation                 */
/*                                                            */
/*
   This file (along with the companion toolbar.js file) implements full featured
   toolbars completely in DHTML.
 
   See the accompanying readme.htm for full documentation on how to use DHTML Toolbars.
 */
/* ---------------------------------------------------------------------------------------------- */
/* Public Toolbar classes                                                                                */
/* ---------------------------------------------------------------------------------------------- */
.tbContentElement
{
    POSITION: ABSOLUTE;
    HEIGHT: 1px;
    LEFT: 0px;
    TOP: 0px;
    WIDTH: 1px;
}
.tbToolbar
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonshadow solid 1px;
    BORDER-LEFT: buttonhighlight solid 1px;
    BORDER-RIGHT: buttonshadow solid 1px;
    BORDER-TOP:  buttonhighlight solid 1px;
    HEIGHT: 27px;
    TOP:0;
    LEFT:0;
}
.tbButton
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface;
 BORDER-BOTTOM: buttonface solid 1px;
    BORDER-LEFT: buttonface solid 1px;
    BORDER-RIGHT: buttonface solid 1px;
    BORDER-TOP:  buttonface solid 1px;
    TOP: 1px;
    HEIGHT: 23px;
    WIDTH: 23px;
}
.tbIcon
{
    POSITION: ABSOLUTE;
 LEFT: -1;
 TOP: -1
}
.tbSeparator
{
 POSITION: ABSOLUTE;
 BORDER-LEFT: buttonshadow solid 1px;
 BORDER-RIGHT: buttonhighlight solid 1px;
 FONT-SIZE: 0px;
    TOP: 1px;
 HEIGHT: 22px;
 WIDTH: 1px;
}
.tbMenu
{
    POSITION: ABSOLUTE;
    CURSOR: default;
    BACKGROUND-COLOR: buttonface;
 BORDER-BOTTOM: buttonface solid 1px;
    BORDER-LEFT: buttonface solid 1px;
    BORDER-RIGHT: buttonface solid 1px;
    BORDER-TOP:  buttonface solid 1px;
    PADDING-TOP: 4;
    PADDING-BOTTOM: 2;
    TOP: 1px;
 WIDTH: 1px;
    FONT-FAMILY: MS Sans Serif;
    FONT-SIZE: 8px;
}
.tbMenuItem
{
    CURSOR: default;
    FONT-FAMILY: MS Sans Serif;
    FONT-SIZE: 8px;
    DISPLAY: none;   
}
.tbSubmenu
{
    CURSOR: default;
    FONT-FAMILY: MS Sans Serif;
    FONT-SIZE: 8px;   
    DISPLAY: none;   
}
.tbGeneral
{
    POSITION: ABSOLUTE;
    HEIGHT: 22px;
    TOP:2;
}
/* ---------------------------------------------------------------------------------------------- */
/* Private styles                                                                                 */
/* ---------------------------------------------------------------------------------------------- */
.tbHandleDiv
{
 POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface;
 BORDER-LEFT: buttonhighlight solid 1px;
 BORDER-RIGHT: buttonshadow solid 1px;
 BORDER-TOP: buttonhighlight solid 1px;
 FONT-SIZE: 1px;
 TOP: 1px;
 HEIGHT: 22px;
 WIDTH: 3px;
}
.tbButtonMouseOverUp
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonshadow solid 1px;
    BORDER-LEFT: buttonhighlight solid 1px;
    BORDER-RIGHT: buttonshadow solid 1px;
    BORDER-TOP:  buttonhighlight solid 1px;
    TOP: 1px;
    HEIGHT: 23px;
    WIDTH: 24px;
}
.tbButtonMouseOverDown
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonhighlight solid 1px;
    BORDER-LEFT: buttonshadow solid 1px;
    BORDER-RIGHT: buttonhighlight solid 1px;
    BORDER-TOP:  buttonshadow solid 1px;
    TOP: 1px;
    HEIGHT: 23px;
    WIDTH: 24px;
}
.tbButtonDown
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: gainsboro;
    BORDER-BOTTOM: buttonhighlight solid 1px;
    BORDER-LEFT: buttonshadow solid 1px;
    BORDER-RIGHT: buttonhighlight solid 1px;
    BORDER-TOP:  buttonshadow solid 1px;
    TOP: 1px;
    HEIGHT: 23px;
    WIDTH: 24px;
}
.tbIconDown
{
    POSITION: ABSOLUTE;
 LEFT: 0px;
 TOP: 0px;
}
.tbIconDownPressed
{
    POSITION: ABSOLUTE;
 LEFT: 1px;
 TOP: 1px;
}
.tbMenuBodyOuterDiv
{
    CURSOR: default;
    BACKGROUND-COLOR: menu;
 BORDER-BOTTOM: threeddarkshadow solid 1px;
    BORDER-LEFT: threedface solid 1px;
    BORDER-RIGHT: threeddarkshadow solid 1px;
    BORDER-TOP:  threedface solid 1px;
    POSITION: absolute;
}
.tbMenuBodyInnerDiv
{
    CURSOR: default;
 BORDER-BOTTOM: threedshadow solid 1px;
    BORDER-LEFT: threedhighlight solid 1px;
    BORDER-RIGHT: threedshadow solid 1px;
    BORDER-TOP:  threedhighlight solid 1px;
}
.tbMenuBodyTable
{
    CURSOR: default;
 BORDER-BOTTOM: menu solid 1px;
    BORDER-LEFT: menu solid 1px;
    BORDER-RIGHT: menu solid 1px;
    BORDER-TOP:  menu solid 1px;
}
.tbMenuSeparator
{
    DISPLAY: none;   
}
.tbMenuSeparatorTop
{
 POSITION: RELATIVE;
 BORDER-BOTTOM: buttonshadow solid 1px;
 HEIGHT: 5px;
 WIDTH: 94%;
 FONT-SIZE: 0px;
}
.tbMenuSeparatorBottom
{
 POSITION: RELATIVE;
 BORDER-TOP: buttonhighlight solid 1px;
 HEIGHT: 5px;
 WIDTH: 94%;
 FONT-SIZE: 0px;
}
.tbMenuBlankSpace
{
 WIDTH: 20;
}
.tbSubmenuGlyph
{
 FONT-FAMILY: webdings;
 WIDTH: 20;
 TEXT-ALIGN: right;
}
.tbMenuItemChecked
{
 FONT-FAMILY: webdings;
 WIDTH: 20;
 TEXT-ALIGN: right;
}
.tbMenuIcon
{
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonface solid 1px;
    BORDER-LEFT: buttonface solid 1px;
    BORDER-RIGHT: buttonface solid 1px;
    BORDER-TOP:  buttonface solid 1px;
}
.tbMenuIconChecked
{
    BACKGROUND-COLOR: threedlightshadow;
    BORDER-BOTTOM: buttonhighlight solid 1px;
    BORDER-LEFT: buttonshadow solid 1px;
    BORDER-RIGHT: buttonhighlight solid 1px;
    BORDER-TOP:  buttonshadow solid 1px;
}
.tbMenuIconMouseOver
{
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonshadow solid 1px;
    BORDER-LEFT: buttonhighlight solid 1px;
    BORDER-RIGHT: buttonshadow solid 1px;
    BORDER-TOP:  buttonhighlight solid 1px;
}
.tbMenuIconCheckedMouseOver
{
    BACKGROUND-COLOR: buttonface;
    BORDER-BOTTOM: buttonhighlight solid 1px;
    BORDER-LEFT: buttonshadow solid 1px;
    BORDER-RIGHT: buttonhighlight solid 1px;
    BORDER-TOP:  buttonshadow solid 1px;
}
.tbScriptlet
{
    POSITION: ABSOLUTE;
    CURSOR: default;
    VISIBILITY: hidden;
}
BODY
{
 MARGIN: 0;
 BORDER: 0;
 BACKGROUND-COLOR: buttonface;
}

 


 

0 0

相关博文

我的热门文章

img
取 消
img