THEMETRIAL

Draggable/Resizable/Maximizable/Minimizable Dialog Window Library – winbox

Author:nextapps-de
Views Total:0 views
Official Page:Go to website
Last Update:April 29, 2021
License:MIT

Preview:

Draggable/Resizable/Maximizable/Minimizable Dialog Window Library – winbox

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="https://www.cssscript.com/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


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.