Basic Menu (Discontinued) 1.2.0

This project is discontinued, consider using NativeUI instead.

 

Bare-bones menu script.

Installing:

Put basicmenu into your server's client_packages directory, then you can add const whatever = require("basicmenu"); to the clientside scripts that you want to add a menu. Example code explains this better.

Properties & Functions:

BasicMenu

• title | Get & Set | Title of the menu. (string)
• x | Get & Set | X position of the menu. (float)
• y | Get & Set | Y position of the menu. (float)
• items | Get & Set | An array containing all items of the menu. (MenuItem array)
• hoverItem | Get & Set | Index of the item you're hovering on with your cursor, -1 if not hovering on anything. (int)
• visible | Get & Set | Visibility of the menu. (bool)
• disableESC | Get & Set | Allow/disallow menu from being closed by pressing ESC key. (bool)
• titleFont | Get & Set | Font ID of the title. (int)
• titleColor | Get & Set | Text color of the title. (array containing rgba)
• itemsPerPage | Get & Set | How many items are visible on a page of the menu. (int)
• currentPage | Get & Set | Current page of the menu. (int)
• setBanner(lib, banner) | Sets the menu's banner to another texture, setBanner("shopui_title_carmod", "shopui_title_carmod") will set the menu banner to be Los Santos Customs one for example.

MenuItem

• title | Get & Set | Title of the item. (string)
• disabled | Get & Set | Whether the item is able to be selected or not. (bool)
• textColor | Get & Set | Color of the item's title. (array containing rgba)
• bgColor | Get & Set | Color of the item's background. (array containing rgba)
• icon | Get & Set | ID of the item's icon. (int)
• font | Get & Set | Font ID of the title. (int)
• outline | Get & Set | Outline of the item. (bool)
• shadow | Get & Set | Shadow of the item. (bool)
• rightText | Get & Set | Right text of the item. (string)

Icon IDs:

You can put icons to menu items (even though there are only 3 options) if you want to. Just do myMenuItem.icon = desired icon ID.

MenuItemIcons.None (0) = No icon

MenuItemIcons.Lock (1) = Lock icon

MenuItemIcons.Tick (2) = Tick/checkmark icon 

Events:

There are three events, see example for how to use them.

OnMenuItemSelected(menu, selectedMenuItem, selectedMenuItemIndex)
/*
    Will be called when a menu item is clicked on/selected.
    
    menu - The menu that contained the selected item. (BasicMenu)
    selectedMenuItem - The menu item that was selected. (MenuItem)
    selectedMenuItemIndex - Index of the menu item on the selected menu. (int)
*/

OnMenuPageChanged(menu, oldPage, newPage)
/*
    Will be called when a menu's page is changed.
    
    menu - The menu that had a page change. (BasicMenu)
    oldPage - Old page. (int)
    newPage - New page. (int)
*/

OnMenuClosed(menu)
/*
    Will be called when a menu is closed.
    
    menu - The menu that was closed. (BasicMenu)
*/

Controls:

Hovering on an item and left clicking - select item

ESC - close menu (if disableESC isn't set to true)

Left Arrow - previous page

Right Arrow - next page

Example Script:

const menuLib = require("basicmenu");

// Creating a menu
// you can just do: let exampleMenu = new menuLib.BasicMenu("Test Menu", 0.5, 0.4);
let exampleMenu = new menuLib.BasicMenu("Test Menu", 0.5, 0.4, "commonmenu", "interaction_bgd", {
    itemSelected: function(item, itemIndex) {
        mp.gui.chat.push(`MenuEvent(${this.title}) - itemSelected: ${item.title} - ${itemIndex}`);
    },

    pageChanged: function(oldPage, newPage) {
        mp.gui.chat.push(`MenuEvent(${this.title}) - pageChanged: ${oldPage} to ${newPage}`);
    },

    closed: function() {
        mp.gui.chat.push(`MenuEvent(${this.title}) - close`);
    }
});

exampleMenu.itemsPerPage = 5; // make the menu show 5 items per page, this is default by 10

let normalItem = new menuLib.MenuItem("Normal Item");
normalItem.rightText = "Free";
exampleMenu.items.push(normalItem);

let redBackground = new menuLib.MenuItem("Red Background Item", [255, 255, 255, 255], [255, 0, 0, 200]);
redBackground.rightText = "~g~$500";
exampleMenu.items.push(redBackground);

let greenText = new menuLib.MenuItem("Green Text Item", [0, 255, 0, 255]);
exampleMenu.items.push(greenText);

// You won't be able to click on disabled items.
let disabledItem = new menuLib.MenuItem("Disabled Item");
disabledItem.disabled = true;
exampleMenu.items.push(disabledItem);

let itemWithIcon = new menuLib.MenuItem("Item with Icon", [255, 255, 255, 255], [0, 0, 0, 200], function() {
    mp.gui.chat.push("You selected the item with icon, why?");
});
itemWithIcon.icon = menuLib.MenuItemIcons.Tick;
itemWithIcon.rightText = "Pretty cool";
exampleMenu.items.push(itemWithIcon);

let disabledWithIcon = new menuLib.MenuItem("Top Secret");
disabledWithIcon.disabled = true;
disabledWithIcon.icon = menuLib.MenuItemIcons.Lock;
exampleMenu.items.push(disabledWithIcon);

// You can disable ESC menu closing by using disableESC property.
exampleMenu.disableESC = true;

// This is important as menus are not visible by default.
exampleMenu.visible = true;

// Events
// OnMenuItemSelected, will be called when a menu item is clicked on.
mp.events.add("OnMenuItemSelected", (menu, selectedItem, selectedItemIndex) => {
    mp.gui.chat.push(`Item selected on menu (${menu.title}) - ${selectedItem.title} (Index: ${selectedItemIndex})`);
});

// OnMenuPageChanged, will be called when a menu's current page changes.
mp.events.add("OnMenuPageChanged", (menu, oldPage, newPage) => {
    mp.gui.chat.push(`Menu page changed (${menu.title}) - ${oldPage} to ${newPage}`);
});

// OnMenuClosed, will be called when a menu item is closed.
mp.events.add("OnMenuClosed", (menu) => {
    mp.gui.chat.push(`Menu closed (${menu.title})`);
});

// F6 key will toggle the visibility of exampleMenu
mp.keys.bind(0x75, false, () => {
    exampleMenu.visible = !exampleMenu.visible;
});