Jump to content

Basic Menu (Discontinued) 1.2.0

   (5 reviews)

1 Screenshot

About This File

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;
});

 


What's New in Version 1.2.0   See changelog

Released

  • Added pagination, menus will show 10 items at a time now by default. You can move between pages by using right/left arrow keys.
  • Added pagination events pageChanged (per menu) and OnMenuPageChanged. (global)
  • Added itemsPerPage (int) and currentPage (int) properties to BasicMenu class.
  • Like 5

User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

CouldIndex

   0 of 1 member found this review helpful 0 / 1 member

how do I open the menu

Link to review
Captien

   0 of 1 member found this review helpful 0 / 1 member

beast menu....

Link to review
hubba

   1 of 2 members found this review helpful 1 / 2 members

this is a basic menu....

Link to review
Bonus

   0 of 3 members found this review helpful 0 / 3 members

Beast

Link to review
ragempdev

   3 of 3 members found this review helpful 3 / 3 members

when.....

let redBackground = new menuLib.MenuItem("Red Background Item", [255, 255, 255, 255], [255, 0, 0, 200],
{
  selected: function(state)
  {
    mp.game.graphics.notify(`item #${this.idmaybe} is + ${state ? "active" : "inactive..."}`);
  },
  
  clicked: function()
  {
    mp.game.graphics.notify("clicked...");
  }
});

 

Link to review
×
×
  • Create New...