右键单击使用jQuery的菜单. [英] Right-Click-Menu-using-JQuery....

查看:71
本文介绍了右键单击使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆