Question

我正在尝试在我的Web窗体应用中使用jQuery Menu Widget。

我把一个简单的演示组合在一起，它的工作方式与上面链接中的示例非常相似。

但我希望菜单是一个弹出式菜单。当用户点击其他地方时，菜单应自动关闭。不幸的是，我在jQuery UI网站上找不到任何相关内容。

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

Answer 1

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

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

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

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

Answer 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"

使用jQuery Menu Widget作为弹出菜单

2 个答案: