浮動層在php中的應用

1）php測試頁面的代碼

<table cellpadding="0" cellspacing="0" border="0" width="100%"><br /> <tr><br /> <td class="none" width="45%"><br /> <input type="text" name="txtProgram" class="textBox" /><br /> </td><br /> <td class="none"><br /> <a class="button" href="#" mce_href="#" id="btnProgram" name="btnProgram" onclick="displayDiv('Program',this)"><br /><span>選択</span><br /></a><br /> </td><br /> </tr><br /> <tr><br /> <td class="none" colspan="2" style="border-right:0px;border-bottom:0px" mce_style="border-right:0px;border-bottom:0px"><br /> <div id="Program" style="filter:alpha(opacity=75);position:absolute; z-index:100; display:none; background-color:#E2EEF3" mce_style="filter:alpha(opacity=75);position:absolute; z-index:100; display:none; background-color:#E2EEF3"><br /> 要測試的浮動層哦<br /></div><br><br /> </div><br /> </td><br /> </tr><br /> </table>

浮動層定義的幾個關鍵因素：z-index:100; display:none;

2）下面我需要點擊按鈕的時候顯示出浮動層，而且浮動層要在按鈕的右邊。關於如何擷取元素的座標位置我會在下一篇部落格中介紹，現在我們只有直接引用getElementPos得到元素座標的函數即可

   /**<br /> * 顯示浮動層<br /> * @param str 浮動層的id值<br /> * @param value 按鈕的id值<br /> */<br />function displayDiv(str,value)<br />{<br />floatArea=document.getElementById(str);<br />if(floatArea.style.display=="none")<br />{<br /> floatArea.style.border="#cde699 1px solid";<br /> var pos=getElementPos(value.id);<br /> x= pos.x;<br /> y=pos.y;<br /> floatArea.style.left=(document.documentElement.scrollLeft+x+65)+"px";<br /> floatArea.style.top=(document.documentElement.scrollTop+y+1)+"px";<br /> floatArea.style.width="300px";<br /> floatArea.style.display="";<br />}<br /> else<br />{<br />closeFloat(str);<br />}<br />}

3）關閉浮動層的方式有很多，我們先試試直接點擊按鈕關閉浮動層。判斷浮動層是否是none狀態，如果不是則直接調用關閉的函數

/**
 * 關閉浮動層
 * @param str 浮動層的id值
 */
function closeFloat(str)
{
 floatArea=document.getElementById(str);
 floatArea.style.display="none";
}

4）如果我希望通過浮動層上的一個按鈕來關閉。可以在浮動層的div之間加上一個關閉的按鈕，然後觸發closeFloat函數

  <div id="close" style="position:absolute;right:10px; top:auto; left:auto; bottom:0px;"><input name="img1" id="img1" type="image"　 width="20px" height="20px" src="images/close_float.gif" onclick="closeFloat('Program');" ></div>

5）如果你的頁面上有很多動態產生的浮動層，你希望在另外一個浮動層出現之前把前一個浮動層給清空掉，由於你無法預估使用者的操作，所以你也不清楚哪個浮動層先出現。

首先在php頁面上定義一個隱藏欄位：<input type="hidden" name="hidDivs" id="hidDivs" value="{0:Program,1:Program1,2:Program2,3:Program3,4:Program4}">

其次在displayDiv函數開始處加入：

var hidDivs = document.getElementById("hidDivs");
 if (hidDivs != null) {
  eval("var divs = " + hidDivs.value);
  for (var i in divs) {
   if(divs[i].id!=document.getElementById(str).id)
   divs[i].style.display = "none";
  }
 }

找到除了當前浮動層之外的所有浮動層，並將其關閉。