Help: YUI Button Menu -> MenuItem Click Event

[Michael She-2]

Hi all,

I have setup my Button Menu declaratively using markup as follows:

                    <input type="button" id="DialButton"
name="DialButton" value="Dial" />
                    <select id="DialButtonMenu" name="DialButtonMenu">
                        <option value="">Home</option>
                        <option value="">Office</option>
                        <option value="">Mobile</option>
                        <option value="">Other</option>
                        <option value="">Custom</option>
                    </select>

How do I capture the menu item click?

I tried adding a "selectedItemChange" event to the DialButton, but it
captures MouseOvers/Hovers/Outs as well.

Anyway to just capture the click (i.e. when Home/Office/Other is
selected?)

Thanks!!!

[D. Wayne Fincher]

Take a look at this:
http://www.phphorizons.com/forum/examples/javascript/select-menu.html

I've rendered the button menus just like you did, with HTML. The
javascript source is in the HTML file itself.

The "meat" of my solution to capturing the onclick after the button is
instantiated is as follows:

menuButtons[tempId].getMenu().subscribe('click', function(eType, o) {
  if (YAHOO.lang.isObject(o[1]) === false || o[1].element.tagName !==
'LI') {
    return;
  }
  menuButtons[tempId].set('label', o[1].cfg.getProperty('text'));
});


Alrighty, menuButtons[tempId] happens to be an object that stores both
menus in it. tempId is the id generated by the Dom.generateId()
method. You could supply your own ID of course since your button uses
an ID attribute.


Note: my code was designed to capture all select/input buttons on a
page and render them all with the same block of code, hence the added
gibberish lol.


--- In ydn-javascript@..., "Michael She" <michael.she@...>
wrote:

>
> Hi all,
>
> I have setup my Button Menu declaratively using markup as follows:
>
>                     <input type="button" id="DialButton"
> name="DialButton" value="Dial" />
>                     <select id="DialButtonMenu" name="DialButtonMenu">
>                         <option value="">Home</option>
>                         <option value="">Office</option>
>                         <option value="">Mobile</option>
>                         <option value="">Other</option>
>                         <option value="">Custom</option>
>                     </select>
>
> How do I capture the menu item click?
>
> I tried adding a "selectedItemChange" event to the DialButton, but it
> captures MouseOvers/Hovers/Outs as well.
>
> Anyway to just capture the click (i.e. when Home/Office/Other is
> selected?)
>
> Thanks!!!
>

[Todd Kloots]

Michael -

Use the Button's "getMenu" method to retrieve the YUI Menu instance for
the Button.  From there, you can subscribe to it's "click" event as
detailed on the Menu landing page.  For example:

oButton.getMenu().subscribe("click", function (type, args) {

// Your code here

});

- Todd

Michael She wrote:

>
> Hi all,
>
> I have setup my Button Menu declaratively using markup as follows:
>
> <input type="button" id="DialButton"
> name="DialButton" value="Dial" />
> <select id="DialButtonMenu" name="DialButtonMenu">
> <option value="">Home</option>
> <option value="">Office</option>
> <option value="">Mobile</option>
> <option value="">Other</option>
> <option value="">Custom</option>
> </select>
>
> How do I capture the menu item click?
>
> I tried adding a "selectedItemChange" event to the DialButton, but it
> captures MouseOvers/Hovers/Outs as well.
>
> Anyway to just capture the click (i.e. when Home/Office/Other is
> selected?)
>
> Thanks!!!
>
>