＋设为首页 ＋添加到收藏夹
在web开发中做界面一般都是有美工做的,但是如果要做成类似windows一样的界面,就比较麻烦,前些日子我在网上找到一个免费的js,它类似与一个做控件的工具,有button,menu,toolbar等常用的控件,可以帮助web开发者画界面.它的使用很简单,如加一个按钮,<div class=tbbutton img class=tbicon src="bgcolor.gif" width=23> </div>,只要指定class就可以了,最后引用这个js就可以了
【程序编程相关:DES加密算法的一种简单实现】
下面的界面是用js做出来: 【推荐阅读:ETW】
// 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.//////=================================================================================================// 【扩展信息:Avalon基本概念(3)-Avalon】
代码如下:toolbar.js
// 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 returntb_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 = 10tb_handle = ´<div class=tbhandlediv style="left: 3"> </div>´ + ´<div class=tbhandlediv style="left: 6"> </div>´
tb_toolbar_padding = 4tb_separator_padding = 5tb_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; }
... 下一页