在网页上的右键弹出菜单

各位做Web开发的朋友对于固定的网页菜单大多比较熟悉，网上资料也比较多，可是我发现对于右键弹出式菜单的介绍却少的可怜。在这里我介绍一个应用在刚做的项目中的弹出菜单。它是使用htc实现的。

1  <html xmlns:hGui>
  2  
  3      <head>
  4          <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  5          <public:component tagName="sMenu">
  6              <public:attach event="oncontentready" onevent="OnContentReady()" />
  7              <public:attach event="ondocumentready" onevent="init()" />
  8              <public:attach event="ondeactivate" onevent="element_OnDeActivate()" />
  9              <public:method name="show" />
10              <public:method name="buildMenu" />
11              <public:event name="onmenumousedown" id="idMenuMouseDown" />
12              <public:event name="onmenuclick" id="idMenuClick" />
13              <public:event name="onbeforepopup" id="idMenuBeforePopup" />
14              <public:event name="onhidden" id="idHidden" />
15              <PUBLIC:DEFAULTS viewLinkContent />
16          </public:component>
17           <style type="text/css">
18                  </style>
63           <script language="jscript">
64          </script>
415      </head>
416      <body id="ctrBody" style="font-size:12;cursor:default;visibility:hidden;" onselectstart="return false;">
417          <DIV ID="oTransContainer" STYLE="z-index:4998;position:absolute; filter:progid:DXImageTransform.Microsoft.Fade(duration=0.4,overlap=1.0) ">
418              <iframe id="frmPanel" frameborder="0" scrolling="no" style="position:absolute;z-index:4999">
419              </iframe>
420              <div id="divPanel" class="Panel" style="position:absolute;z-index:5000">
421                  <table id="tableMenu" border="0" cellspacing="0" cellpadding="0" style="font-size:12">
422                      <tr id="titleRow">
423                          <td colspan="3" height="0" id="titleBar" onmousemove="Title_mMove()" onmousedown="Title_mDown()" onmouseup="Title_mUp()"></td>
424                      </tr>
425                  </table>
426              </div>
427          </DIV>
428      </body>
429      <script>
430      var xDown,yDown;
431      var xOrg,yOrg;
432      var bMoving=false;
433      var movingEle=element;
434
435      function Title_mDown()
436       {
437          movingEle=element;
438          titleBar.setCapture();
439
440          bMoving=true;
441
442          xDown=event.x;yDown=event.y;
443
444          xOrg=movingEle.style.pixelLeft;
445          yOrg=movingEle.style.pixelTop;
446      }
447
448      function Title_mUp()
449       {
450          if (bMoving)
451           {
452              bMoving = false;
453              movingEle = null;
454              titleBar.releaseCapture();
455          }
456      }
457      function Title_mMove()
458       {
459          if (bMoving)
460           {
461              movingEle.style.position = "absolute";
462              var nLeft,nTop;
463
464              nLeft = movingEle.style.pixelLeft+event.x-xDown;
465              nTop = movingEle.style.pixelTop+event.y-yDown;
466
467              if (nLeft > 0)
468                  movingEle.style.pixelLeft = nLeft;
469              else
470                  movingEle.style.pixelLeft = 0;
471              if (nTop > 0)
472                  movingEle.style.pixelTop = nTop;
473              else
474                  movingEle.style.pixelTop = 0;
475
476          }
477      }
478
479      </script>
480  </html>
481

使用该htc的范例：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
2
3  <html>
4    <head>
5      <title>PopupMenuTest</title>
6      <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
7      <meta name="CODE_LANGUAGE" Content="C#">
8      <meta name=vs_defaultClientScript content="JavaScript">
9      <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
10    </head>
11    <body MS_POSITIONING="GridLayout" oncontextmenu="return DisplayPopupMenu();">
12           <script language="javascript">
13          function DisplayPopupMenu()
14           {
15              menuTree.show(event.x, event.y);
16              return false;
17          }
18
19          function menuTreeBeforePopup()
20           {
21          }
22
23          function menuTreeClick(objTree)
24           {
25
26              switch(event.menuData)
27               {
28                  case "refresh":    alert('refresh clicked.');
29                                  break;
30                  case "property":alert('property clicked.');
31                                  break;
32              }
33          }
34          </script>
35      <form id="Form1" method="post" runat="server">
36          <?XML:NAMESPACE PREFIX="hGui" /><?import namespace="hGui" implementation="/webcontrols/sMenu.htc" />
37          <hGui:smenu id="menuTree" onmenuclick="menuTreeClick()" onbeforepopup="menuTreeBeforePopup();" style="Z-INDEX: 100">
38              刷新,,,,./images/refresh.gif,refresh;
39              -,0,,,,;
40              属性 ,,,,./images/property.gif,property
41          </hGui:smenu>
42       </form>
43    </body>
44  </html>
45

怎么样，发现了没？这个菜单可是模仿Office样式的哦。弹出菜单就介绍到这了，怎么应用就看你们的了。如果这样你们还不知道怎样应用的话，<<---模仿一下这个看看吧，说不定会有灵感。

posted on 2006-04-12 15:29 XIAO牛阅读(285) 评论(0) 收藏举报