Version

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Packages Brython

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs, propriétés et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Interactions avec Javascript

Modules intégrés propres à Brython

browser
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

Widgets
browser.widgets.dialog
browser.widgets.menu

interpreter
javascript

Travailler avec Brython

Options d'exécution
Test et débogage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

browser.widgets.menu

Ce module permet de construire un menu constitué d'une barre de navigation horizontale et de sous-menus disposés sous forme de menus déroulants.

Il définit une classe unique

Menu(container=document.body, default_css=True)
retourne un objet menu auquel on peut attacher des éléments ou des sous-menus

  • container est l'élément dans lequel la barre de navigation horizontale du menu est insérée
  • default_css indique s'il faut utiliser la feuille de style par défaut fournie par le module (voir "Style CSS" ci-dessous)

Les instances de la classe Menu possèdents les méthodes suivantes:

Menu.add_item(label, callback=None)

ajoute un élément au menu et renvoie cet élément

  • label est le texte de l'élément
  • si callback est fourni, c'est la fonction appelée quand on clique sur l'élément. Cette fonction doit prendre un seul argument, un objet de type événement

Menu.add_link(label, href)

ajoute un lien (balise HTML <A>) au menu et renvoie cet élément

  • label est le texte du lien
  • href est l'adresse associée au lien

Menu.add_menu(label)

ajoute un sous-menu au menu courant et renvoie ce sous-menu, qui est aussi une instance de la classe Menu à laquelle on peut donc aussi ajouter des éléments et des sous-menus

  • label est le nom du sous-menu, affiché dans le menu courant

Exemple

from browser import document, html
from browser.widgets.menu import Menu

zone = document["zone"]
menu = Menu(zone)
file_menu = menu.add_menu("Fichier")

save_menu = file_menu.add_menu("Enregistrer")
choix1 = save_menu.add_menu("choix 1")
choix1.add_item("sous choix 1")
choix1.add_item("sous choix 2")
save_menu.add_item("choix 2")

file_menu.add_item("Ouvrir")
save_menu = file_menu.add_menu("Propriétés")
save_menu.add_item("taille")
save_menu.add_item("sécurité")
file_menu.add_item("Imprimer")

edit_menu = menu.add_menu("Edition")
edit_menu.add_item("Rechercher")

Style CSS

Si l'argument default_css passé au menu vaut True (valeur par défaut), la feuille de style suivante est insérée dans le document courant: 

/* Classes for brython.widgets.menu */

:root {
  --brython-menu-font-family: Arial;
  --brython-menu-font-size: 100%;
  --brython-menu-navbar-bgcolor: CadetBlue;
  --brython-menu-navbar-bgcolor-selected: SkyBlue;
  --brython-menu-navbar-color: #fff;
  --brython-menu-color: #000;
  --brython-menu-submenu-bgcolor: #fff;
  --brython-menu-submenu-bgcolor-selected: SkyBlue;
}

/* Items in the main horizontal navigation bar */
.brython-menu-navbar-item {
    font-family: var(--brython-menu-font-family);
    font-size: var(--brython-menu-font-size);
    background-color: var(--brython-menu-navbar-bgcolor);
    color: var(--brython-menu-navbar-color);
    padding: 0.5em 1em 0.5em 1em;
    cursor: default;
}

.brython-menu-navbar-item:hover {
    background-color: var(--brython-menu-navbar-bgcolor-selected);
}

.brython-menu-navbar-item-selected {
    background-color: var(--brython-menu-navbar-bgcolor-selected);
}

/* submenu, opened by a click on an item */
.brython-menu-submenu {
    font-family: var(--brython-menu-font-family);
    font-size: var(--brython-menu-font-size);
    background-color: var(--brython-menu-submenu-bgcolor);
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: var(--brython-menu-color);
    border-spacing: 0;
}

/* submenu row */
.brython-menu-submenu-row:hover {
    color: var(--brython-menu-color);
    background-color: var(--brython-menu-submenu-bgcolor-selected);
}

.brython-menu-submenu-row-selected {
    color: var(--brython-menu-color);
    background-color: var(--brython-menu-submenu-bgcolor-selected);
}

/*
   cell in a submenu row. Each row has two cells, one for the item label, the
   other one filled with a > if the item has a submenu
*/
.brython-menu-submenu-item {
    font-family: var(--brython-menu-font-family);
    padding: 0.3em 0.3em 0.3em 1em;
    cursor: default;
}

/* end of browser.widgets.menu classes */

Pour personnaliser l'apparence du menu, il faut passer comme argument default_css=False et redéfinir les classes CSS. Le plus simple est de copier-coller la feuille de style ci-dessus et de l'éditer.