0

I'm trying to use the jQuery Menu Widget in my Web Forms app.

I threw together a simple demo and it works exactly like the example in the link above.

But I want the menu to be a pop up menu. And when the user clicks somewhere else, the menu should close automatically. Unfortunately, I could find nothing about this at the jQuery UI site.

Can someone point to an examples of use the jQuery Menu Widget as a pop-up menu?

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466

2 Answers2

1

I assume that you want a modal window, not an old-style popup. Why not just give to the menu div a display: none; value in the CSS, and then having a script to make it appear? In Jquery it would be as easy as something like this:

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

where your_div is the id of the menu div and "slow" is the speed of the animation. .fadeOut() is the function to call to achieve the opposite (your menu disappears).

If you want the menu to disappear when the user clicks somewhere else, you might create a transparent div which is as large as the screen and make sure that the .fadeout() function is triggered by clicking on this invisble div.

mastazi
  • 1,623
  • 26
  • 41
  • Really? I need to create a background div? I'm really amazed that the jQuery-UI menu doesn't support this. I can't be the first person who wanted the menu to pop up. – Jonathan Wood Dec 04 '12 at 03:17
  • create the background div is one of the million ways to do it, you can trigger the fadeOut function in any way you like. By the way, jQuery-UI is a library of UI elements not effects. fadeIn and fadeOut are effects and as such they are included in JQuery, not in Jquery-UI. Frankly if these behaviours were included in the UI library I would find it confusing. – mastazi Dec 04 '12 at 03:22
  • Yeah, this is an opportunity - get rid of jqueryui and just use jquery + css to create a menu. Probably there are plenty of "solutions" but it's just adding more layers on a simple problem. – Julian Dec 04 '12 at 03:23
  • The solution I suggested does not get rid of jQueryUI. in short: you take the menu from JqueryUI and you take the behaviour from Jquery. One of the typical use cases of JqueryUI is to use it in conjunction with Jquery, I think this is not adding layers but just a straightforward combination of two libraries. – mastazi Dec 04 '12 at 03:27
  • @mastazi: I'm not looking for effects. I just want a menu that behaves as most menus do: they pop up and close automatically if they lose input focus. My task involves a lot of work besides creating the menu so I was hoping I could find a ready-made one. From the comments made here, it sounds like the jQuery-UI menu widget is not one that meets my needs. – Jonathan Wood Dec 04 '12 at 03:33
  • Johnatan, if you want to do something when the menu loses focus, then the JqueryUI menu supports the `blur` event http://api.jqueryui.com/menu/#event-blur – mastazi Dec 04 '12 at 07:15
0

We assembled a jQuery UI button and menu widgets to give us a drop-down menu, see this fiddle for a demo and the full code.

For the HTML you need a button and a nested list, such as:

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

The CoffeeScript sets up a menu (hidden initially) and the button to toggle the menu:

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"
Philipp
  • 891
  • 1
  • 11
  • 12