Sparta Yew

     简约、职业、恒久
随笔 - 15, 文章 - 1, 评论 - 276, 引用 - 0
数据加载中……

js实现右键弹出可以拖动的窗口


sparta-紫杉  2010-4-17 16:37


一、判断浏览器类别,以便根据不同的浏览器类型编写兼容代码(该段代码来自李战)。

<script type="text/javascript"> 
  
 
var Sys = {}
 
var ua = navigator.userAgent.toLowerCase(); 
 
var s; 
 (s 
= ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 
 (s 
= ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : 
 (s 
= ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : 
 (s 
= ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : 
 (s 
= ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0
 
</script> 


二、通过下面三段代码来完成捕获鼠标事件的坐标位置(确定弹出窗口的坐标位置)

<script>

function mouseClick(ev){
 ev 
= ev || window.event;
 
var mousePos = mouseCoords(ev);
 X 
= mousePos.x;
 Y 
= mousePos.y;
}


function mouseCoords(ev){
        
//下面3行代码兼容火狐浏览器。
 if(ev.pageX || ev.pageY){
  
return {x:ev.pageX, y:ev.pageY};
 }

 
return {
  x:ev.clientX 
+ document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY 
+ document.body.scrollTop - document.body.clientTop
 }
;
}


document.onmousedown 
= mouseClick;

</script>


三、右键内容弹出(兼容Maxthon、FF浏览器)

<script>

function disDiv(){
  
var popmenu = document.getElementById('PopMenu');

 
if(Sys.firefox){
  popmenu.style.top 
= Y + 'px';
  popmenu.style.left 
= X + 'px';
  popmenu.style.visibility 
= '';
 }
else{
  popmenu.style.top 
= event.clientY+'px';
  popmenu.style.left 
= event.clientX+'px';
  popmenu.style.visibility 
= '';
 }


}

</script>


页面无素“PopMenu”是一个Html的DIV元素,代码如下:

<!-- 右键弹出对象窗口 -->  
<div  id="PopMenu" style="position:absolute; width:537px;    
      height:259px;    z-index:3; visibility:hidden; font-size: 120%;"
>
            
  
<div id="PopHandle" style="background:#FFCB2D;">
        
  
<table width="535" height="251" border="0">
    
<tr>
      
<td colspan="7" scope="col">
        
<table width="532" border="0">
            
<tr>
                
<td width="31" height="20" bgcolor="#0066FF">
                  
<img src="<%=request.getContextPath()%>/img/nodeDef/cancel.gif" onClick="closes()" />
                
</td>
            
</tr>
        
</table>          
      
</td>
    
</tr>
    
<tr>
      
<th width="45" scope="col">序号</th>
      
<th width="141" scope="col">成本节点名称</th>
      
<th width="95" scope="col">费用(万元)</th>
      
<th width="239" scope="col">工作量</th>
    
</tr>

    
<tr>
      
<td align="center" valign="middle">1</td>
      
<td>常用材料费</td>
      
<td align="center" valign="middle">20</td>
      
<td align="center" valign="middle">本周工作量上马工程,30吨。</td>
    
</tr>
    
    ……
  
</table>
          
  
</div>
        
</div>


四、拖动右键弹出窗口

<!-- 拖动窗口要使用到一个js组件dom-drag.js,有意者请到网络上下载。 -->
<script type="text/javascript" language="javascript" src="js/dom-drag.js"></script>
<script>
function initDomDrag(handleID, rootID) {
    
var handle = document.getElementById(handleID);
    
var root = document.getElementById(rootID);
    Drag.init(handle, root); 
}

      //拖动右键弹出对象初始化(PopMenu和PopHandle请参见本文中的那段html代码,分别是该段html代码中的两个div的标识)
      initDomDrag("PopHandle", "PopMenu");


</script>


dom-drgs.js可通过百度该关键词查找并下载,也可以通过本地址/Files/SpartaYew/dom-drag.txt(因为不能上传以.js为后缀的文件,因此后缀名修改为.txt)进行下载。

五、关闭右键弹出窗口

<script>

function closes(){
 
var popmenu = document.getElementById('PopMenu');
 popmenu.style.visibility
='hidden';
}

 
</script>


            -东营 sparta-紫杉 原创,转载请注明出处 :)
            http://www.blogjava.net/SpartaYew/
            SpartaYew@163.com
 
            
QQ:22086526

posted on 2011-05-19 11:09 sparta-紫杉 阅读(350) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: