不知道现在有没有用javascript实现工具条?

findcsdn 2003-10-20 03:24:11
想在网页上模拟一般的应用有菜单和工具条的样子，大家提提意见吧，谢谢各位参与！
...全文
59 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
NJMy 2003-10-21
  • 打赏
  • 举报
 回复
UP 收藏，以后可能用到，谢啦！！
findcsdn 2003-10-21
  • 打赏
  • 举报
 回复
楼上的菜单很不错啊！
longshenwang 2003-10-20
  • 打赏
  • 举报
 回复

function checkMenu() {

if (document.all.menuBar==null) return

if ((!document.all.menuBar.contains(event.srcElement)) && (menuActive!=null)) {

clearHighlight(menuActive)

closeMenu(menuActive)

active = false

menuActive=null

choiceActive = null

}

}



function doCheckOut() {

var el = event.toElement

if ((!active) && (menuActive!=null) && (!menuActive.contains(el))) {

clearHighlight(menuActive)

menuActive=null

}

}





function processKey() {

if (active) {

switch (event.keyCode) {

case 13: lastHighlight.click(); break;

case 39: // right

if ((lastHighlight==null) || (lastHighlight._childItem==null)) {

var idx = menuActive.cellIndex

// if (idx==menuActive.offsetParent.cells.length-2)

if (idx==getElement(menuActive,"TR").cells.length-2)

idx = 0

else

idx++

newItem = getElement(menuActive,"TR").cells[idx]

} else

{

newItem = lastHighlight._childItem.rows[0].cells[0]

}

doHighlight(newItem)

break;

case 37: //left

if ((lastHighlight==null) || (getElement(getRootTable(lastHighlight),"TR").id=="menuBar")) {

var idx = menuActive.cellIndex

if (idx==0)

idx = getElement(menuActive,"TR").cells.length-2

else

idx--

newItem = getElement(menuActive,"TR").cells[idx]

} else

{

newItem = getElement(lastHighlight,"TR")

while (newItem.tagName!="TD")

newItem = newItem.parentElement

}

doHighlight(newItem)

break;

case 40: // down

if (lastHighlight==null) {

itemCell = menuActive._childItem

curCell=0

curRow = 0

}

else {

itemCell = getRootTable(lastHighlight)

if (lastHighlight.cellIndex==getElement(lastHighlight,"TR").cells.length-1) {

curCell = 0

curRow = getElement(lastHighlight,"TR").rowIndex+1

if (getElement(lastHighlight,"TR").rowIndex==itemCell.rows.length-1)

curRow = 0

} else {

curCell = lastHighlight.cellIndex+1

curRow = getElement(lastHighlight,"TR").rowIndex

}

}

doHighlight(itemCell.rows[curRow].cells[curCell])

break;

case 38: // up

if (lastHighlight==null) {

itemCell = menuActive._childItem

curRow = itemCell.rows.length-1

curCell= itemCell.rows[curRow].cells.length-1



}

else {

itemCell = getRootTable(lastHighlight)

if (lastHighlight.cellIndex==0) {

curRow = getElement(lastHighlight,"TR").rowIndex-1

if (curRow==-1)

curRow = itemCell.rows.length-1

curCell= itemCell.rows[curRow].cells.length-1



} else {

curCell = lastHighlight.cellIndex - 1

curRow = getElement(lastHighlight,"TR").rowIndex

}

}

doHighlight(itemCell.rows[curRow].cells[curCell])

break;

if (lastHighlight==null) {

curCell = menuActive._childItem

curRow = curCell.rows.length-1

}

else {

curCell = getRootTable(lastHighlight)

if (getElement(lastHighlight,"TR").rowIndex==0)

curRow = curCell.rows.length-1

else

curRow = getElement(lastHighlight,"TR").rowIndex-1

}

doHighlight(curCell.rows[curRow].cells[0])

break;

}

}

}





function make_menu() {

document.write("<table width='100%' cellpadding='0' cellspacing='0' border='0' style='background=rgb(212,208,200); BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid;'>");

document.write("<tr><TD><SPAN class=handbtn></SPAN></TD><td>");

document.write("<TABLE ID=menuBar ONSELECTSTART='return false' ONCLICK='processClick()' ONMOUSEOVER='doHighlight(event.toElement)' ONMOUSEOUT='doCheckOut()' ONKEYDOWN='processKey()'><TR>");



j=1;

while(eval("window.OutBarFolder"+j))

j++;

i=1;

while(i<j)

{

Folder=eval("OutBarFolder"+i)

document.write("<TD NOWRAP CLASS=root>"+Folder[0]+"<TABLE CELLSPACING=0 CELLPADDING=0>");

MakeItems(Folder);

document.write("</TABLE>");

i++;

}

document.write("</TD></TR></TABLE>");

document.write("</td><td width=100% ONMOUSEOVER='processClick()'></td></tr></table>");



}



function MakeItems(Folder)

{

var items=0;

while(Folder[items+1])

items+=5;

items/=5;

for(var i=1;i<items*5;i+=5)

{

/*

if(Folder[i+1]=="BREAK") {

document.write("<TD NOWRAP ID=break><HR></TD>");

}

else {

document.write("<TR><TD NOWRAP>"+Folder[i+1]+"</TD></TR>");

}

*/

document.write("<TR><TD NOWRAP"+((Folder[i+0]=="none")?"":" ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=\"go(1,'"+Folder[i+3]+"')\"")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>");

//alert("<TR><TD NOWRAP "+((Folder[i+0]=="none")?"":"ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=go(1,'"+Folder[i+3]+"')")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>");

}

}



function go(i,iurl) {

switch (i)

{

case 1 : parent.location=iurl;break; //返回首页

case 2 : top.main.location='login.htm';break; //登录

case 3 : top.main.location='shenqing.htm';break; //注册

case 4 : top.main.location='addnew.asp';break; //增加新贴

case 5 : top.main.location='index1.asp';break; //第一页

case 6 : //上一页

var obj=top.main

var str=obj.location.href;

if(str.indexOf("index1")>0)

obj.location="index1.asp@page="+obj.document.all("ppage").value;

else

obj.location="index1.asp";

break;

case 7 : //下一页

var obj=top.main

var str=obj.location.href;

if(str.indexOf("index1")>0)

obj.location="index1.asp@page="+obj.document.all("npage").value;

else

obj.location="index1.asp";

break;

case 8 : //最后一页

var obj=top.main

var str=obj.location.href;

if(str.indexOf("index1")>0)

obj.location="index1.asp@page="+obj.document.all("epage").value;

else

obj.location="index1.asp";

break;

case 9: top.main.location='editinfo.asp';break;

case 10: top.main.location='quit.asp';break;

case 11: top.main.location='userinfo.asp';break;

case 12:

var newwin=top.open("../../../waha.3322.net/default.htm");

newwin.focus();

break;

}

}



make_menu();

</script>

<br>

</BODY>
</HTML>
longshenwang 2003-10-20
  • 打赏
  • 举报
 回复

function getRootTable(el) {

el = el.offsetParent

if (el.tagName=="TR")

el = el.offsetParent

return el

}



function getElement(el,tagName) {

while ((el!=null) && (el.tagName!=tagName) )

el = el.parentElement

return el

}



function processClick() {

var el = getReal(event.srcElement)

if ((getRootTable(el).id=="menuBar") && (active)) {

cleanupMenu(menuActive)

clearHighlight(menuActive)

active=false

lastHighlight=null

doHighlight(el)

}

else {

if ((el.className=="root") || (!menuHandler(el)))

doMenuDown(el)

else {

if (el._childItem==null)

el._childItem = getChildren(el)

if (el._childItem!=null) return;

if ((el.id!="break") && (el.className!="disabled") && (el.className!="disabledhighlight") && (el.className!="clear")) {

if (menuHandler(el)) {

cleanupMenu(menuActive)

clearHighlight(menuActive)

active=false

lastHighlight=null

}

}

}

}

}



function getChildren(el) {

var tList = el.children.tags("TABLE")

var i = 0

while ((i<tList.length) && (tList[i].tagName!="TABLE"))

i++

if (i==tList.length)

return null

else

return tList[i]

}



function doMenuDown(el) {

if (el._childItem==null)

el._childItem = getChildren(el)

if ((el._childItem!=null) && (el.className!="disabled") && (el.className!="disabledhighlight")) {

// Performance Optimization - Cache child element

ch = el._childItem

if (ch.style.display=="block") {

removeHighlight(ch.active)

return

}

ch.style.display = "block"

if (el.className=="root") {

ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2

ch.style.pixelLeft = el.offsetLeft + 1

if (ch.style.pixelWidth==0)

ch.style.pixelWidth = ch.rows[0].offsetWidth+50

sinkMenu(el)

active = true

menuActive = el

} else {

childActive = el

ch.style.pixelTop = getOffsetPos("Top",el,"TABLE") -3 // el.offsetTop + el.offsetParent.offsetTop - 3

ch.style.pixelLeft = el.offsetLeft + el.offsetWidth

if (ch.style.pixelWidth==0)

ch.style.pixelWidth = ch.offsetWidth+50

}

}

}



function doHighlight(el) {

el = getReal(el)

if ("root"==el.className) {

if ((menuActive!=null) && (menuActive!=el)) {

clearHighlight(menuActive)

}

if (!active) {

raiseMenu(el)

}

else

sinkMenu(el)

if ((active) && (menuActive!=el)) {

cleanupMenu(menuActive)

doMenuDown(el)

}

menuActive = el

lastHighlight=null

}

else {

if (childActive!=null)

if (!childActive.contains(el))

closeMenu(childActive, el)



if (("TD"==el.tagName) && ("clear"!=el.className)) {

var ch = getRootTable(el)

if (ch.active!=null) {

if (ch.active!=el) {

if (ch.active.className=="disabledhighlight")

ch.active.className="disabled"

else

ch.active.className=""

}

}

ch.active = el

lastHighlight = el

if ((el.className=="disabled") || (el.className=="disabledhighlight") || (el.id=="break"))

el.className = "disabledhighlight"

else {

if (el.id!="break") {

el.className = "highlight"

if (el._childItem==null)

el._childItem = getChildren(el)

if (el._childItem!=null) {

doMenuDown(el)

}

}

}

}

}

}



function removeHighlight(el) {

if (el!=null)

if ((el.className=="disabled") || (el.className=="disabledhighlight"))

el.className="disabled"

else

el.className=""

}



function cleanupMenu(el) {

if (el==null) return

for (var i = 0; i < el.all.length; i++) {

var item = el.all[i]

if (item.tagName=="TABLE")

item.style.display = ""

removeHighlight(item.active)

item.active=null

}

}





function closeMenu(ch, el) {

var start = ch

while (ch.className!="root") {

ch = ch.parentElement

if (((!ch.contains(el)) && (ch.className!="root"))) {

start=ch

}

}

cleanupMenu(start)

}

longshenwang 2003-10-20
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE type=text/css>#menubar {
BACKGROUND: rgb(212,208,200); FONT: menu; CURSOR: default; POSITION: relative
}
#menubar .root {
BORDER-RIGHT: rgb(212,208,200) 1px solid; PADDING-RIGHT: 2pt; BORDER-TOP: rgb(212,208,200) 1px solid; PADDING-LEFT: 2pt; BORDER-LEFT: rgb(212,208,200) 1px solid; BORDER-BOTTOM: rgb(212,208,200) 1px solid
}
#menubar TABLE {
BORDER-RIGHT: gray 2px solid; PADDING-RIGHT: 0pt; BORDER-TOP: #eeeeee 2px solid; DISPLAY: none; PADDING-LEFT: 0pt; BACKGROUND: rgb(212,208,200); PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: menu; BORDER-LEFT: #eeeeee 2px solid; PADDING-TOP: 0pt; BORDER-BOTTOM: gray 2px solid; POSITION: absolute
}
#menubar TABLE TD {
PADDING-RIGHT: 15pt; PADDING-LEFT: 12pt; PADDING-BOTTOM: 2pt; MARGIN: 0pt; PADDING-TOP: 2pt
}
#menubar .highlight {
BACKGROUND: #08246B; COLOR: white;
}
#menubar .disabledhighlight {
BACKGROUND: rgb(212,208,200); COLOR: gray
}
#menubar #break {
COLOR: gray
}
#menubar .disabled {
COLOR: gray
}
#menubar #break {
PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP: 0pt
}
#menubar SPAN.more {
PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; LEFT: 14pt; FLOAT: right; PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: 9pt webdings; WIDTH: 0.8em; PADDING-TOP: 0pt; POSITION: relative; TOP: -2pt; HEIGHT: 9pt
}
#menubar .TBHandle {
BACKGROUND-COLOR: menu;
BORDER-LEFT: buttonhighlight 1px solid;
BORDER-RIGHT: buttonshadow 1px solid;
BORDER-TOP: buttonhighlight 1px solid;
FONT-SIZE: 1px;
HEIGHT: 22px;
POSITION: absolute;
TOP: 1px;
WIDTH: 3px
}
#menubar .yToolbar {
BACKGROUND-COLOR: menu;
BORDER-BOTTOM: buttonshadow 1px solid;
BORDER-LEFT: buttonhighlight 1px solid;
BORDER-RIGHT: buttonshadow 1px solid;
BORDER-TOP: buttonhighlight 1px solid;
HEIGHT: 27px;
LEFT: 0px;
POSITION: relative;
TOP: 0px;
}
.handbtn {
BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; HEIGHT: 21px; WIDTH: 3px
}
.sepbtn1 {
BORDER-LEFT: buttonshadow 1px ridge; BORDER-RIGHT: buttonhighlight 1px solid; WIDTH: 2px
}

</STYLE>
</HEAD>

<BODY>
<script language=javascript>

//数组名+次序号码

//数组内容第一个值为标题

//"样式名称","字体颜色","名称","连接","目标窗口"

OutBarFolder1=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

OutBarFolder2=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

OutBarFolder3=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

var childActive = null

var menuActive = null

var lastHighlight = null

var active = false



function getReal(el) {

// Find a table cell element in the parent chain */

temp = el

while ((temp!=null) && (temp.tagName!="TABLE") && (temp.className!="root") && (temp.id!="menuBar")) {

if (temp.tagName=="TD")

el = temp

temp = temp.parentElement

}

return el

}



function raiseMenu(el) {

el.style.borderLeft = "1px #08246B solid"

el.style.borderTop = "1px #08246B solid"

el.style.borderRight = "1px #08246B solid"

el.style.borderBottom = "1px #08246B solid"

el.style.background = "#B5BED6"

}



function clearHighlight(el) {

if (el==null) return

el.style.borderRight = "1px lightgrey solid"

el.style.borderBottom = "1px lightgrey solid"

el.style.borderTop = "1px lightgrey solid"

el.style.borderLeft = "1px lightgrey solid"

el.style.background = "rgb(212,208,200)"

}



function sinkMenu(el) {

el.style.borderRight = "1px #EEEEEE solid"

el.style.borderBottom = "1px #EEEEEE solid"

el.style.borderTop = "1px gray solid"

el.style.borderLeft = "1px gray solid"

el.style.background = "rgb(212,208,200)"

}



function menuHandler(menuItem) {

// Write generic menu handlers here!

// Returning true collapses the menu. Returning false does not collapse the menu

return true

}



function getOffsetPos(which,el,tagName) {

var pos = 0 // el["offset" + which]

while (el.tagName!=tagName) {

pos+=el["offset" + which]

el = el.offsetParent

}

return pos

}
Javascript基础到入门
Javascript基础到入门视频，该课程主要围绕JavaScript能做什么？JavaScript应用场合、JavaScript的学习方法三大话题展开教学。讲师介绍：张中强，诺客科技技术总监/研发总监。丰富的项目经验，善于用精炼的代码来展示复杂的软件开发技术。曾参与并主持多个国家重大项目的开发，包括中国人民银行资金清算系统、中国银监会智能报表处理系统，电力调度系统。拥有10年以上软件技术开发培训经验，微软认证讲师(MCP)，微软认证数据库管理员(MCDBA)，微软认证系统工程师(MCSE)。
JavaScript是什么？JavaScript功能有哪些？
JavaScript，也称ECMAScript，是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。 最早是在HTML上使用的，用来给HTML网页添加动态功能，由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的
ArcGIS API for JavaScript实现地图常用工具条 距离测量，面积测量
距离测量，面积测量等工具条是常用的工具。也是GIS系统的基础功能 效果图 工具条样式： 距离测量： 面积测量： require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "esri/toolbars/draw",
JavaScript开发工具列表
摘要：你经常使用JavaScript开发吗？你使用哪些JavaScript开发工具？本文中，总结了一些非常实用的JavaScript工具，全部是免费的。使用这些工具将直接影响你的工作效率。在今天网络开发方面，JavaScript起了很关键的作用；像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章