支持IE和FireFox的右键菜单

最新推荐文章于 2024-05-11 11:09:50 发布

gaoyuchuan_IT

最新推荐文章于 2024-05-11 11:09:50 发布

阅读量963

点赞数

文章标签： ie firefox function div class styles

本文链接：https://blog.csdn.net/gaoyuchuan_it/article/details/2244047

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 12px; MARGIN: 10px 0px 0px; FONT-FAMILY: "宋体"
}
.skin0 {
BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 100px; CURSOR: default; LINE-HEIGHT: 20px; PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 100px; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.menuitems {
PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
</STYLE>
<SCRIPT language=javascript>
<!--
//定义菜单显示的外观，可以从上面定义的2种格式中选择其一
var menuskin = "skin0";
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = false;
function getEvent(){ //同时兼容ie和ff的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function showmenuie5() {
//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置
var event=arguments[0] || window.event;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
//否则，就定位菜单的左坐标为当前鼠标位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;
//如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
//否则，就定位菜单的上坐标为当前鼠标位置
ie5menu.style.top = document.body.scrollTop + event.clientY;
//设置菜单可见
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
//隐藏菜单
//很简单，设置visibility为hidden就OK！
ie5menu.style.visibility = "hidden";
}
function highlightie5(evt) {
//高亮度鼠标经过的菜单条项目
//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "highlight";
element.style.color = "white";
//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5(evt) {
//恢复菜单条项目的正常显示
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "";
element.style.color = "black";
//window.status = "";
}
}
//右键下拉菜单功能跳转
function jumptoie5(evt) {
//转到新的链接位置
var event=evt || window.event;
var element=event.srcElement || event.target;
//var seltext=window.document.selection.createRange().text
if (element.className == "menuitems") {
//如果存在打开链接的目标窗口，就在那个窗口中打开链接
if (element.getAttribute("target") != null)
{
window.open(element.getAttribute("url"), element.getAttribute("target"));
}
else
//否则，在当前窗口打开链接
window.location = element.getAttribute("url");
}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<P>点击右键看看效果-<A href="http://www.7dspace.com/" target=_blank>七度空间网页教学网</A>
</P></CENTER>
<br>
<b id="test">点击右键看看效果</b>
<br>
<br>
<br>
<b id="test1">点击右键看看效果</b>
<DIV class=skin0 id=ie5menu οnmοuseοver=highlightie5(event) οnclick=jumptoie5(event); οnmοuseοut=lowlightie5(event)>
<DIV class=menuitems url="javascript:history.back();">后退</DIV>
<DIV class=menuitems url="javascript:history.forward();">前进</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/doc/news/index.htm" target="_blank">业界新闻</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/guide/index.htm" target="_blank">建站指南</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/web/index.htm" target="_blank">网页制作</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/flash/index.htm" target="_blank">动画制作</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/doc/effect/index.htm" target="_blank">网页特效</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/program/index.htm" target="_blank">网络编程</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/help/about.htm" target="_blank">关于本站</DIV>
<DIV class=menuitems url="http://www.7dspace.com/help/contact.htm">联系我们</DIV>
</DIV>
<SCRIPT language=JavaScript1.2>
//如果当前浏览器是Internet Explorer，document.all就返回真
//选择菜单方块的显示样式
//ie5menu=document.getElementById("ie5menu");
ie5menu.className = menuskin;
//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.getElementById("test").oncontextmenu = showmenuie5;
document.getElementById("test1").oncontextmenu = showmenuie5;
//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;
</SCRIPT>
</BODY></HTML>
2. /*
3. * 创建弹出div窗口。
4. 1、接口说明：DivWindow(id,title,width,height,content) 构造函数，创建一个弹出窗口对象
5. 参数：id 弹出窗口id；
6. title：弹出窗口标题名称；
7. width：弹出窗口宽度
8. height：弹出窗口高度
9. content：弹出窗口显示内容
11. 2、接口说明： closeDivWindow(id) 关闭窗口
12. 参数： id 弹出窗口id
14. 3、接口说明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 设置弹出窗口标题字体颜色
15. 参数：
17. 4、接口说明：setPopupTopBgColor(tBgColor) 设置弹出窗口标题背景颜色
19. 5、接口说明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色
21. 6、接口说明：open()
23. 使用方法：
24. var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href=http://www.youthfly.net target=_blank>http://www.youthfly.net</a><br><ahref=http://www ... youthfly.net</a><br><br>thx!!!=)..."L);
25. a.setPopupTopBgColor("black","blue","white","white","black");
26. a.open();
28. 生成的html：
29. <div id='"window"+id'></div> 控制背景的div，使背景逐渐变暗
30. <div id='"windowTopBg"+id'>
31. <div id='"windowTop"+id'>
32. <span id='"windowTopTitle"+id'>title</span>
33. <span id='"windowTopOperate"+id'>maxORmin</span>
34. <span id='"windowTopClose"+id'>close</span>
35. </div>
36. <div id='"windowContent"+id'>content</div>
37. </div>
39. @author ERIC
40. @date 2007.11.8
41. */
43. var isIe = (document.all)?true:false;
44. var moveable=false;
45. var topDivBorderColor = "#336699";//提示窗口的边框颜色
46. var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色
47. var contentBgColor = "white";//内容显示窗口的背景颜色
48. var contentFontColor = "black";//内容显示窗口字体颜色
49. var titleFontColor = "white"; //弹出窗口标题字体颜色
50. var index=1000000;//z-index;
51. // 创建弹出窗口，构造函数
52. function DivWindow(id,title,w,h,content)
53. {
54. this.id = id;//窗口id
55. this.zIndex = index +2;
56. this.title = title;//弹出窗口名称
57. this.message = content;//弹出窗口内容
58. this.width = w;//弹出窗口宽度
59. this.height = h;//弹出窗口高度
60. this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置，距屏幕左边的位置
61. this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置，距屏幕上边的位置
62. //this.init = init;
63. //this.init();
64. }
65. //根据构造函数设定初始值，创建弹出窗口
66. DivWindow.prototype = {
67. //设置弹出窗口标题字体颜色
68. setPopupTopTitleFontColor:function(tFontColor)
69. {
70. titleFontColor = tFontColor;
71. },
72. //设置弹出窗口标题背景颜色
73. setPopupTopBgColor:function(tBgColor)
74. {
75. topDivBgColor = tBgColor;
76. },
77. //设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色
78. setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
79. {
80. topDivBorderColor = borderColor;
81. topDivBgColor = bgColor;
82. titleFontColor = tFontColor;
83. contentBgColor = cBgColor;
84. contentFontColor = fColor;
85. },
86. //打开一个弹出窗口
87. open: function()
88. {
89. var sWidth,sHeight;
90. sWidth=document.body.clientWidth;
91. sHeight=document.body.clientHeight;
92. var bgObj=document.createElement("div");
93. bgObj.setAttribute('id','window'+this.id);
94. var styles={"top":"0px","left":"0px","position":"absolute","background":"#245","width":sWidth+'px',"height":sHeight+"px"};
95. if(isIe){
96. styles.filter="alpha(opacity=0)";
97. }
98. else
99. styles.opacity=0;
100. test(bgObj,styles);
101. document.body.appendChild(bgObj);
102. //让背景逐渐变暗
103. showBackground(bgObj,25);
105. // 弹出窗口框体背景容器
106. var windowTopBgDiv = document.createElement("div");
107. windowTopBgDiv.setAttribute('id','windowTopBg'+this.id);
108. windowTopBgDiv.style.position = "absolute";
109. windowTopBgDiv.style.zIndex = this.zIndex ;
110. windowTopBgDiv.style.width = this.width ;
111. windowTopBgDiv.style.height = this.height;
112. windowTopBgDiv.style.left = this.left;
113. windowTopBgDiv.style.top = this.top;
114. windowTopBgDiv.style.background = topDivBgColor;
115. windowTopBgDiv.style.fontSize = "9pt";
116. windowTopBgDiv.style.cursor = "default";
117. windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
118. windowTopBgDiv.οnmοusedοwn=function(){
119. if(windowTopBgDiv.style.zIndex!=index)
120. {
121. index = index + 2;
122. var idx = index;
123. windowTopBgDiv.style.zIndex=idx;
124. }
125. };
126. // 弹出窗口头部框体
127. var windowTopDiv = document.createElement("div");
128. windowTopDiv.setAttribute('id','windowTop'+this.id);
129. windowTopDiv.style.position = "absolute";
130. windowTopDiv.style.background = topDivBgColor;//"white";
131. windowTopDiv.style.color = titleFontColor;
132. windowTopDiv.style.cursor = "move";
133. windowTopDiv.style.height = 20;
134. windowTopDiv.style.width = this.width;
135. //开始拖动;
136. windowTopDiv.οnmοusedοwn=function(evt){
137. var event=evt || window.event;
138. if(event.button==1 || event.button==0)
139. {
140. //锁定标题栏;
141. //windowTopDiv.setCapture();
142. if(windowTopDiv.setCapture)
143. windowTopDiv.setCapture();
144. else if(window.captureEvents)
145. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
146. //定义对象;
147. var win = windowTopDiv.parentNode;
148. //记录鼠标和层位置;
149. if(!event.clientX)event.clientX=event.pageX;
150. if(!event.clientY)event.clientY=event.pageY;
151. x0 = event.clientX;
152. y0 = event.clientY;
153. //x0 = event.layerX?event.layerX:event.offsetX;
154. //y0 = event.layerY?event.layerY:event.offsetY;
155. x1 = parseInt(win.style.left);
156. y1 = parseInt(win.style.top);
157. //记录颜色;
158. //topDivBgColor = windowTopDiv.style.backgroundColor;
159. //改变风格;
160. //windowTopDiv.style.backgroundColor = topDivBorderColor;
161. win.style.borderColor = topDivBorderColor;
162. moveable = true;
163. }
164. };
165. //停止拖动
167. windowTopDiv.οnmοuseup=function(){
168. if(moveable)
169. {
170. var win = windowTopDiv.parentNode;
171. win.style.borderColor = topDivBgColor;
172. windowTopDiv.style.backgroundColor = topDivBgColor;
173. windowTopDiv.releaseCapture();
174. if(windowTopDiv.releaseCapture)
175. windowTopDiv.releaseCapture();
176. else if(window.captureEvents)
177. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
178. moveable = false;
179. }
180. };
181. // 开始拖动
182. windowTopDiv.οnmοusemοve=function(evt){
183. if(moveable)
184. {
185. var event=evt || window.event;
186. var arr = [0,400,0,300]
187. if(!event.clientX)event.clientX=event.pageX;
188. if(!event.clientY)event.clientY=event.pageY;
189. var win = windowTopDiv.parentNode;
190. var a=x1 + event.clientX - x0;
191. var b=y1 + event.clientY - y0;
192. win.style.left = a<arr[0]?arr[0]:a>arr[1]?arr[1]:a;
193. win.style.top = b<arr[2]?arr[2]:b>arr[3]?arr[3]:b;
194. }
195. };
196. // 双击弹出窗口
197. windowTopDiv.οndblclick=function(){
198. maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
199. };
201. //增加一个弹出窗口标题的显示
202. var windowTopTitleSpan = document.createElement("span");
203. windowTopTitleSpan.setAttribute('id','windowTopTitle'+this.id);
204. windowTopTitleSpan.style.width = this.width-2*12-4;
205. windowTopTitleSpan.style.paddingLeft = "3px";
206. windowTopTitleSpan.innerHTML = this.title;
208. //增加一个弹出窗口最小化，最大化的操作
209. var windowTopOperateSpan = document.createElement("span");
210. windowTopOperateSpan.setAttribute('id','windowTopOperate'+this.id);
211. windowTopOperateSpan.style.width = 12;
212. windowTopOperateSpan.style.borderWidth = "0px";
213. windowTopOperateSpan.style.color = titleFontColor;//"white";
214. windowTopOperateSpan.style.fontFamily = "webdings";
215. windowTopOperateSpan.style.cursor = "default";
216. windowTopOperateSpan.innerHTML = "0";
217. //最大化或者最小化弹出窗口操作
218. windowTopOperateSpan.οnclick=function(){
219. maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
220. };
222. //增加一个弹出窗口关闭的操作
223. var windowTopCloseSpan = document.createElement("span");
224. windowTopCloseSpan.setAttribute('id','windowTopClose'+this.id);
225. windowTopCloseSpan.style.width = 12;
226. windowTopCloseSpan.style.borderWidth = "0px";
227. windowTopCloseSpan.style.color = titleFontColor;//"white";
228. windowTopCloseSpan.style.fontFamily = "webdings";
229. windowTopCloseSpan.style.cursor = "default";
230. windowTopCloseSpan.innerHTML = "r";
231. // 关闭窗口
232. windowTopCloseSpan.οnclick=function(){
233. windowTopDiv.removeChild(windowTopTitleSpan);
234. windowTopDiv.removeChild(windowTopOperateSpan);
235. windowTopDiv.removeChild(windowTopCloseSpan);
236. windowTopBgDiv.removeChild(windowTopDiv);
237. windowTopBgDiv.removeChild(windowContentDiv);
238. document.body.removeChild(windowTopBgDiv);
239. document.body.removeChild(bgObj);
240. };
242. // 内容
243. var windowContentDiv = document.createElement("div");
244. windowContentDiv.setAttribute('id','windowContent'+this.id);
245. windowContentDiv.style.background = contentBgColor;
246. windowContentDiv.style.color = contentFontColor;
247. windowContentDiv.style.cursor = "default";
248. windowContentDiv.style.height = (this.height - 20 -6);
249. windowContentDiv.style.width = this.width;
250. windowContentDiv.style.position = "relative";
251. windowContentDiv.style.left = 0;
252. windowContentDiv.style.top = 24;
254. windowContentDiv.style.lineHeight = "20px";
255. windowContentDiv.style.fontSize = "10pt";
256. windowContentDiv.style.wordBreak = "break-all";
257. windowContentDiv.style.padding = "3px";
258. windowContentDiv.innerHTML = this.message;
260. //将内容写入到文件中
261. windowTopDiv.appendChild(windowTopTitleSpan);
262. windowTopDiv.appendChild(windowTopOperateSpan);
263. windowTopDiv.appendChild(windowTopCloseSpan);
264. windowTopBgDiv.appendChild(windowTopDiv);
265. windowTopBgDiv.appendChild(windowContentDiv);
266. document.body.appendChild(windowTopBgDiv);
267. }
268. }
270. //最大或者最小化探出窗口
271. function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv)
272. {
273. var win = windowTopOperateSpan.parentNode.parentNode;
274. var tit = windowTopOperateSpan.parentNode;
275. var flg = windowContentDiv.style.display=="none";
276. if(flg)
277. {
278. win.style.height = parseInt(windowContentDiv.style.height) + parseInt(tit.style.height) + 2*2;
279. windowContentDiv.style.display = "block";
280. windowTopOperateSpan.innerHTML = "0";
281. }
282. else
283. {
284. win.style.height = parseInt(tit.style.height) + 2*2;
285. windowTopOperateSpan.innerHTML = "2";
286. windowContentDiv.style.display = "none";
287. }
288. }
289. //让背景渐渐变暗
290. function showBackground(obj,endInt)
291. {
292. if(isIe)
293. {
294. obj.filters.alpha.opacity+=1;
295. if(obj.filters.alpha.opacity<endInt)
296. {
297. setTimeout(function(){this.showBackground(obj,endInt)},5);
298. }
299. }
300. else
301. {
302. var al=parseFloat(obj.style.opacity);al+=0.01;
303. obj.style.opacity=al;
304. if(al<(endInt/100))
305. {
306. setTimeout(function(){this.showBackground(obj,endInt)},5);
307. }
308. }
309. }
310. //关闭弹出窗口
311. function closeDivWindow(id)
312. {
313. var windowTopTitleSpan = document.getElementById("windowTopTitle"+id);
314. var windowTopOperateSpan = document.getElementById("windowTopOperate"+id);
315. var windowTopCloseSpan = document.getElementById("windowTopClose"+id);
316. var windowTopDiv = document.getElementById("windowTop"+id);
317. var windowTopBgDiv = document.getElementById("windowTopBg"+id);
318. var windowContentDiv = document.getElementById("windowContent"+id);
319. var bgObj = document.getElementById("window"+id);
321. windowTopDiv.removeChild(windowTopTitleSpan);
322. windowTopDiv.removeChild(windowTopOperateSpan);
323. windowTopDiv.removeChild(windowTopCloseSpan);
324. windowTopBgDiv.removeChild(windowTopDiv);
325. windowTopBgDiv.removeChild(windowContentDiv);
326. document.body.removeChild(windowTopBgDiv);
327. document.body.removeChild(bgObj);
328. }
330. function test(dom,styles){
331. for(key in styles){
332. dom.style[key]=styles[key];
333. }
334. }

gaoyuchuan_IT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支持IE和FireFox的右键菜单

"-//W3C//DTD HTML 4.0 Transitional//EN"> 0053)http://www.7dspace.com/files/download/contentmenu.htm --> "text/html; charset=gb2312"> BODY { FONT-SIZE
复制链接

扫一扫