列表HTML/CSS/JavaScript/jQuery中的上下文菜单

在列表模式下实现web菜单的最佳方式是什么

我所拥有的：

• 客户端网站上某些项目的列表视图，与列表视图中的finder（mac）窗口完全相同

我需要的是：

• 一种实现菜单的方法，如右键单击finder或windows资源管理器中的某个项目时出现的菜单（带有“open | open with | rename | delete”等的菜单）

供参考的图像：

要求：

菜单必须在列表视图模式下工作。我尝试了一些不允许选择其中一个菜单项的弹出窗口的实现，因为当鼠标落在屏幕上时，它激活了另一个弹出窗口

菜单必须允许内部按钮以及输入文本区域

菜单必须位于屏幕的右侧或用户用鼠标右键单击的位置。这一点很重要，因为单击列表具有特定功能（显示菜单除外）。因此，我必须允许执行操作或显示菜单。我的想法是左键单击/右键单击或项目的左侧减去20个像素，右侧减去20个像素

理想情况下，它还应该是：

将鼠标悬停在项目的右端，允许用户向下移动鼠标并访问每个菜单，直到找到正确的菜单为止。类似于当有一个带有子菜单的侧菜单时（感觉相同，因为应用的上下文不同）

没有popover的工具提示/箭头会更好。如果不可能的话，它至少可以正确地排列在物体悬停的方向上。我了解到，在对象向右或向左过多的情况下，工具提示/箭头不会自行调整，而是保持在菜单宽度的中心

如果依赖性越少越好。我只喜欢HTML、HTML或CSS，只喜欢HTML、CSS和Javascript，如果不可能，只喜欢HTML、CSS、Javascript、jQuery和jQuery插件。但是，像往常一样，越简单越好

我的列表基于另一个div（窗口右侧）中的许多div（每个项目）。还有一个类似于finder窗口的左侧菜单，它基于一个带float left的div。（这么说是因为信息多总比信息少好）

---

我还没有菜单的工作代码。事实上，我不知道如何开始。我尝试了一些答案，但似乎没有一个符合我的目的。我不确定是否应该使用引导、x-editable或其他任何功能。

我在这里制作了一个类似Mac OS x的内容菜单：

如果没有JavaScript，就无法真正创建上下文菜单。如果在JavaScript中向下滚动，则有一个名为

funcs

的对象。每个项目的HTML格式如下：

<item action="">HTML Code for Menu Item</item>

属性

action

将允许项目在单击时运行JavaScript：

<item action="run">Run Code!</item>

现在，当您单击该项目时。它将发出警报

code。在每个项目中，您可以放置任何HTML，也可以运行任何代码


这将允许您右键单击任意位置以获取上下文菜单。它将允许您放置任何您想要的代码，只使用jQuery而不使用插件，并且通常非常简单。我模仿了OSX优胜美地的popover，甚至直接对颜色进行了采样



此版本您可以添加
exit='noclick'
，并且该特定项不会使该内容消失。
为什么不直接使用
contextmenu
事件？或者双击。这似乎是我需要的。但是，它在我单击的列表项的上下文中如何工作？它知道我点击的是哪个部门吗？（很抱歉提出这样一个外行的问题）另外，如果可能的话，我肯定希望您将其移植到JavaScript中。@hisc 30分钟后，我完成了这个：）太棒了。我能再问一件事吗？（你不需要这样做；如果你能让我走上正确的轨道，我会非常高兴）有可能在里面输入文本吗？我的想法是允许用户从菜单中重命名该项。就像一个带有“实际名称”的文本区域，用户可以在其中键入新名称，在退出文本区域时，新名称将被保存并发送到服务器。@hisc添加了：）您将在JavaScript中看到一个位置，我将
//您的代码放在这里
。将js放入该函数中
<item action="run">Run Code!</item>

var funcs = {
    "run": function () {
        alert('Code!');
    }
};