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>