117 lines
4.8 KiB
HTML
117 lines
4.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
|
||
|
|
<title>PIXI PopupMenu</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../../css/doctest.css">
|
||
|
|
|
||
|
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||
|
|
|
||
|
|
<script src="../../dist/iwmlib.js"></script>
|
||
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||
|
|
</head>
|
||
|
|
<body onload="Doctest.run()">
|
||
|
|
<h1>PopupMenu</h1>
|
||
|
|
<p>
|
||
|
|
A popup menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a click or touch operation. A context menu offers a limited set of choices that are available in the current state, or context, of the application to which the menu belongs. Usually the available choices are actions related to the selected object.
|
||
|
|
</p>
|
||
|
|
<p>Let's look at some popup menu examples:</p><br />
|
||
|
|
<canvas id="canvas" class="interactive"></canvas>
|
||
|
|
<p>
|
||
|
|
What you should see: Some buttons whichs open popup menues.
|
||
|
|
</p>
|
||
|
|
<script class="doctest">
|
||
|
|
const app = new PIXIApp({
|
||
|
|
view: canvas,
|
||
|
|
width: 900,
|
||
|
|
height: 250
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
app.loadSprites([
|
||
|
|
'./assets/popupmenu-1.jpg',
|
||
|
|
'./assets/popupmenu-2.jpg',
|
||
|
|
'./assets/popupmenu-3.jpg',
|
||
|
|
'./assets/popupmenu-4.jpg',
|
||
|
|
'./assets/popupmenu-5.jpg'
|
||
|
|
], sprites => {
|
||
|
|
|
||
|
|
const buttonGroup1 = new ButtonGroup({
|
||
|
|
buttons: [
|
||
|
|
{icon: 'looks_1', action: () => {
|
||
|
|
const popupmenu = new PopupMenu({
|
||
|
|
items: [
|
||
|
|
{label: 'Speichern', action: () => alert('Gespeichert')},
|
||
|
|
{label: 'Editieren', action: () => alert('Editiert')},
|
||
|
|
{label: 'Löschen', action: () => alert('Gelöscht'), disabled: true}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
app.scene.addChild(popupmenu)
|
||
|
|
}},
|
||
|
|
{icon: 'looks_2', action: () => {
|
||
|
|
const popupmenu = new PopupMenu({
|
||
|
|
closeButton: true,
|
||
|
|
closeOnPopup: false,
|
||
|
|
closeOnAction: true,
|
||
|
|
items: [
|
||
|
|
{label: 'Option 1'},
|
||
|
|
{label: 'Option 2'},
|
||
|
|
{label: 'Option 3', action: () => {}},
|
||
|
|
{label: 'Option 4', action: () => {}},
|
||
|
|
{label: 'Option 5'},
|
||
|
|
{label: 'Option 6'}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
popupmenu.x = 400
|
||
|
|
app.scene.addChild(popupmenu)
|
||
|
|
}},
|
||
|
|
{icon: 'looks_3', action: () => {
|
||
|
|
const popupmenu = new PopupMenu({
|
||
|
|
items: [
|
||
|
|
{label: 'Option 01', textStyle: {fill: 0x637a38, fontSize: 14}},
|
||
|
|
{label: 'Option 02', textStyle: {fill: 0x8ca351, fontSize: 14}},
|
||
|
|
{label: 'Option 03', textStyle: {fill: 0xb5d16a, fontSize: 14}},
|
||
|
|
{label: 'Option 04', textStyle: {fill: 0xcedc9c, fontSize: 14}},
|
||
|
|
{label: 'Option 05', textStyle: {fill: 0x8c6e31, fontSize: 14}},
|
||
|
|
{label: 'Option 06', textStyle: {fill: 0xbda038, fontSize: 14}},
|
||
|
|
{label: 'Option 07', textStyle: {fill: 0xe7bc51, fontSize: 14}},
|
||
|
|
{label: 'Option 08', textStyle: {fill: 0xe7cc94, fontSize: 14}},
|
||
|
|
{label: 'Option 09', textStyle: {fill: 0x843d39, fontSize: 14}},
|
||
|
|
{label: 'Option 10', textStyle: {fill: 0xae4a4a, fontSize: 14}},
|
||
|
|
{label: 'Option 11', textStyle: {fill: 0xd7626c, fontSize: 14}},
|
||
|
|
{label: 'Option 12', textStyle: {fill: 0xe8979c, fontSize: 14}}
|
||
|
|
],
|
||
|
|
x: 155,
|
||
|
|
margin: 2
|
||
|
|
})
|
||
|
|
app.scene.addChild(popupmenu)
|
||
|
|
}},
|
||
|
|
{icon: 'looks_4', action: () => {
|
||
|
|
|
||
|
|
sprites.forEach(sprite => sprite.scale.set(.33, .33))
|
||
|
|
|
||
|
|
const popupmenu = new PopupMenu({
|
||
|
|
items: [
|
||
|
|
{content: sprites.get('./assets/popupmenu-1.jpg')},
|
||
|
|
{content: sprites.get('./assets/popupmenu-2.jpg')},
|
||
|
|
{content: sprites.get('./assets/popupmenu-3.jpg')},
|
||
|
|
{content: sprites.get('./assets/popupmenu-4.jpg')},
|
||
|
|
{content: sprites.get('./assets/popupmenu-5.jpg')}
|
||
|
|
],
|
||
|
|
x: 220,
|
||
|
|
margin: 2,
|
||
|
|
padding: 2
|
||
|
|
})
|
||
|
|
app.scene.addChild(popupmenu)
|
||
|
|
}}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
app.scene.addChild(buttonGroup1)
|
||
|
|
}, {resolutionDependent: false})
|
||
|
|
</script>
|
||
|
|
</body>
|