右键单击使用jQuery的菜单. [英] Right-Click-Menu-using-JQuery....
本文介绍了右键单击使用jQuery的菜单.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
I have a scenario where a user can select particular text and right click on a textbox, a context menu is
displayed and he can select a particular item from the list. Then, that text
will be appended to the appropriate textbox.
Ex:Context Menu have items like Name,Address,Number,Country..If i selected text as chennai and right click then selected Address in the menu list then the selected text(Ex:Chennai) display in the address textbox....
这是我的上下文菜单编码会出现
Menu.aspx
Here is My coding for context menu wil appear
Menu.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="RightClickMenu.Menu" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.js" type="text/javascript"></script> <link href="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<%-- <link href="SampleScripts/Menu.css" rel="Stylesheet" type="text/css" />--%>
<script type="text/javascript">
$(document).ready(function () {
$("input:text").focus(function () { $(this).select(); });
$("#<%= txtEnterUrl.ClientID%>").contextMenu({
menu: 'myMenu'
}, function (action, el, pos) {
});
$('#Name').click(clickHandler);
$('#live').live('click', clickHandler);
function clickHandler() {
alert("Clicked");
return false;
}
});
</script>
</head>
<body>
<ul id="myMenu" class="contextMenu">
<li id="Name"><a href="#Name">Name</a></li>
<li id="Number"><a href="#Number">Number</a></li>
<li id="Address"><a href="#Address">Address</a></li>
<li id="Country"><a href="#Country">Country</a></li>
</ul>
<form id="form1" runat="server">
<table style="width:100%; height:411px;">
<tr>
<td style="width:100%; height:20%">
<asp:Panel ID="pnlHeader" runat="server" Height="59px">
<asp:Label ID="lblEnterUrl" runat="server" Text="Enter Url" Font-Bold="true"
style="z-index: 1; left: 271px; top: 66px; position: absolute" ></asp:Label>
<asp:TextBox ID="txtEnterUrl" runat="server" Text="Chennai;
style="z-index: 1; left: 405px; top: 59px; position: absolute; width: 505px; height: 32px" ></asp:TextBox>
</asp:Panel>
</td>
</tr>
<tr>
<td style="width:100%; height:80%">
<asp:Label ID="lblName" runat="server" Text="Name"
style="z-index: 1; left: 278px; top: 161px; position: absolute"></asp:Label>
<asp:TextBox ID="txtName" runat="server"
style="z-index: 1; left: 376px; top: 159px; position: absolute" ></asp:TextBox>
<asp:TextBox ID="txtNumber" runat="server"
style="z-index: 1; left: 375px; top: 256px; position: absolute"></asp:TextBox>
<asp:Label ID="lblAddress" runat="server" Text="Address"
style="z-index: 1; left: 585px; top: 160px; position: absolute; height: 19px; width: 64px"></asp:Label>
<asp:TextBox ID="txtAddress" runat="server"
style="z-index: 1; left: 707px; top: 158px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblCountry" runat="server" Text="Country"
style="z-index: 1; left: 584px; top: 259px; position: absolute"></asp:Label>
<asp:TextBox ID="txtCountry" runat="server"
style="z-index: 1; left: 699px; top: 261px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblNumber" runat="server" Text="Number"
style="z-index: 1; left: 275px; top: 256px; position: absolute"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
推荐答案
(文档).ready( function (){
(document).ready(function () {
(" () span>).focus(函数(){
("input:text").focus(function () {
(此).select();});
(this).select(); });
这篇关于右键单击使用jQuery的菜单.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文