Author: | CodoPixel |
---|---|
Views Total: | 963 views |
Official Page: | Go to website |
Last Update: | April 30, 2021 |
License: | MIT |
Preview:

Description:
JSPanel is a standalone JavaScript library that attaches an accessible popup menu to any trigger element (for example floating action button) you specify.
Users can open or close the popout menu by clicking either the Enter or Space key.
How to use it:
1. Insert the JSPanel’s JavaScript and Stylesheet into the page.
<link rel="stylesheet" src="src/panel-style.css"> <script src="src/JSPanel.js">
2. Load the Font Awesome for the menu icons.
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
3. Create a trigger element on the page.
<button id="panel-controller">+</button>
4. Define your own menu items in an array.
const menuList = [ { id: 0, title: "My Profile", icon: "", // custom icon path fontawesome_icon: "far fa-user", // or use font awesome icons fontawesome_color: "#fff", className: "additional CSS Classes", attributes: [["data-thing", "thing"], ...[]], onclick: () => console.log("clicked on profile") }, { separator: true, }, // ... more menu items here ],
5. Initialize the JSPanel and attach the menu to the trigger element as follows:
const button = document.querySelector("#panel-controller"); const panel = new JSPanel(button, { items: menuList });
6. Determine the position of the popout menu.
const button = document.querySelector("#panel-controller"); const panel = new JSPanel(button, { items: menuList, top: null, bottom: null, left: null, right: null, });
7. Override the default styles of the popup menu.
:root { --panel-background-color: #fff; --panel-box-shadow: 0 0 4px rgba(204, 204, 204, 0.75); --panel-width: 160px; --panel-text-color: #404040; --panel-hover-item-background-color: #f4f6fa; --panel-hover-item-color: #385074; --panel-icon-width: 13px; --panel-separator-color: #dfe3eb; }
8. API methods.
panel.toggleItem(id:number, disable=false); panel.removeItem(id:number); panel.removeItems(ids:number[]); panel.getAllIDS(); panel.getItem(id:number):; panel.addItem(item); panel.replaceItemWith(item, id:number); panel.deletePanel();
Changelog:
v1.2.1 (04/30/2021)
- fix(): add z-index CSS property
v1.2.0 (04/29/2021)
- added new options and methods.
v1.1.3 (04/28/2021)
- include null items
v1.1.2 (04/26/2021)
- Bug fixes