使用 jQuery Menu Widget 作为弹出菜单答案

【问题标题】：Using jQuery Menu Widget as a Pop-Up Menu使用 jQuery Menu Widget 作为弹出菜单
【发布时间】：2012-12-04 02:58:07
【问题描述】：

我正在尝试在我的 Web 表单应用中使用 jQuery Menu Widget。

我整理了一个简单的演示，它的工作原理与上面链接中的示例完全相同。

但我希望菜单是弹出菜单。当用户点击其他地方时，菜单应该会自动关闭。不幸的是，我在 jQuery UI 站点上找不到任何相关信息。

有人能指出一个使用 jQuery Menu Widget 作为弹出菜单的例子吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-menu

【解决方案1】：

我假设您想要一个模式窗口，而不是旧式弹出窗口。为什么不在 CSS 中给菜单 div 一个 display: none; 值，然后有一个脚本让它出现？在 Jquery 中，它就像这样简单：

$("#your_div").fadeIn("slow");

your_div 是菜单 div 的 id，“slow”是动画的速度。 .fadeOut() 是调用实现相反的函数（您的菜单消失）。

如果您希望菜单在用户单击其他位置时消失，您可以创建一个与屏幕一样大的透明 div，并确保通过单击此不可见 div 触发 .fadeout() 函数。

【讨论】：

真的吗？我需要创建一个背景 div 吗？我真的很惊讶 jQuery-UI 菜单不支持这个。我不可能是第一个想要弹出菜单的人。
创建背景 div 是百万种方法之一，您可以以任何您喜欢的方式触发淡出功能。顺便说一句，jQuery-UI 是一个 UI 元素库，而不是效果库。 fadeIn 和 fadeOut 是效果，因此它们包含在 JQuery 中，而不是 Jquery-UI 中。坦率地说，如果这些行为包含在 UI 库中，我会感到困惑。
是的，这是一个机会 - 摆脱 jqueryui，只需使用 jquery + css 创建菜单。可能有很多“解决方案”，但它只是在一个简单的问题上添加更多层。
我建议的解决方案并没有摆脱 jQueryUI。简而言之：您从 JqueryUI 获取菜单，从 Jquery 获取行为。 JqueryUI 的典型用例之一是与 Jquery 结合使用，我认为这不是添加层，而是两个库的简单组合。
@mastazi：我不是在寻找效果。我只想要一个与大多数菜单一样的菜单：如果它们失去输入焦点，它们会自动弹出并关闭。除了创建菜单之外，我的任务还涉及很多工作，所以我希望能找到一个现成的。从这里制作的 cmets 看来，jQuery-UI 菜单小部件不能满足我的需求。

【解决方案2】：

我们组装了一个 jQuery UI 按钮和菜单小部件来为我们提供一个下拉菜单，有关演示和完整代码，请参阅 this fiddle。

对于 HTML，您需要一个按钮和一个嵌套列表，例如：

<button>Please choose...</button>

<ul class="accounts">
    <li> <a href="#">Bank</a>

        <ul>
            <li><a href="#">Lloyds</a>
            </li>
            <li><a href="#">Barclays</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Cash</a>
    </li>
</ul>

CoffeeScript 设置了一个菜单（最初是隐藏的）和用于切换菜单的按钮：

select_account_button = $('button')
accounts_menu = $('.accounts')

# turn the button into a dropdown that shows/hides the menu
select_account_button.button
  icons:
    secondary: "ui-icon-triangle-1-s"
.click ->
  accounts_menu.show().position(
    my: "left top"
    at: "left bottom"
    of: this
  )
  $(document).one "click", ->
    accounts_menu.hide()
  false

# set up the menu (hidden initially)
accounts_menu.hide()
.menu
  select: (event, ui) ->
    console.log "selected"

【讨论】：