声明:这里直接从项目代码块中抠出。不便地方,多包涵!有思路和方法指导是本文意图。
前端代码:
<asp:Image ID="imageSetting" runat="server" SkinID="ImageHand" EnableViewState="false" />
<div id="set1" runat="server" style="border-left: 1px solid #6593CF; border-top: 1px solid #6593CF;
background: #BAD8FF; border-bottom: 3px solid #6593CF; border-right: 3px solid #6593CF;
padding: 0px; display: none; z-index: 10; width: 75px; cursor: hand; position: absolute">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="font-size: 9pt;
line-height: 20px; background-color: #BAD8FF; padding: 2px;">
<tbody>
<tr>
<td style="border-right: 1px solid #1B87D7">
<asp:Image ID="imageMenu1" runat="server" />
</td>
<td id="tdSetting" runat="server" class="menu_normal" οnmοuseοver="this.className='menu_over'"
οnmοuseοut="this.className='menu_normal'">
<nobr><asp:Label ID="lblSetting" runat="server" Text="[设置]" ForeColor="Black"></asp:Label></nobr>
</td>
</tr>
<tr>
<td style="border-right: 1px solid #1B87D7;">
<asp:Image ID="imageMenu2" runat="server" />
</td>
<td id="tdMoveUp" runat="server" class="menu_normal" οnmοuseοver="this.className='menu_over'"
οnmοuseοut="this.className='menu_normal'">
<nobr><asp:Label ID="lblMoveUp" runat="server" Text="[上移]" ForeColor="Black"></asp:Label></nobr>
</td>
</tr>
<tr>
<td style="border-right: 1px solid #1B87D7">
<asp:Image ID="imageMenu3" runat="server" />
</td>
<td id="tdMoveDown" runat="server" class="menu_normal" οnmοuseοver="this.className='menu_over'"
οnmοuseοut="this.className='menu_normal'">
<nobr><asp:Label ID="lblMoveDown" runat="server" Text="[下移]" ForeColor="Black"></asp:Label></nobr>
</td>
</tr>
</tbody>
</table>
</div>
前端Javascript代码:
//菜单
function OnContextMenu(set1ClientID, obj) {
//window.event.returnValue = false;
var set1 = document.getElementById(set1ClientID);
var PY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var PX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
set1.style.display = '';
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
set1.style.pixelTop = obj.offsetTop + PY;
set1.style.pixelLeft = obj.offsetLeft + PX;
}
else {
set1.style.pixelTop = event.clientY + PY;
set1.style.pixelLeft = event.clientX + PX;
}
if ((set1.offsetTop + set1.offsetHeight) > document.body.scrollTop + document.body.clientHeight) {
set1.style.pixelTop = set1.offsetTop - (set1.offsetTop + set1.offsetHeight - (document.body.clientHeight + document.body.scrollTop));
}
return true;
}
//菜单链接指向
function OptClick(btnClientID) {
if (document.all) {
document.getElementById(btnClientID).click();
}
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById(btnClientID).dispatchEvent(evt);
}
}
//hiden menu
document.onmousedown = function() {
var objDiv = document.getElementsByTagName("div");
for (var i = 0; i < objDiv.length; i++) {
if (objDiv[i].id != null) {
if (objDiv[i].id != "") {
var str = objDiv[i].id.indexOf("_set1");
if (str != -1) {
objDiv[i].style.display = 'none';
}
}
}
}
}
后端代码:只是个图片路径和js事件注册,你可以直接放在前段页面里。这里直接从项目扣除,没做简要整理O(∩_∩)O~。
imageSetting.ImageUrl = VariableHelper.ApplicationPath + "images/ico/set.gif";
imageMenu1.ImageUrl = VariableHelper.ApplicationPath + "images/ico/setting.png";
imageMenu2.ImageUrl = VariableHelper.ApplicationPath + "images/ico/arrow_up.png";
imageMenu3.ImageUrl = VariableHelper.ApplicationPath + "images/ico/arrow_down.png";
imageSetting.Attributes.Add("onclick", "OnContextMenu('" + set1.ClientID + "',this);");
tdSetting.Attributes.Add("onmousedown", "OptClick('" + lnkOperator.ClientID + "')");
tdMoveUp.Attributes.Add("onmousedown", "OptClick('" + btnMoveUp.ClientID + "')");
tdMoveDown.Attributes.Add("onmousedown", "OptClick('" + btnMoveDown.ClientID + "')");
----------------------------------------------------------------------------------------------------------------------------------
希望对您有所帮助!
2013年10月07日
Kevin.Chen(二爷) 苏州.太仓
O(∩_∩)O~