javascript - 使用 jQuery Menu Widget 作为弹出菜单

Question

我正在尝试在我的 Web 窗体应用程序中使用jQuery 菜单小部件。

我拼凑了一个简单的演示，它的工作方式与上面链接中的示例完全相同。

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

有人可以指出使用 jQuery Menu Widget 作为弹出菜单的示例吗？

Answer 1

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

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

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

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

Answer 2

我们组装了一个 jQuery UI 按钮和菜单小部件，为我们提供了一个下拉菜单，请参阅这个 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"