DIV CSS 佈局教程網

復制代碼 代碼如下:
<!--菜單樣式-->
<STYLE type=text/css>
.cMenu {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
FONT-WEIGHT: normal;
FONT-SIZE: 14px;
VISIBILITY: hidden;
BORDER-LEFT: #000000 1px solid;
WIDTH: 150px;
CURSOR: default;
COLOR: #000000;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
POSITION: absolute;
BACKGROUND-COLOR: #eeeeff
}
.menuitems {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px
}
</STYLE>
<DIV class=cMenu id="contextMenu" onmouseover=highLightMenu() onmouseout=lowLightMenu()>
<DIV class=menuitems clickcall="alert('查看歷史執行情況');">查看歷史執行情況</DIV>
<DIV class=menuitems clickcall="alert('查看批注');">查看批注</DIV>
<DIV class=menuitems clickcall="alert('插入/修改批注');">插入/修改批注</DIV>
<HR color=#aaaaaa size="0">
<DIV class=menuitems clickcall="alert('關於');">關於</DIV>
</DIV>
<SCRIPT type="text/javascript">
var contextMenu = document.getElementById("contextMenu");
function getObjectName()
{
return document.getElementById("cv.id").value;
}
function getRVContent()
{
var objName = getObjectName();
return eval("document.getElementById('RVContent" + objName + "');");
}
function overWriteRightClick()//重寫彈出菜單
{
var objName = getObjectName();
eval("oCV" + objName + ".rvMainWnd.displayContextMenu = displayContextMenu;");
}
function disableRightClick()
{
var objName = getObjectName();
eval("oCV" + objName + ".bCanUseCognosViewerContextMenu = false;");
}
/* 菜單相關函數 start*/
function displayContextMenu(evt) {
evt = (evt) ? evt : ((event) ? event : null);
hideContextMenu();
var rightedge = getRVContent().clientWidth - evt.clientX;
var bottomedge = getRVContent().clientHeight - evt.clientY;
if (rightedge < contextMenu.offsetWidth)
contextMenu.style.left = getRVContent().scrollLeft + evt.clientX - contextMenu.offsetWidth - getRVContent().offsetLeft;
else
contextMenu.style.left = getRVContent().scrollLeft + evt.clientX - getRVContent().offsetLeft;
if (bottomedge < contextMenu.offsetHeight)
contextMenu.style.top = getRVContent().scrollTop + evt.clientY - contextMenu.offsetHeight - getRVContent().offsetTop;
else
contextMenu.style.top = getRVContent().scrollTop + evt.clientY - getRVContent().offsetTop;
contextMenu.style.visibility = "visible";
return false;
}
function hideContextMenu() {
var object = event.srcElement;
contextMenu.style.visibility = "hidden";
if (object.className == "menuitems") {
eval(object.clickcall);
}
}
function highLightMenu() {
var object = event.srcElement;
if (object.className == "menuitems") {
object.style.backgroundColor = "highlight";
object.style.color = "white";
}
}
function lowLightMenu() {
var object = event.srcElement;
if (object.className == "menuitems") {
object.style.backgroundColor = "";
object.style.color = "black";
}
}
/*菜單相關函數 end*/
overWriteRightClick();
document.body.onclick = hideContextMenu;
</SCRIPT>

下面我來著介紹一下這段代碼，前面的style和div主要是定義菜單的現實樣式，其中引用樣式為menuitems的div中有個clickcall屬性，這個屬性就是當點擊此菜單項時調用的JS函數，可以將其改為自己的函數，我這裡只是簡單的調用了個alert。
getObjectName函數中有個cv.id的對象，之前也有人問過這個問題，“cv.id”是干什麼用的？cognos報表在ReportStudio運行生成的對象和用URL請求生成的對象名稱是不一樣的，但是有規律可循，比如利用ReportStudio運行生成的報表中CognosViewer的對象名為oCVRS，而用URL請求生成的cognosViewer對象名為oCV_NS_，大家可以查看兩次運行結果的源文件來進行比較，就比較直觀了。發現前綴都一樣（oCV）只是後面“RS”和“_NS_”不同，頁面中很多對象都是用的此規則，而cv.id存儲到正是後綴。這樣就可以拼湊出當前運行模式下的對象名了。
getRVContent函數獲取的是id為RVContent_NS_或RVContentRS的DIV對象，RVContent是展現用ReportStudio定義報表的內容，不包含CognosViewer工具欄和標題欄。
overWriteRightClick函數是將cognos右鍵調用的函數改為自己定義的函數。
disableRightClick函數已經說過了，禁用右鍵菜單。
displayContextMenu、hideContextMenu、highLightMenu、lowLightMenu這幾個函數都是和菜單操作先關的，可以根據實際要求進行改造。
效果圖如下：