Sparta Yew

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>