Question

我正在尝试用jquery鼠标右键菜单来增强我的页面，但是在构建正确的结构时很难轻松填充它。

目前，我的网页包含（其中包括）用户要审核的项目列表。（html表）基于用户角色以及行的当前状态和上下文，用户可以对每行数据采取各种动作之一。（批准，拒绝，将其推荐给其他人，等等。）如果该选项可用，我的ASP.Net页面通过将行内图像按钮的可见性设置为true来处理此问题。我可以控制每个按钮的Cssclass，并将例如“approve”按钮的类设置为“approvebtn”。

现在我想用正确的菜单增强我的网站。我正在与Cory S.N.扩展我的网站。 LaViska的jQuery上下文菜单插件 - http://abeautifulsite.net/notebook/80

此插件允许使用用户控制的上下文菜单覆盖任何元素的默认右键鼠标行为。菜单作为无序列表插入到页面中，并在需要时显示。

            <ul id="rightMenu" class="contextMenu">
                <li class="details"><a href="#details">Details</a> </li>
                <li class="addnote"><a href="#addnote">AddNote</a> </li>
                <li class="listnote"><a href="#listnote">ShowNotes</a> </li>
                <li class="approve"><a href="#approve">Approve</a> </li>
                <li class="reject"><a href="#reject">Reject</a> </li>
                <li class="release"><a href="#release">Release</a> </li>
                <li class="takeover"><a href="#takeover">Takeover</a> </li>
            </ul>

当点击右侧菜单上的某些内容时，您的应用会收到回调，并且您可以查询该操作（虚假href元素）以查看它是哪个项目。我非常喜欢这个菜单，因为它使用简单，完全是CSS样式。

但是，我需要做一些这个插件似乎并不支持的东西。我需要在行与行之间更改菜单上可用的项目。基本上如果行中可以使用Imagebutton（例如批准），那么它的相应菜单项也应该存在。

通过稍微更改插件，我可以在显示之前访问菜单，在显示菜单之前调用我的功能。这是有效的，但我必须写的逻辑似乎是如此蛮力，必须有更好的方式......

在我的回调中：

 function jimsbuggeredfunction(menu,el)

“el”是右键单击的元素（通常是表格单元格），“menu”是右键单击绑定的菜单。（所以我应该使用那个名字而不是硬编码到#rightMenu'）

因此，“if”行会查明包含“右键单击”元素的表行是否包含特定按钮（按类名称），如果启用了菜单项，则禁用该行。对于我希望逐行灵活的每个菜单项，此过程将继续。

function jimsbuggeredfunction(menu,el) {

 if($(el).parents("tr:eq(0)").find('.approvebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#approve');
 else
    $('#rightMenu').disableContextMenuItems('#approve');

 if($(el).parents("tr:eq(0)").find('.rejectbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#reject');
 else
    $('#rightMenu').disableContextMenuItems('#reject');

 if($(el).parents("tr:eq(0)").find('.releasebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#release');
 else
    $('#rightMenu').disableContextMenuItems('#release');

 if($(el).parents("tr:eq(0)").find('.takeoverbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#takeover');
 else
    $('#rightMenu').disableContextMenuItems('#takeover');

 if($(el).parents("tr:eq(0)").find('.revertbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#revert');
 else
    $('#rightMenu').disableContextMenuItems('#revert');

 if($(el).parents("tr:eq(0)").find('.removebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#remove');
 else
    $('#rightMenu').disableContextMenuItems('#remove');

 if($(el).parents("tr:eq(0)").find('.addnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#addnote');
 else
    $('#rightMenu').disableContextMenuItems('#addnote');

 if($(el).parents("tr:eq(0)").find('.listnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#listnote');
 else
    $('#rightMenu').disableContextMenuItems('#listnote');
};

必须有一个更好的方法来设置它，所以它也只是忽略我想要一直显示的菜单项）但它现在正在逃避我。有没有更好的方法来实现这一目标？

谢谢，

吉姆

Answer 1

我会找到一些方法来创建两个ID之间的映射，以及一些更系统的方法来查找相关按钮。例如，如果按钮总是属于某个具有类的单元格，让我们说“buttonclass”，那么这样的东西应该有效：

var mapping = {
  takeoverbtn: '#takeover',
  listnotebtn: '#listnote'
  // ...
};


function jimsbuggeredfunction(menu,el) {
    var buttontype = $(el).parents("tr:eq(0)").find('.buttonclass').children().attr("class");
    $('#rightMenu').disableContextMenuItems(mapping[buttontype]);
}

我的jQuery有点生疏，可能有一种更清晰的方式来检索buttontype，但这个一般的想法应该有效。

jquery中对象的Javascript语法

1 个答案: