访问官网
Github
Modern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!
Demo • Getting Started • Options • API • Themes • Customize • Changelog
Live Demo and Code Examples
https://nextapps-de.github.io/winbox/
Support this Project
Hello my name is Thomas, also known as ts-thomas. This is a personal project which I fully made in my free time. It is hosted by the Github account from the company Nextapps where I work to give it more exposure. I have never received any financial support for this project from the company Nextapps as some of you might have guessed, since it is a free and open source project. I'm really happy that WinBox.js is getting so much positive feedback and also feature requests. Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level.
Thanks a lot, Thomas (ts-thomas)
Plugins / Add-ons / Extensions
Vue 2 and 3 (a wrapper component that adds the ability to mount Vue components in WinBox.js):
https://github.com/wobsoriano/vue-winbox
A React controlled component for WinBox.js, with full Reactful props and state.:
https://github.com/rickonono3/react-winbox
Getting Started
Get Latest Stable Build (Recommended):
| Bundle: (all assets bundled into one single file: js + css + html + icons) | ||
| winbox.bundle.min.js | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js |
|
Non-Bundled: (js and css are separated, css includes icons as base64) | ||
| winbox.min.js | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/js/winbox.min.js |
| winbox.min.css | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/css/winbox.min.css |
|
Sources: (not bundled at all, images as url to original resources) | ||
| ES6 Modules | Download | The /src/js folder of this Github repository |
| LESS Files (source) | Download | The /src/css folder of this Github repository |
| winbox.css (compiled) | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/src/css/winbox.css |
| src.zip | Download | Download all source files including image original resources. |
Get Latest (NPM):
npm install winbox
Use Bundled Version (Recommended)
The bundled version includes all assets like js, css, html and icon images as base64.
A best practice is to load the library as async and use some modern preloading mechanism:
<html>
<head>
<link rel="preload" href="winbox.bundle.min.js" as="script">
</head>
<body>
<!--
HTML CONTENT
-->
<!-- BOTTOM OF BODY -->
<script src="winbox.bundle.min.js" async></script>
<!-- YOUR SCRIPT -->
<script src="my-script.js" defer></script>
</body>
</html>
When you get troubles with unavailable references then remove the async or defer from this example and invest some minutes later to find out how you can properly load js assets asynchronously today.
Use Non-Bundled Version
The non-bundled version needs to load js and css separately (css already includes icons as base64).
<html>
<head>
<link rel="stylesheet" href="winbox.min.css">
<script src="winbox.min.js"></script>
</head>
<body></body>
</html>
You can also load the non-bundled version in the same way.
ES6 Modules
The ES6 modules are located in src/js/. But you need to load the stylesheet file explicitly since this is just automatically loaded by the bundled version.
<head>
<link rel="stylesheet" href="dist/css/winbox.min.css">
</head>
<script type="module">
import WinBox from "./src/js/winbox.js";
</script>
You can also load modules via CDN, e.g.:
<script type="module">
import WinBox from "https://unpkg.com/winbox@0.2.82/src/js/winbox.js";
</script>
The ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.
Overview
Constructor:
- new WinBox(title, options<key: value>) : winbox
Global methods:
- WinBox.new(title, options<key: value>) : winbox
- WinBox.stack() : Array<winbox>
Instance member 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)
- winbox.hasClass(name)
- winbox.toggleClass(name)
- winbox.addControl(options)
- winbox.removeControl(name)
Instance properties (readonly):
Instance properties (writable):
- winbox.x
- winbox.y
- winbox.width
- winbox.height
- winbox.top
- winbox.right
- winbox.bottom
- winbox.left
- winbox.minwidth
- winbox.minheight
- winbox.maxwidth
- winbox.maxheight
Instance state boolean properties (readonly):
Callback methods:
- winbox.oncreate
- winbox.onshow
- winbox.onhide
- winbox.onclose
- winbox.onfocus
- winbox.onblur
- winbox.onmove
- winbox.onresize
- winbox.onfullscreen
- winbox.onmaximize
- winbox.onminimize
- winbox.onrestore
Options
| Option | Values | Description |
| id | number | string | Set a unique id to the window. Used to define custom styles in css, query elements by context or just to identify the corresponding window |
