| <!DOCTYPE html> | 
 | <html> | 
 |   <head> | 
 |     <title>Panel and ButtonGroup demo</title> | 
 |     <meta charset="utf-8" /> | 
 |     <script src="../js/lib/require.js" async="async"></script> | 
 |     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" /> | 
 |   </head> | 
 |   <body> | 
 |     <nav id="mainButton" style="position: absolute; width: 100%; top: 150px"></nav> | 
 |   </body> | 
 |   <script> | 
 | requirejs.config({ | 
 |   baseUrl: '../js/src', | 
 |   paths : { | 
 |     'lib': '../lib' | 
 |   } | 
 | }); | 
 |  | 
 |  | 
 | require(['buttongroup', 'panel', 'view/result/koralquery'], function (btnClass, panelClass, kqClass) { | 
 |   KorAP.koralQuery = { | 
 |     '@type' : "https://beispiel", | 
 |     'key' : 'Cool' | 
 |   }; | 
 |  | 
 |   var panel = panelClass.create(); | 
 |   var actions = panel.actions; | 
 |  | 
 |   actions.add('Meta',['meta'], function () { | 
 |     console.log(this.button.classList.contains('meta')); | 
 |     view = kqClass.create(); | 
 |     panel.add(view); | 
 |   }); | 
 |  | 
 |   var list = actions.addList('More', ['list']); | 
 |  | 
 |   list.readItems([ | 
 |     ['cool', 'cool', function (e, action) { console.log('really' + this.action()) }], | 
 |     ['very cool', 'veryCool', function (e, action) { console.log('very cool') }] | 
 |   ]); | 
 |  | 
 |   document.getElementById('mainButton').appendChild(panel.element()); | 
 | }); | 
 |  | 
 |  | 
 |   </script> | 
 | </html> |