&#106avascript制作浮动的工具条

浮动|工具条

该程序是我从别人的网站上分析出来的！由于对方的网站使用了框架，而且又取消了鼠标的右键功能，因此费了好长时间！
当你浏览该页时，工具条始终浮在左上角，你若不喜欢，可以自己调节摆放位置！若想多页使用该代码，可以把JSP程序部分写成JS的文件，然后再通过调用来实现，有不明白的地方，欢迎各位与我交流！
演示地址：http://www.85time.com/softuse/bar.htm
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE type="text/CSS">
.wdBlack{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
.wdGray{ font-size:9pt; line-height:11pt; font-family:宋体; color:#CCCCCC }
.wdBlue{ font-size:9pt; line-height:11pt; font-family:宋体; color:#2F8BDF }
.wdRed{ font-size:9pt; line-height:11pt; font-family:宋体; color:red }
.wdWhite{ font-size:9pt; line-height:11pt; font-family:宋体; color:white }
.moveme{cursor: move;}
.handle{cursor: move;}
.coolBar{background: #fffffc;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}
.coolButton{font-size:9pt;border: 1px solid buttonface; padding: 1px; text-align: center; cursor: hand;color:#555555}
.coolButton IMG {filter: gray();} div{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
Text{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
INPUT{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
table{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
body{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }
form{ font-size:9pt; line-height:11pt; font-family:宋体; color:black }

A:link{ font-size:9pt; font-family:宋体; text-decoration: none; color:#2F8BDF }
A:visited{ font-size:9pt; font-family:宋体; text-decoration: none; color:#2F8BDF }
A:hover{ font-size:9pt; font-family:宋体; text-decoration: underline; color:#FF0000 }
</STYLE>

<script language="javascript">
var dragobject = null;
var tx;
var ty;
document.onmouseover = doOver;
document.onmouseout = doOut;
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousedown=initDown;
document.onmouseup=initUp;
document.onmousemove=initMove;
function stat(){
var a = pageYOffset;
document.bar.top = a;
setTimeout('stat()',2);
}
function fix(){
nome=navigator.appName
if(nome=='Netscape') stat();
else{
var a=document.body.scrollTop;
var b=document.body.scrollLeft;
bar.style.top = a;
bar.style.left = b;
}
}
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)
if (el.className == "moveme") {
dragobject = el;
ty = (window.event.clientY - dragobject.style.pixelTop);
tx = (window.event.clientX - dragobject.style.pixelLeft);
window.event.returnValue = false;
window.event.cancelBubble = true;
}else if (el.className == "handle") {
tmp = el.getAttribute("for");
if (tmp != null) {
el = eval(tmp);
dragobject = el;
ty = (window.event.clientY - dragobject.style.pixelTop);
tx = (window.event.clientX - dragobject.style.pixelLeft);
window.event.returnValue = false;
window.event.cancelBubble = true;
} else {
dragobject = null;
}
}else {
dragobject = null;
}
}
function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}
function moveme_onmousemove() {
if (dragobject) {
if(window.event.clientX >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
if (document.all) {
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
}
function doOver() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = toEl;
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
if (el.className == "coolButton")
el.onselectstart = new Function("return false");
if ((el.className == "coolButton") && !cDisabled) {
makeRaised(el);
makeGray(el,false);
}
}
function doOut() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = fromEl;
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
var cToggle = el.cToggle;
toggle_disabled = (cToggle != null);
if (cToggle && el.value) {
makePressed(el);
makeGray(el,true);
}
else if ((el.className == "coolButton") && !cDisabled) {
makeFlat(el);
makeGray(el,true);
}
}
function doDown() {
el = getReal(window.event.srcElement, "className", "coolButton");
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
if ((el.className == "coolButton") && !cDisabled) {
makePressed(el)
}
}
function doUp() {
el = getReal(window.event.srcElement, "className", "coolButton");
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
if ((el.className == "coolButton") && !cDisabled) {
makeRaised(el);
}
}
function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function findChildren(el, type, value) {
var children = el.children;
var tmp = new Array();
var j=0;
for (var i=0; i<children.length; i++) {
if (eval("children[i]." + type + "=="" + value + """)) {
tmp[tmp.length] = children[i];
}
tmp = tmp.concat(findChildren(children[i], type, value));
}
return tmp;
}
function disable(el) {
if (document.readyState != "complete") {
window.setTimeout("disable(" + el.id + ")", 100);
return;
}
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
if (!cDisabled) {
el.cDisabled = true;
el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;border:1px">' +
'<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;border:1px">' +
el.innerHTML +
'</span>' +
'</span>';
if (el.onclick != null) {
el.cDisabled_onclick = el.onclick;
el.onclick = null;
}
}
}
function enable(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
if (cDisabled) {
el.cDisabled = null;
el.innerHTML = el.children[0].children[0].innerHTML;
if (el.cDisabled_onclick != null) {
el.onclick = el.cDisabled_onclick;
el.cDisabled_onclick = null;
}
}
}
function addToggle(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
var cToggle = el.cToggle;
cToggle = (cToggle != null);
if (!cToggle && !cDisabled) {
el.cToggle = true;
if (el.value == null)
el.value = 0;
if (el.onclick != null)
el.cToggle_onclick = el.onclick;
else
el.cToggle_onclick = "";
el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
}
}
function removeToggle(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);
var cToggle = el.cToggle;
cToggle = (cToggle != null);
if (cToggle && !cDisabled) {
el.cToggle = null;
if (el.value) {
toggle(el);
}
makeFlat(el);
if (el.cToggle_onclick != null) {
el.onclick = el.cToggle_onclick;
el.cToggle_onclick = null;
}
}
}
function toggle(el) {
el.value = !el.value;
if (el.value)
el.style.background = "URL()";
else
el.style.backgroundImage = "";
}
function makeFlat(el) {
with (el.style) {
background = "";
border = "1px solid buttonface";
padding = "1px";
}
}
function makeRaised(el) {
with (el.style) {
borderLeft = "1px solid #2F8BDF";
borderRight = "1px solid #2F8BDF";
borderTop = "1px solid #2F8BDF";
borderBottom = "1px solid #2F8BDF";
padding = "1px";
}
}
function makePressed(el) {
with (el.style) {
borderLeft = "1px solid buttonhighlight";
borderRight = "1px solid buttonshadow";
borderTop = "1px solid buttonhighlight";
borderBottom = "1px solid buttonshadow";

paddingTop = "2px";
paddingLeft = "2px";
paddingBottom = "0px";
paddingRight = "0px";
}
}
function makeGray(el,b) {
var filtval;
if (b)
filtval = "gray()";
else
filtval = "";
var imgs = findChildren(el, "tagName", "IMG");
for (var i=0; i<imgs.length; i++) {
imgs[i].style.filter = filtval;
}
}
function load(ws) {
parent.location.href=ws;
}
function initDown() {
doDown();
moveme_onmousedown();
}
function initUp() {
doUp();
moveme_onmouseup();
}
function initMove() {
moveme_onmousemove();
}
</script>
</HEAD>
<BODY onScroll="fix()" onResize="fix()">
<span id="bar" style="position:absolute;left:0px;top:0px;width:500px; height:1px; z-index:9">
<table class=coolBar id=toolbar1 width=100%>
<tr>
<td class=coolButton >网友论坛</td>
<td class=coolButton >实用引擎</td>
<td class=coolButton >推荐作品</td>
<td class=coolButton >留言板</td>
<td class=coolButton >聊天室</td>
</tr>
</table>
</span>
</body>
</html>

时间： 2024-07-31 08:30:37

&#106avascript制作浮动的工具条的相关文章

Javascript制作浮动的工具条

javascript|浮动|工具条 该程序是我从别人的网站上分析出来的!由于对方的网站使用了框架,而且又取消了鼠标的右键功能,因此费了好长时间! 当你浏览该页时,工具条始终浮在左上角,你若不喜欢,可以自己调节摆放位置!若想多页使用该代码,可以把JSP程序部分写成JS的文件,然后再通过调用来实现,有不明白的地方,欢迎各位与我交流! 演示地址:http://www.85time.com/softuse/bar.htm <HTML> <HEAD> <TITLE></TI

浮动的工具条，工具条上的按钮能不能动态生成？

问题描述 浮动的工具条,工具条上的按钮能不能动态生成? 浮动的工具条,工具条上的按钮能不能动态生成?用什么方法可以用代码添加按钮到工具条上呢? 解决方案 http://www.cnblogs.com/lidabo/p/3701774.htmlhttp://www.itnose.net/detail/104833.html

一步步制作真彩工具条

例子程序最终效果图: 一直在寻找制作一个 24bit 及以上真彩工具条的简单有效方法,在各种VC站点都找到了很多有关这方面的文章和介绍,但是都存在一个不足的地方,介绍的不够详细,对初学者来说有点难度.最近终于有所发现,因此在这里将自己在制作真彩工具条方面的小经验介绍给大家,以期抛砖引玉. 在这里将介绍两个重点的内容,一个是制作真彩工具条的图形工具 Visual toolbar,另一个是在程序中显示工具条的类CtrueColorToolBar.有了这两个利器,几乎能够非常简单快速的制作任何真彩工具

MFC单文档，浮动工具条和浮动菜单消失问题

问题描述 用VS2010创建一个标准的经典的单文档程序,默认的工具条和菜单是可以浮动的,就是可以停靠在任何位置.问题来了:当工具条菜单条不停靠在窗口边上,而是浮动到桌面其他位置时,这时当主窗口失去焦点(比如:在桌面其他位置点击鼠标),工具条和菜单条就消失了,不显示了.这个效果是不希望出现的,我想,任何时候,浮动的工具条和菜单条都应该显示才对,有无高手解决此问题? 解决方案

MFC程序员WTL指南(4)工具条与状态条

对第三部分的介绍 自从作为Windows 95的通用控件出现以来,工具条和状态条就变成了很普遍的事物.由于MFC支持浮动的工具条从而使它们更受欢迎.随着通用控件的更新,Rebars(最初被称为Coollbar)使得工具条有了另一种展示方式.在第三部分,我将介绍WTL对这些控制条的支持和如何在你的程序中使用它们. 主窗口的工具条和状态条 CFrameWindowImpl有三个HWND类型的成员变量在窗口创建时被初始化,我们已经见过m_hWndClient,它是填充主窗口客户区的"视图"窗

如何去掉浮动工具条中的关闭按钮

在C++/MFC框架应用程序里,当浮动工具条被拖离主窗口后,一般都有一个"关闭"按钮,如图一所示: 图一  本来这个按钮完全是按照Windows应用程序的UI设计规范而设计的,也就是说所有的窗口都应该有一个地方让用户可以关闭这个窗口.但是有的用户提出来不想要这个"关闭"按钮.既然用户有这种需要,那么我们就想办法实现吧...... 首先,我们来确定实现的思路,因为我们要实现的功能与工具条有关,所以涉及的类肯定与 CToolBar有关.其次,为了判断工具条浮动后&quo

如何定制浮动工具条

关于这个问题,其实网上可以找到很多这方面的文章和例子.尤其是在MSDN上,你可以查阅到非常详细的内容.为简单起见,本文这里只将需要定制的代码列出来. 第一步: 创建一个MDI工程,一路都选择默认选项.  第二步: 在 CMainFrame 类的头文件中添加下列方法以及变量声明: // Operations public: void DockControlBarLeftOf(CToolBar* Bar, CToolBar* LeftOf); protected: // control bar em

VC++删除浮动工具条中“关闭”按钮

在Visual C++自动生成的MFC框架应用程序中,当浮动工具条被拖离主框架窗口后,一般都会在工具条的右上角有一个"关闭"按钮,应该说这个按钮完全是按照Windows应用程序的用户界面(UI)设计规范而设计的,也就是说所有的窗口都应该有一个地方让用户可以关闭这个窗口.但是有的开发人员偏偏提出来不想要这个"关闭"按钮.本实例通过自定一个扩展的工具条类,实现了删除工具条中"关闭"按钮的目的.程序编译运行后的界面效果如图一所示: 图一.没有"

jquery toolbar与网页浮动工具条具体实现代码

toolbar 网页浮动工具条非常实用的一个功能,下面为大家介绍下使用jquery如何快速做到 jquery 实现toolbar与网页浮动工具条jQuery实现方法  /*  基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码.    我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和"隐藏按钮列表"(添加到隐藏工具栏).  我们还可以期待一个&qu