Author: | nextapps-de |
---|---|
Views Total: | 286 views |
Official Page: | Go to website |
Last Update: | July 13, 2023 |
License: | MIT |
Preview:

Description:
winbox is an open-source, zero-dependency JavaScript library for creating draggable, resizable, maximizable, and minimizable dialog windows on the app.
More Features:
- 2 pre-built themes: Light and Modern.
- Highly customizable.
- Allows to expand the window to fullscreen.
- Allows to minimize the modal into a tab dock.
- Supports any content: inline, iframe, HTML.
How to use it:
1. Import the winbox’s JavaScript and CSS into the document.
<!-- Core Stylesheet --> <link rel="stylesheet" href="dist/css/winbox.min.css"> <!-- Themes --> <link rel="stylesheet" href="dist/css/themes/modern.min.css"> <link rel="stylesheet" href="dist/css/themes/white.min.css"> <!-- Core JavaScript --> <script src="dist/js/winbox.min.js"></script> <!-- OR ... --> <script src="dist/winbox.bundle.js"></script>
2. Create a default dialog window and specify the title & message as follows:
new WinBox("Default Dialog", { title: "Default Dialog", html: "<h1>HTML Content</h1>" });
3. Or load content from an element within the document.
<div id="backstore" style="display: none"> <div id="content"> Dialog Content Here </div> </div>
new WinBox("Mount Example", { mount: document.getElementById("content").cloneNode(true) });
4. Or load external content in an iframe.
new WinBox("Iframe Example", { url: "/path/to/page/" });
5. Specify the theme of the dialog window.
new WinBox("Iframe Example", { class: "modern", // 'white', or 'customTheme' });
6. More options to customize the dialog window.
new WinBox("With Options", { // unique ID id: "my-window", // CSS z-index index: 10, // root element mount: document.body, // width/height (px or %) width: 200, height: 200, minwidth: 0, maxwidth: 400, minheight: 0, maxheight: 400, // auto resize autosize: true, // modal mode modal: false, // background color background: "#fff", // border width border: 4, // x/y position x: "center", y: "center", // maximize/minimize the dialog on init max: false, min: false, // hide the dialog on init hidden: false, // position options top: 50, right: 50, bottom: 0, left: 50, // custom icon in title bar icon: '', // additional CSS classes class: '', });
7. Callback functions.
new WinBox("With Options", { oncreate: function(options){ // do something }, onshow: function(){ // do something }, onhide: function(){ // do something }, onfocus: function(){ // do something }, onblur: function(){ // do something }, onresize: function(width, height){ // do something }, onmove: function(x, y){ // do something }, onclose: function(force){ // do something }, onfullscreen: function(){ // do something }, onminimize: function(){ // do something }, onmaximize: function(){ // do something }, onrestore: function(){ // do something }, });
8. API methods & properties.
const myBox = WinBox(title, options); // methods winbox.mount(src) winbox.unmount(dest) winbox.setUrl(string) winbox.setTitle(string) winbox.setIcon(url) winbox.move(x, y) winbox.resize(width, height) winbox.close(boolean) winbox.focus(state) winbox.blur(state) winbox.hide(state) winbox.show(state) winbox.minimize(state) winbox.maximize(state) winbox.fullscreen(state) winbox.restore(state) winbox.setBackground(string) winbox.addClass(name) winbox.removeClass(name) // properties winbox.id winbox.index winbox.window winbox.body winbox.x winbox.y winbox.width winbox.height winbox.top winbox.right winbox.bottom winbox.left winbox.minwidth winbox.minheight winbox.maxwidth winbox.maxheight winbox.min winbox.max winbox.full winbox.hidden winbox.focused
Changelog:
v0.2.82 (07/13/2023)
- improve event delegation
v0.2.8 (07/11/2023)
- fix control classes
- fix split screen minimized positions
v0.2.73 (07/01/2023)
- bugfix
v0.2.6 (09/06/2022)
- use passive listeners
v0.2.5 (08/20/2022)
- support custom toolbar icon
- support custom toolbar controls
- support custom toolbar height
- support custom window index
- support window autosize
- support new callbacks
- improve drag pointer calculation when outside the viewport
- improve toolbar template
- improve window states
- improve performance
v0.2.2 (08/08/2022)
- update dependencies
v0.2.1 (11/04/2021)
- new release and hotfix
v0.2.0 (05/27/2021)
- Add split screen feature
v0.1.91 (05/08/2021)
- fix lost pointer when hovering iframe