Pure JavaScript Customizable Floating Sidebar Button Module (Original)

Last Updated: 2020-01-14 22:15:36
Changelog:
0. Added drag-and-drop support.
1. Added a darkening effect when hovering over nodes.
2. Added a z-index parameter.
3. Added a fan-shaped animation effect (fan-in).
Last Updated: 2020-01-09 23:27:57
float-module
This is a pure JavaScript floating sidebar button panel plugin. It does not depend on jQuery or require any HTML code. Simply include a single line of JavaScript to get started, then initialize it with a new instance. That's it! The file is lightweight (only 4.7 KB for the JS file), the code is easy to extend, and the API is thoroughly documented. Most importantly, the author continues to maintain and update it, with more animations and new features planned for future releases.
1. Supports four basic initialization positions: top-left, bottom-left, top-right, and bottom-right, with parameters for fine-grained adjustments.
2. Supports custom theme colors, icons, animations, and more.
3. Requires only one JavaScript file (4.7 KB) and can be initialized with a single line of code. No jQuery dependency or HTML code required.
4. Includes FontAwesome 4.7.0 with 675 icons. You can also skip this icon library and use your own.
5. For the complete API and examples, download and view the float_module.html demo file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // Quick Startvar fm = new FloatModule({ btn_config:[{ icon:'fa fa-plus' },{ icon:'fa fa-qq', title:'hello qq', click: function () { alert("hello qq"); } },{ icon:'fa fa-github', title:'hello github', click: function () { alert("hello github"); } }]}); |