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

Question

在列表模式下實現網頁菜單的最佳方式是什麼？

我有什麼：

• 的客戶網站，看起來很像在列表視圖的取景器（MAC）窗口中的某些項目的列表視圖。

我需要什麼：

• 方式，可以實現像出現的菜單的菜單，當你右鍵單擊Finder或Windows資源管理器（項目與「打開菜單|開放|重命名|刪除」等）

圖像以供參考：

要求：

1. 該菜單必須以列表視圖模式工作。我嘗試了一些彈出式實現，它們不允許選擇其中一個菜單項，因爲當鼠標停在屏幕上時，它會激活另一個彈出窗口;

2. 菜單必須允許按鈕以及輸入文本區域。

3. 菜單必須位於屏幕的右側，或者只需用鼠標右鍵點擊的位置。這很重要，因爲單擊列表具有特定的功能（其他則顯示菜單）。所以，我必須允許執行操作或顯示菜單。我的想法是左鍵單擊/右鍵單擊或項目左側減去20像素和20像素在右側。

理想，這也將是：

1. 上徘徊項目的右端，並允許用戶向下移動鼠標，直到他找到正確的進入每個菜單訪問。就像是有一個子菜單旁邊的菜單一樣（同樣的感覺，因爲它不是適用的上下文）;

2. 沒有popover的工具提示/箭頭會更好。如果不可能的話，它至少可以按照物體懸停的方向正確排列。我瞭解到，在對象太多的右側或左側，工具提示/箭頭不會自行調整，但仍保持居中於菜單寬度。

3. 如果依賴性較少，則更好。我更喜歡HTML，只是HTML或CSS，只是HTML，CSS和Javascript，或者，如果不可能，只需HTML，CSS，Javascript，jQuery和jQuery插件。但是，像往常一樣，越簡單越好。

我的列表是基於很多div（對於每個項目）在另一個div（對於窗口的右側）中。還有，就像查找器窗口一樣，基於div的左側菜單還有浮動。 （只是說因爲更好的信息而已）。

我還沒有菜單的工作代碼。其實，我不知道如何開始。我嘗試了一些stackoverflow的答案，但似乎沒有適合我的目的。我不確定是否應該引導，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> 

那麼你犯了一個功能run在funcs：

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'和具體的項目不會做的東西消失。