Author: | nextapps-de |
---|---|
Views Total: | 319 views |
Official Page: | Go to website |
Last Update: | November 4, 2021 |
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", // root element root: document.body, // modal mode modal: false, // background color background: "#fff", // border width border: 4, // width/height width: 200, height: 200, // x/y position x: "center", y: "center", // maximize the dialog on init max: false, // position options top: 50, right: 50, bottom: 0, left: 50, });
7. Callback functions.
new WinBox("With Options", { onfocus: function(){ // do something }, onblur: function(){ // do something }, onresize: function(width, height){ // do something }, onmove: function(x, y){ // do something }, onclose: function(){ // do something } });
8. API methods & properties.
const myBox = WinBox(title, options); // methods myBox.mount(src) myBox.unmount(dest) myBox.move(x, y) myBox.resize(width, height) myBox.close() myBox.focus() myBox.hide() myBox.show() myBox.minimize(state) myBox.maximize(state) myBox.fullscreen(state) myBox.setBackground(string) myBox.setTitle(string) myBox.setUrl(string) myBox.addClass(name) myBox.removeClass(name) // properties myBox.id myBox.body myBox.min myBox.max myBox.x myBox.y myBox.width myBox.height myBox.top myBox.right myBox.bottom myBox.left
Changelog:
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