Paste the following code into the head section of your site’s HTML.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="src/ax5ui-menu/dist/ax5menu.css">
<script type="text/javascript" src="src/ax5ui-menu/dist/ax5menu.js"></script>
Recommand use font-icon, These days, you can download the font-icon in many service.
<div style="height:200px;background: #9aa9c7;padding: 10px;" id="context-menu-target">
Right click on the mouse.
</div><script type="text/javascript">
var menu;
$(document.body).ready(function () {
menu = new ax5.ui.menu({
position: "absolute", // default position is "fixed"
icons: {
'arrow': '▸'
},
items: [
{
label: "Menu A",
items: [
{label: "Menu A-0"},
{label: "Menu A-1"},
{label: "Menu A-2"}
]
},
{
label: "Menu B",
items: [
{label: "Menu B-0"},
{label: "Menu B-1"},
{label: "Menu B-2"}
]
}
]
});
menu.onClick = function (item, param) {
console.log(item, param);
alert(JSON.stringify(param));
};
$("#context-menu-target").bind("contextmenu", function (e) {
menu.popup(e, {param:{a:1, b:2}}); // toss param to onClick
ax5.util.stopEvent(e.originalEvent);
});
});
</script>
'AX5UI' can be used with Bootstrap theme. The development of the distribution of the various UI plug-in. When you click the link to move to AX5UI index page.
AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.