在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.