September 22, 2022

Professional HTML5 Window Manager for The Web | winbox.js

winbox is a modern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, and open-source!

winbox is an open-source, dependency-free JavaScript library for creating draggable, resizable, and zoomable dialog windows on the application.

More features:

  • 2 pre-made themes: light and modern.
  • Highly customizable.
  • It is allowed to expand the window to full screen.
  • Allows reducing media in tab.
  • Supports any content: embedded, iframe, HTML.

How to make use of it:

1. Import the winbox’s JavaScript and CSS into the doc.

<!-- 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 material from a component throughout the doc.

<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 material 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 choices 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 features.

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 strategies & 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

Draggable/Resizable/Maximizable/Minimizable Dialog Window Library, winbox Plugin/Github


See Demo And Download

Official Website(nextapps-de): Click Here

This superior jQuery/javascript plugin is developed by nextapps-de. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.