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

Question

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

我有什么:

• 客户网站上某些元素的 ListView ，在 ListView 中看起来与查找器 (mac) 窗口完全一样。

我需要什么:

• 一种实现菜单的方法，例如在 finder 或 windows 资源管理器中右键单击某个元素时出现的菜单(带有“打开|打开方式|重命名|删除”等的菜单)

引用图片:

要求:

1. 菜单必须在 ListView 模式下工作。我尝试了一些不允许选择其中一个菜单项的弹出窗口的实现，因为当鼠标在屏幕上向下移动时，它激活了另一个弹出窗口；

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

3. 菜单必须位于屏幕右侧或用户用鼠标右键单击的位置。这很重要，因为单击列表具有特定功能(除了显示菜单)。因此，我必须允许执行操作或显示菜单。我的想法是左键单击/右键单击或元素的左侧减去 20 像素和右侧减去 20 像素。

理想情况下，它也应该是:

1. 在将鼠标悬停在元素的右端时访问，并允许用户向下移动鼠标并访问每个菜单，直到找到正确的菜单。比如当有一个带有子菜单的侧边菜单时(只是相同的感觉，因为它应用的上下文不同)；

2. 没有弹出窗口的工具提示/箭头会更好。如果不可能，至少可以将其与悬停对象的方向正确排列。我了解到，在向右或向左过多的对象中，工具提示/箭头不会自行调整，但仍以菜单宽度为中心。

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

我的列表基于另一个 div(用于窗口右侧)内的许多 div(用于每个元素)。还有一个像查找器窗口一样的左侧菜单，该菜单基于带有 float 左侧的 div。 (只是这么说是因为信息越多越好)。

我还没有菜单的工作代码。实际上，我不确定如何开始。我尝试了一些 stackoverflow 的答案，但似乎没有一个符合我的目的。我不确定我是否应该深入研究 bootstrap、x-editable 或其他任何东西。

Answer 1

我在这里制作了一个类似 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 的弹出窗口之后对此进行了建模，我什至直接对颜色进行了采样。

---

JavaScript port with Element Detection support

---

With special noclick option and input

这个版本你可以添加 exit='noclick' 并且那个特定的元素不会让事情消失。