社区
JavaScript
帖子详情
不知道现在有没有用javascript实现工具条?
findcsdn
2003-10-20 03:24:11
想在网页上模拟一般的应用有菜单和工具条的样子,大家提提意见吧,谢谢各位参与!
...全文
61
5
打赏
收藏
不知道现在有没有用javascript实现工具条?
想在网页上模拟一般的应用有菜单和工具条的样子,大家提提意见吧,谢谢各位参与!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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
,也称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
+mysql+HTML+CSS的客户管理系统设计和
实现
【建议收藏,不然看着看着就不见了】
基于
JavaScript
+mysql+HTML+CSS的SSM客户管理系统设计和
实现
【建议收藏】????️????目录????1、前言????1.1、需求分析????1.1.1、功能性需求分析????1.1.2、非功能性需求????1.1.3、编写目的????1.1.4项目背景????️????1.2、可行性分析????1.2.1、技术可行性????1.2.2、经济可行性????1.2.3、社会可行性????️????1.3、系统结构设计与功能分析????1.3.1、系统结构设计????1.3.2、功
如何用
javascript
实现
条形码和二维码
请注意,这些示例只是基于
JavaScript
原生API的简化
实现
,可能无法处理更复杂的条形码和二维码编码。同样地,要生成二维码,可以使用
JavaScript
原生 API
实现
QR Code 的编码和绘制。要使用
JavaScript
原生的 API
实现
条形码或二维码生成,不依赖于任何库或第三方服务,可以使用一些算法来生成对应的图形。使用适当的软件或应用程序,用户还可以生成自己的条形码或二维码来存储个人信息或
实现
特定功能。然后,根据输入的编码数据,将每个字符替换为对应的编码序列,并绘制条形码的条纹。
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章