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/ax5ui-menu/dist/ax5menu.css">
<script type="text/javascript" src="src/ax5ui-menu/dist/ax5menu.js"></script>
HTML
<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"
onClick: function () {
// console.log(this);
},
items: [
{
label: "Menu A",
items: [
{
check: {type: 'checkbox', name: 'A', value: '0', checked: false},
label: "Menu A-0"
},
{
check: {type: 'checkbox', name: 'A', value: '1', checked: true},
label: "Menu A-1"
}
]
},
{divide: true},
{
check: {type: 'radio', name: 'radioName', value: '1', checked: false},
label: "Menu Parent 2"
},
{
check: {type: 'radio', name: 'radioName', value: '2', checked: false},
label: "Menu Parent 3"
},
{
check: {type: 'radio', name: 'radioName', value: '3', checked: false},
label: "Menu Parent 4"
}
]
});
$("#context-menu-target").bind("contextmenu", function (e) {
menu.popup(e);
ax5.util.stopEvent(e);
// e || {left: 'Number', top: 'Number', direction: '', width: 'Number'}
});
});
</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.