在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"> </span></td>';
}
}
// Didn't find an icon or toggle/radio button, so return some blank space
return '<td ' + disabled + '><span class="tbMenuBlankSpace"> </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"> </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;
}
