列表 HTML / CSS / JavaScript / jQuery 中的上下文菜单
Context menu in list HTML / CSS / JavaScript / jQuery
在列表模式下实现 Web 菜单的最佳方式是什么？
我有：
- 客户网站上某些项目的列表视图，在列表视图中看起来与查找器（mac）一模一样window。
我需要：
- 一种实现菜单的方法，例如在查找器或 windows 资源管理器中右键单击某个项目时出现的菜单（带有 "open | open with | rename | delete" 等的菜单）
参考图片：
要求：
菜单必须在列表视图模式下工作。我尝试了一些不允许 select 菜单项之一的弹出窗口的实现，因为当鼠标在屏幕上向下移动时，它激活了另一个弹出窗口；
菜单必须允许内部按钮以及输入文本区域。
菜单必须位于屏幕右侧或用户用鼠标右键单击的位置。这很重要，因为单击列表具有特定功能（除了显示菜单）。因此，我必须允许执行操作或显示菜单。我的想法是左键单击/右键单击或项目的左侧减去 20 像素和右侧减去 20 像素。
理想情况下，它也是：
在将鼠标悬停在项目的右端时访问，并允许用户向下移动鼠标并访问每个菜单，直到找到正确的菜单。就像当有一个带有子菜单的侧边菜单时（只是相同的感觉，因为它应用的上下文不同）；
没有弹出窗口的工具提示/箭头会更好。如果不可能，至少可以将其与悬停对象的方向正确排列。我了解到，在向右或向左过多的对象中，工具提示/箭头不会自行调整，但仍以菜单宽度为中心。
依赖越少越好。我更喜欢 HTML、HTML 或 CSS、HTML、CSS 和 Javascript，或者，如果不可能，只是 HTML、CSS、Javascript、jQuery 和 jQuery 插件。但是，和往常一样，越简单越好。
我的列表基于另一个 div（window 的右侧）中的很多 div（对于每个项目）。还有一个像取景器 window 一样的左侧菜单，该菜单基于 div 并向左浮动。 （只是这么说是因为信息越多越好）。
我还没有菜单的工作代码。实际上，我不确定如何开始。我尝试了一些 Whosebug 的答案，但 none 似乎符合我的目的。我不确定我是否应该 dive in bootstrap、x-editable 或其他任何内容。
我在这里制作了一个 Mac OS X 喜欢的内容菜单：
Fiddle
没有 JavaScript 就无法真正制作上下文菜单。如果您在 JavaScript 中向下滚动，则会有一个名为 funcs 的对象。每一项都是 HTML 像：
<item action="">HTML Code for Menu Item</item>
还有一个 state 标签，您可以将其应用到灰色：
<item state="gray">Grayed out item</item>
属性 action 将让项目 运行 JavaScript 当你点击它时：
<item action="run">Run Code!</item>
然后你在funcs中创建一个函数run:
var funcs = {
"run": function () {
alert('Code!');
}
};
现在当您单击该项目时。它会提醒 Code!。在每个项目中，您可以输入任何 HTML，并且可以 运行 任何代码。
这将允许您右键单击任意位置以获取上下文菜单。它将允许你放置任何你想要的代码，只使用 jQuery 而无需插件，并且通常非常简单。我在 OS X Yosemite 的 popover 之后建模，我什至直接对颜色进行了采样。
JavaScript port with Element Detection support
With special noclick option and input
这个版本你可以添加 exit='noclick' 而那个特定的项目不会让事情消失。
在列表模式下实现 Web 菜单的最佳方式是什么？
我有：
- 客户网站上某些项目的列表视图，在列表视图中看起来与查找器（mac）一模一样window。
我需要：
- 一种实现菜单的方法，例如在查找器或 windows 资源管理器中右键单击某个项目时出现的菜单（带有 "open | open with | rename | delete" 等的菜单）
参考图片：
要求：
菜单必须在列表视图模式下工作。我尝试了一些不允许 select 菜单项之一的弹出窗口的实现，因为当鼠标在屏幕上向下移动时，它激活了另一个弹出窗口；
菜单必须允许内部按钮以及输入文本区域。
菜单必须位于屏幕右侧或用户用鼠标右键单击的位置。这很重要，因为单击列表具有特定功能（除了显示菜单）。因此，我必须允许执行操作或显示菜单。我的想法是左键单击/右键单击或项目的左侧减去 20 像素和右侧减去 20 像素。
理想情况下，它也是：
在将鼠标悬停在项目的右端时访问，并允许用户向下移动鼠标并访问每个菜单，直到找到正确的菜单。就像当有一个带有子菜单的侧边菜单时（只是相同的感觉，因为它应用的上下文不同）；
没有弹出窗口的工具提示/箭头会更好。如果不可能，至少可以将其与悬停对象的方向正确排列。我了解到，在向右或向左过多的对象中，工具提示/箭头不会自行调整，但仍以菜单宽度为中心。
依赖越少越好。我更喜欢 HTML、HTML 或 CSS、HTML、CSS 和 Javascript，或者，如果不可能，只是 HTML、CSS、Javascript、jQuery 和 jQuery 插件。但是，和往常一样，越简单越好。
我的列表基于另一个 div（window 的右侧）中的很多 div（对于每个项目）。还有一个像取景器 window 一样的左侧菜单，该菜单基于 div 并向左浮动。 （只是这么说是因为信息越多越好）。
我还没有菜单的工作代码。实际上，我不确定如何开始。我尝试了一些 Whosebug 的答案，但 none 似乎符合我的目的。我不确定我是否应该 dive in bootstrap、x-editable 或其他任何内容。
我在这里制作了一个 Mac OS X 喜欢的内容菜单：
Fiddle
没有 JavaScript 就无法真正制作上下文菜单。如果您在 JavaScript 中向下滚动，则会有一个名为 funcs 的对象。每一项都是 HTML 像：
<item action="">HTML Code for Menu Item</item>
还有一个 state 标签，您可以将其应用到灰色：
<item state="gray">Grayed out item</item>
属性 action 将让项目 运行 JavaScript 当你点击它时：
<item action="run">Run Code!</item>
然后你在funcs中创建一个函数run:
var funcs = {
"run": function () {
alert('Code!');
}
};
现在当您单击该项目时。它会提醒 Code!。在每个项目中，您可以输入任何 HTML，并且可以 运行 任何代码。
这将允许您右键单击任意位置以获取上下文菜单。它将允许你放置任何你想要的代码，只使用 jQuery 而无需插件，并且通常非常简单。我在 OS X Yosemite 的 popover 之后建模，我什至直接对颜色进行了采样。
JavaScript port with Element Detection support
With special noclick option and input
这个版本你可以添加 exit='noclick' 而那个特定的项目不会让事情消失。