Author: | victorqribeiro |
---|---|
Views Total: | 2,068 views |
Official Page: | Go to website |
Last Update: | August 27, 2019 |
License: | MIT |
Preview:

Description:
A standalone JavaScript library to replace the default right-click menu with a customizable, radial (ring or pie chart style) context menu.
It is also compatible with the mobile device that enables the visitor to trigger the radial context menu on tap and hold.
How to use it:
Load the main JavaScript into the document.
<script src="src/RadialMenu.js"></script>
Load the Font Awesome for the menu icons. Optional. You can customize the iconic font later.
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
Initialize the radialMenu and replace the default menu items.
const radial = new RadialMenu({ buttons: [ {'text': '\uF000', 'action': () => { alert(1) } }, {'text': '\uF001', 'action': () => { alert(2) } }, {'text': '\uF002', 'action': () => { alert(3) } } ] });
Config the appearance of the radial context menu with the following settings.
const radial = new RadialMenu({ fontFamily : 'FontAwesome', // customize iconic font here fontSize : 14, innerCircle : 50, outerCircle : 100, rotation: 0, shadowColor : 'rgba(0,0,0,0.2)', shadowBlur : 10, shadowOffsetX : 3, shadowOffsetY : 3, backgroundColor : "#EEE", borderColor : "#FFF", textColor : "#000", textBorderColor : "transparent", textShadowColor : "transparent", textShadowBlur : 10, textShadowOffsetX : 3, textShadowOffsetY : 3, })
API methods.
// show the menu radial.show(); // hide the menu radial.hide(); // set the position of the menu radial.setPos(x, y); // add new buttons to the menu addButtons(buttonArray);