WoW:Using UIDropDownMenu: Difference between revisions

m
Move page script moved page Using UIDropDownMenu to WoW:Using UIDropDownMenu without leaving a redirect
m (Move page script moved page Using UIDropDownMenu to WoW:Using UIDropDownMenu without leaving a redirect)
 
(8 intermediate revisions by 8 users not shown)
Line 1: Line 1:
UIDropDownMenu can be used to display a basic drop down menu or a series of complex menus such as those that occur when you right click a chat tab. This tutorial explains both.
{{wow/uihowto}}
'''UIDropDownMenu''' is a [[FrameXML]] Frame template that can be used to create contextual menus and dropdown boxes in World of Warcraft. This tutorial explains how to use it in your addon.
 
== Provided functionality ==
The template can be used to create two UI elements: drop-down lists and context menus, shown below. The differences between the two are mostly cosmetic; both allow a multi-level menu to be displayed to the user.
{|
! align="center" | Drop-down list
! align="center" | Context menu
|-
| [[Image:UIDropDownMenu-NoMenu.png]]
| [[Image:UIDropDownMenu-Menu.png|162px]]
|}
Menu items may be disabled, checked, show a color picker swatch, or be styled as a title. The template automatically creates a drop-down box, as well as any list buttons as necessary.
 


== Step 1 : The Button ==
== Step 1 : The Button ==
Line 19: Line 32:


* The standard drop down menu.
* The standard drop down menu.
:[[Image:WoWiki_Example_UIDropDownMenu_NoMenu.jpg|The standard drop down menu.]]
: [[Image:UIDropDownMenu-Example NoMenu.jpg|The standard drop down menu.]]


* Using the "MENU" keyword.
* Using the "MENU" keyword.
: [[Image:WoWiki_Example_UIDropDownMenu_Menu.jpg|Using the "MENU" keyword.]]
: [[Image:UIDropDownMenu-Example_Menu.jpg|Using the "MENU" keyword.]]


== Step 2 : The Menu ==
== Step 2 : The Menu ==
Line 30: Line 43:
         <Scripts>
         <Scripts>
             <OnLoad>
             <OnLoad>
                 UIDropDownMenu_Initialize(this, MyDropDownMenu_OnLoad, "MENU");
                 UIDropDownMenu_Initialize(self, MyDropDownMenu_OnLoad, "MENU");
             </OnLoad>
             </OnLoad>
         </Scripts>
         </Scripts>
Line 45: Line 58:
                 <Scripts>
                 <Scripts>
                     <OnLoad>
                     <OnLoad>
                         UIDropDownMenu_Initialize(this, MyDropDownMenu_OnLoad);
                         UIDropDownMenu_Initialize(self, MyDropDownMenu_OnLoad);
                     </OnLoad>
                     </OnLoad>
                  
                  
Line 56: Line 69:
     </Frame>
     </Frame>


As you have seen from the example, the third variable in ''UIDropDownMenu_Initialize'' changes the appearance of the menu. If the third variable is nil, the menu will be displayed in the fashion of the first example shown in [[#Step 1 : The Button]]. If the third variable is "MENU", which requires the initialization to occur in a seperate frame outside of the button as shown in [[#Step 2 : The Menu]], the menu will be displayed in the fashion of the second example shown in [[#Step 1 : The Button]].
As you have seen from the example, the third variable in ''UIDropDownMenu_Initialize'' changes the appearance of the menu. If the third variable is nil, the menu will be displayed in the fashion of the first example shown in [[#Step 1 : The Button]]. If the third variable is "MENU", which requires the initialization to occur in a separate frame outside of the button as shown in [[#Step 2 : The Menu]], the menu will be displayed in the fashion of the second example shown in [[#Step 1 : The Button]].


The ''OnLoad'' function itself should be as follows. This example adds one option to the menu.
The ''OnLoad'' function itself should be as follows. This example adds one option to the menu.
Line 64: Line 77:
         info.text      = "This is an option in the menu.";
         info.text      = "This is an option in the menu.";
         info.value      = "OptionVariable";
         info.value      = "OptionVariable";
         info.func      = FunctionCalledWhenOptionIsClicked;
         info.func      = FunctionCalledWhenOptionIsClicked  
                  -- can also be done as function() FunctionCalledWhenOptionIsClicked() end;
          
          
         -- Add the above information to the options menu as a button.
         -- Add the above information to the options menu as a button.
Line 81: Line 95:
[[API_ToggleDropDownMenu|Click here]] for more information on [[API_ToggleDropDownMenu|ToggleDropDownMenu]].
[[API_ToggleDropDownMenu|Click here]] for more information on [[API_ToggleDropDownMenu|ToggleDropDownMenu]].


[[Category:HOWTOs|Use UIDropDownMenu]]


== HOWTO: nested submenu structures with UIDropDownMenu ==
== HOWTO: nested submenu structures with UIDropDownMenu ==
Line 100: Line 113:


   -- menu create function
   -- menu create function
   function Test1_DropDown_Initialize(level)
   function Test1_DropDown_Initialize(self,level)
     level = level or 1;
     level = level or 1;
     if (level == 1) then
     if (level == 1) then
Line 142: Line 155:


   ToggleDropDownMenu(1, nil, dropdown, self, -20, 0);
   ToggleDropDownMenu(1, nil, dropdown, self, -20, 0);
== See also ==
* [[UI Object UIDropDownMenu]]: template documentation.
* [[API EasyMenu]]: a table-based interface for dropdowns
[[Category:HOWTOs|Use UIDropDownMenu]]
Anonymous user