注意:我不是在问我如何修复我的代码,因为我还没有编写很大一部分代码。我问我将如何做我在下面描述的内容(即将foreach循环生成的超链接附加到上下文而不仅仅是用户的名称)。或者更明确的说明方式,我想我希望上下文菜单知道用户右键单击哪个用户。
您好基本上我想要做的是我有一个用户列表,在我的网页上我想要打印一个用户名列表,当右键单击时,会弹出一个上下文菜单,其中包含&#等选项34;发送好友请求,"或"消息用户,"当用户点击其中一个选项时,让我们说"消息用户"选项,用户被发送到另一个页面,其中URL中点击的用户ID作为查询字符串。
这是我到目前为止所做的:一个代码片段,它生成一个超链接列表,当点击该链接时,会将用户带到下一页,并在URL中点击用户的ID
<ul>
<%foreach(UserCredential u in Global.Users) %>
<%{ %>
<li><a href="<%= "Chat.aspx?RecID=" + u.UserID.ToString() %>"><%= u.Name %></a></li>
<%} %>
<ul />
&#13;
这是上下文菜单的代码
<div style="display:none; " id="contextMenu">
<table border="0" cellpadding="0" cellspacing="0"
style="border: thin solid #808080; cursor: default;" width="100px"
bgcolor="White">
<tr>
<td >
<div class="ContextItem">Message User</div>
</td>
</tr>
<tr>
<td >
<div class="ContextItem">Friend User</div>
</td>
</tr>
<tr>
<td >
<div class="ContextItem">Delete</div>
</td>
</tr>
</table>
</div>
&#13;
基本上我想移动&#34; a href =&#34;&lt;%=&#34; Chat.aspx?RecID =&#34; + u.UserID.ToString()%&gt;&#34;&#34;从循环到用户点击ContextItem的位置。
以下是我现在所拥有的:
function ShowMenu(control, e, id) {
var posx = e.clientX + window.pageXOffset + 'px'; //Left Position of Mouse Pointer
var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
a.style.position = 'absolute';
a.style.display = 'inline';
a.style.left = posx;
a.style.top = posy;
var jqContext = '#' + id;
var view = document.getElementById("viewId");
view.href = "Chat.aspx?RecID=" + id;
}
这是我的foreach循环:
<%foreach(UserCredential u in Global.Users) %>
<%{ %>
<li onmousedown="HideMenu('contextMenu');" onmouseup="HideMenu('contextMenu');" oncontextmenu="ShowMenu('contextMenu', event, <%= u.UserID.ToString() %>);"><%= u.Name %></li>
<%} %>
这是我的整个代码。如果有人能弄清楚它有什么问题,请告诉我。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProfilePicTest.aspx.cs" Inherits="ProfilePicTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function ShowMenu(control, e, id) {
var posx = e.clientX + window.pageXOffset + 'px'; //Left Position of Mouse Pointer
var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
a.style.position = 'absolute';
a.style.display = 'inline';
a.style.left = posx;
a.style.top = posy;
var jqContext = '#' + id;
var view = document.getElementById("viewId");
view.href = "Chat.aspx?RecID=" + id;
}
function HideMenu(control) {
document.getElementById(control).style.display = 'none';
}
</script>
</head>
<body onclick="HideMenu('contextMenu');" oncontextmenu="return false">
<form id="form1" runat="server">
<div>
<ul>
<%foreach(UserCredential u in Global.Users) %>
<%{ %>
<li onmousedown="HideMenu('contextMenu');" onmouseup="HideMenu('contextMenu');" oncontextmenu="ShowMenu('contextMenu', event, 3);"><%= u.Name %></li>
<%} %>
</ul>
</div>
<br />
<br />
<div style="display:none; " id="contextMenu">
<table border="0" cellpadding="0" cellspacing="0"
style="border: thin solid #808080; cursor: default;" width="100px"
bgcolor="White">
<tr>
<td >
<a href="#" id="viewId">Send a Friend Request</a>
</td>
</tr>
<tr>
<td >
<a href="#" id="editId">Message</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
&#13;
代码隐藏是空的:
答案 0 :(得分:-1)
如果符合您的期望,请告诉我
function ShowMenu(control, e, id) {
var posx = e.clientX + 'px';
var posy = e.clientY + 'px';
var a = document.getElementById(control);
a.style.position = 'absolute';
a.style.display = 'inline';
a.style.left = posx;
a.style.top = posy;
var jqContext = '#' + control;
var view = document.getElementById("viewId");
view.href = "http://www.google.com/search?q=" + id; //Construct your URL based on parameter
}
function HideMenu(control) {
document.getElementById(control).style.display = 'none';
}
.ContextItem
{
background-color:White;
color:Black;
font-weight:normal;
}
.ContextItem:hover
{
background-color:#0066FF;
color:White;
font-weight:bold;
}
.detailItem
{
background:transparant;
}
.detailItem:hover
{
background-color:#FEE378;
border: 1px outset #222222;
font-weight:bold;
cursor:default;
}
<body onclick="HideMenu('contextMenu');" oncontextmenu="return false">
<div onmousedown="HideMenu('contextMenu');"
onmouseup="HideMenu('contextMenu');"
oncontextmenu="ShowMenu('contextMenu',event,1);"
class="detailItem">
User 1
</div>
<div onmousedown="HideMenu('contextMenu');"
onmouseup="HideMenu('contextMenu');"
oncontextmenu="ShowMenu('contextMenu',event,2);"
class="detailItem">
User 2
</div>
<div onmousedown="HideMenu('contextMenu');"
onmouseup="HideMenu('contextMenu');"
oncontextmenu="ShowMenu('contextMenu',event,3);"
class="detailItem">
User 3
</div>
<br />
<br />
<div style="display:none; " id="contextMenu">
<table border="0" cellpadding="0" cellspacing="0"
style="border: thin solid #808080; cursor: default;" width="100px"
bgcolor="White">
<tr>
<td >
<a href="#" id="viewId"> View</a>
</td>
</tr>
<tr>
<td >
<a href="#" id="editId">Edit</a>
</td>
</tr>
</table>
</div>
</body>