Utiliser les menu ESX

Bonjour,

Vous souhaitez utiliser les menus ESX mais vous êtes perdu ? Ne vous inquiétez pas, ce n’est pas si compliqué que ça le parait :wink:

Sommaire

Pour utiliser les menus ESX vous devez avoir :

Les différentes fonctions disponible pour les menus

Seules les fonctions servant à créer des menus seront abordées.

Utilisation Nom de la fonction Lien vers doc ESX
Ouvrir un menu ESX.UI.Menu.Open(type, namespace, name, data, submit, cancel, change, close) Doc Menu Open
Fermer un menu ESX.UI.Menu.Close(type, namespace, name) Doc Menu Close
Fermer tout les menus ESX.UI.Menu.CloseAll() Doc Menu Close "All"
Retourne les menus ouverts ESX.UI.Menu.GetOpened(type, namespace, name) Doc Menus Ouverts "All"
Retourne si un menu particulier est ouvert ESX.UI.Menu.IsOpen(type, namespace, name) Doc Menu Ouvert
Enregistre un type de menu ESX.UI.Menu.RegisterType(type, open, close) Doc Menu Type

Les différents menus ESX

Nom Description Visuel
default Crée un menu "standard" sous forme de tableau à une seule colonne Mon image
dialog Ouvre un champs texte Mon image
list Crée un menu sous forme de tableau à plusieurs colonnes Mon image

Pour commencer, s’assurer qu’ESX est initialisé

ESX = nil

Citizen.CreateThread(function()
    while ESX == nil do
	TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
	Citizen.Wait(0)
    end
end)

Pour expliquer le fonctionnement des menus, j’ai fait une ressource uniquement pour ça. Pour que vous compreniez bien le pourquoi du comment, voila comment j’appel mon menu

Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        if IsControlJustPressed(1, 288) then -- F1
            menu_main()
        end
    end
end)

Menu Default

--[[    Menu Default    ]]
function menu_main()
    local elems = {
        {label = 'Menu 1', value = 'valeurDeVotreMenu'},
        {label = 'Vers Menu Dialog', value = 'dialog'},
        {label = 'Vers Menu List', value = 'list'},
    }

    ESX.UI.Menu.CloseAll()

    ESX.UI.Menu.Open('default', GetCurrentResourceName(), 'menuPerso',{
        title    = 'Menu | Type Default',
        align = 'top-left',
        elements = elems
    },
    function(data, menu)
        if data.current.value == 'valeurDeVotreMenu' then -- Test la valeur après appuis sur "Entrée" pour diriger au "bon endroit"

            votreFonction() -- Fonction qui ammène vers votre sous menu ou l'action désiré.
            
            -- Vous pouvez aussi faire votre code directement dedans

        elseif data.current.value == 'dialog' then
            menu_diag() -- Ouvre le menu dialog
        elseif data.current.value == 'list' then
            menu_list() -- Ouvre le menu list
        end
    end,
    function(data, menu)
        menu.close()
    end)
end

Menu Dialog

--[[    Menu Dialog    ]]
function menu_diag()
    ESX.UI.Menu.Open('dialog', GetCurrentResourceName(), 'menuDiag',{
        title = ('Menu | Type Dialog')
    },
    function(data, menu)
        local var = data.value -- Si nombre, tonumber(data.value) pour vérifier que la valeur soit bien numérique

        if var == nil then -- Test de la valeur. Si nil (null) affichage de l'erreur

            ESX.ShowNotification('Erreur à personnaliser')
        else
            menu.close()
            maFonctionDeTraitement(var) -- Ou TriggerEvent('nomEvent', var), ESX.TriggerServerCallback(name, cb, var), etc
 
        end
    end,
    function(data, menu)
        menu.close()
        menu_main() -- Permet de retourner au menu principal à l'appuis sur backspace
    end)
end

Menu List

--[[    Menu List    ]]
function menu_list()
    local elements = {
        head = {('Menu | Type List'), ('Colonne 2'), ('Colonne 3')},
        rows = {}
    }
    
    table.insert(elements.rows,
        {
            data = "Menu | Type List",
            cols = {
                "Choix 1.1",
                '{{' .. ('Option 1.1.1') .. '|bouton111}} {{' .. ('Option 1.1.2') .. '|bouton112}}',
                "Choix 1.2"..'{{' .. ('Option 1.2.1') .. '|bouton121}} {{' .. ('Option 1.2.2') .. '|bouton122}}',
            }
        })
    
    table.insert(elements.rows,
        {
            data = "menuList",
            cols = {
                "Choix 2.1",
                '{{' .. ('Option 2.1.1') .. '|bouton211}} {{' .. ('Option 2.1.2') .. '|bouton212}}',
                "Choix 2.2"..'{{' .. ('Option 2.2.1') .. '|bouton221}} {{' .. ('Option 2.2.2') .. '|bouton222}}',
            }
        })
    
    ESX.UI.Menu.Open('list', GetCurrentResourceName(), 'menuList', elements, function(data, menu)
        if data.value == 'bouton111' then
            ESX.ShowNotification(data.value) -- Code si clique sur Bouton 1.1.1
        elseif data.value == 'bouton112' then
            -- Code si clique sur Bouton 1.1.2
        elseif data.value == 'bouton121' then
            -- Code si clique sur Bouton 1.2.1
        elseif data.value == 'bouton122' then
            -- Code si clique sur Bouton 1.2.2
        elseif data.value == 'bouton211' then
            -- Code si clique sur Bouton 2.1.1
        elseif data.value == 'bouton212' then
            -- Code si clique sur Bouton 2.1.2
        elseif data.value == 'bouton221' then
            -- Code si clique sur Bouton 2.2.1
        elseif data.value == 'bouton222' then
            -- Code si clique sur Bouton 222
        end
    
    end, function(data, menu)
        menu.close()
        menu_main() -- Permet de retourner au menu principal à l'appuis sur backspace
    end)
end

Quelques explications

  • label : la valeur de ce champs est le nom/titre de la ligne qui s’affichera dans votre menu
  • value : C’est la valeur qui sera tester après dans les conditions if data.current.value ou data.value
  • title : C’est le titre, ou nom, de votre menu
  • align : Positionnement de votre menu, menu default uniquement, sur votre écran (left, right, top, bottom, center, top-left, bottom-left, top-right, bottom-right)
  • elements : Variable qui retourne au menu ESX les éléments devant se trouver dans votre menu
  • nomMenu.close() : Permet de fermer un menu ciblé qui est ouvert
2 « J'aime »