144 |
145 |
WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!
146 |
147 |
Show Example
148 |
149 |
150 |
151 |
152 | 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.
153 |
154 |
155 | 
156 |
157 |
158 | 
159 |
160 |
161 | 
162 |
163 |
164 | 
165 |
166 |
167 | 
168 |
169 |
170 | 
171 |
172 |
173 | Thanks a lot,
174 | Thomas (ts-thomas)
175 |
176 |
177 |
178 |
179 | Load Library (Bundle)
180 |
181 |
<head>
182 | <script src="dist/winbox.bundle.min.js"></script>
183 | </head>
184 |
185 |
186 | Load Library (Non-Bundle)
187 |
188 |
<head>
189 | <link rel="stylesheet" href="dist/css/winbox.min.css">
190 | <script src="dist/js/winbox.min.js"></script>
191 | </head>
192 |
193 |
194 |
195 |
196 | Class Constructor
197 |
198 |
WinBox(title, options<key: value>)
199 |
200 |
201 |
202 |
203 |
You can open the browser dev tools and copy and paste the js-code blocks into the console and play with them.
204 |
205 |
206 |
207 | Basic Window
208 |
209 |
new WinBox("Basic Window");
210 |
211 |
Run Code
212 |
213 |
214 |
215 |
216 | Custom Root
217 |
218 |
new WinBox("Custom Root", {
219 | root: document.querySelector("main")
220 | });
221 |
222 |
Run Code
223 |
224 |
225 |
226 |
227 | Custom Border
228 |
229 |
new WinBox("Custom Border", {
230 | border: "0.3em"
231 | });
232 |
233 |
Run Code
234 |
235 |
236 |
237 |
238 | Custom Color
239 |
240 |
new WinBox({
241 | title: "Custom Color",
242 | background: "#ff005d",
243 | border: 4
244 | });
245 |
246 |
Run Code
247 |
248 |
249 |
250 |
251 | Custom Icon (Titlebar)
252 |
253 |
new WinBox({
254 | title: "Custom Icon",
255 | icon: "demo/wikipedia.svg",
256 | background: "#252b4e"
257 | });
258 |
259 |
Run Code
260 |
261 |
262 |
263 |
264 | Limit Viewport
265 |
266 |
new WinBox("Limit Viewport", {
267 | top: 50,
268 | right: 50,
269 | bottom: 0,
270 | left: 50
271 | });
272 |
273 |
Run Code
274 |
275 |
276 |
277 |
278 | Splitscreen
279 |
280 |
new WinBox("Splitscreen (Left)", {
281 | right: "50%",
282 | max: true
283 | });
284 |
285 | new WinBox("Splitscreen (Right)", {
286 | left: "50%",
287 | max: true
288 | });
289 |
290 |
Run Code
291 |
292 |
293 |
294 |
295 | Custom Position / Size
296 |
297 |
new WinBox({
298 | title: "Custom Position / Size",
299 | x: "center",
300 | y: "center",
301 | width: "50%",
302 | height: "50%"
303 | });
304 |
305 |
Run Code
306 |
307 |
308 |
309 |
310 | Modal Window
311 |
312 |
new WinBox("Modal Window", {
313 | modal: true
314 | });
315 |
316 |
Run Code
317 |
318 |
319 |
320 |
321 | Set innerHTML
322 |
323 |
new WinBox({
324 | title: "Set innerHTML",
325 | html: "<h1>Lorem Ipsum</h1>"
326 | });
327 |
328 |
Run Code
329 |
330 |
331 |
332 |
333 | Mount DOM (Cloned)
334 |
335 |
336 |
<div id="backstore" style="display: none">
337 | <div id="content">
338 | <h1>Lorem Ipsum</h1>
339 | <p>Lorem ipsum [...]</p>
340 | <p>Duis autem vel [...]</p>
341 | <p>Ut wisi enim [...]</p>
342 | </div>
343 | </div>
344 |
345 |
new WinBox("Mount DOM", {
346 | mount: document.getElementById("content")
347 | .cloneNode(true)
348 | });
349 |
350 |
Run Code
351 |
352 |
353 |
354 |
355 | Mount DOM (Singleton) + Auto-Unmount
356 |
357 |
new WinBox("Mount DOM", {
358 | mount: document.getElementById("content")
359 | });
360 |
361 |
Run Code
362 |
363 |
364 |
365 |
366 | Open URI / URL
367 |
368 |
new WinBox("WinBox.js", {
369 | url: "https://nextapps-de.github.io/winbox/"
370 | });
371 |
372 |
Run Code
373 |
374 |
375 |
376 |
377 | All Options
378 |
379 |
new WinBox({
380 | // configuration:
381 | index: 1,
382 | id: "my-window",
383 | root: document.body,
384 | class: ["no-full", "no-max", "my-theme"],
385 |
386 | // appearance:
387 | title: "All Options",
388 | background: "#fff",
389 | border: 4,
390 | header: 45,
391 | icon: false,
392 |
393 | // initial state:
394 | modal: false,
395 | max: false,
396 | min: false,
397 | hidden: false,
398 |
399 | // dimension:
400 | width: 250,
401 | height: 200,
402 | minheight: 55,
403 | minwidth: 100,
404 | maxheight: 300,
405 | maxwidth: 500,
406 | autosize: true,
407 |
408 | // position:
409 | x: "center",
410 | y: "center",
411 |
412 | // viewport boundaries:
413 | top: 50,
414 | right: 50,
415 | bottom: 0,
416 | left: 50,
417 |
418 | // contents (choose from):
419 | url: false,
420 | mount: false,
421 | html: "width: 250, height: 200",
422 |
423 | // callbacks:
424 | oncreate: function(options){
425 | options.icon = "demo/wikipedia.svg"
426 | },
427 | onshow: function(){
428 | console.log("Show:", this.id);
429 | },
430 | onhide: function(){
431 | console.log("Hide:", this.id);
432 | },
433 | onfocus: function(){
434 | this.setBackground("#fff");
435 | },
436 | onblur: function(){
437 | this.setBackground("#999");
438 | },
439 | onresize: function(w, h){
440 | this.body.textContent =
441 | `width: ${w}, height: ${h}`;
442 | },
443 | onmove: function(x, y){
444 | this.body.textContent =
445 | `x: ${x}, y: ${y}`;
446 | },
447 | onclose: function(force){
448 | return !confirm("Close window?");
449 | },
450 | onfullscreen: function(){
451 | console.log("Fullscreen:", this.id);
452 | },
453 | onmaximize: function(){
454 | console.log("Maximize:", this.id);
455 | },
456 | onminimize: function(){
457 | console.log("Minimize:", this.id);
458 | },
459 | onrestore: function(){
460 | console.log("Restore:", this.id);
461 | }
462 | });
463 |
464 |
Run Code
465 |
466 |
467 |
468 |
469 | Control Programmatically
470 |
471 |
<div id="controls">
472 | <button onclick="buttons.minimize()">Minimize (Toggle)</button>
473 | <button onclick="buttons.maximize()">Maximize (Toggle)</button>
474 | <button onclick="buttons.fullscreen()">Fullscreen (Toggle)</button>
475 | <button onclick="buttons.move()">Move (Center, Center)</button>
476 | <button onclick="buttons.resize()">Resize (50%, 50%)</button>
477 | <button onclick="buttons.title()">Set Title</button>
478 | <button onclick="buttons.color()">Set Color</button>
479 | <button onclick="buttons.close()">Close</button>
480 | </div>
481 |
482 |
var winbox = new WinBox("Controls", {
483 | mount: document.getElementById("controls"),
484 | border: 4,
485 | onclose: function(force){
486 | return !force && !confirm("Close window?");
487 | }
488 | });
489 |
490 |
window.buttons = {
491 | minimize: function(){
492 |
493 | winbox.minimize(!this.min);
494 | },
495 | maximize: function(){
496 |
497 | winbox.maximize(!this.max);
498 | },
499 | fullscreen: function(){
500 |
501 | winbox.fullscreen(!this.full);
502 | },
503 | move: function(){
504 |
505 | winbox.move("center", "center");
506 | },
507 | resize: function(){
508 |
509 | winbox.resize("50%", "50%");
510 | },
511 | title: function(){
512 |
513 | winbox.setTitle("Title-" + Math.random());
514 | },
515 | color: function(){
516 |
517 | winbox.setBackground(
518 | "rgb(" + (Math.random() * 255 | 0) + "," +
519 | (Math.random() * 255 | 0) + "," +
520 | (Math.random() * 255 | 0) + ")"
521 | );
522 | },
523 | modal: function(){
524 |
525 | winbox.toggleClass("modal");
526 | },
527 | close: function(){
528 |
529 | winbox.close();
530 | },
531 | force_close: function(){
532 |
533 | winbox.close(true);
534 | }
535 | };
536 |
537 |
Run Code
538 |
539 |
540 |
541 |
542 | Window Boilerplate
543 |
544 |
545 |
546 |
547 |
548 | Custom Styles (Global)
549 |
550 |
.winbox {
551 | background: linear-gradient(90deg, #ff00f0, #0050ff);
552 | border-radius: 12px 12px 0 0;
553 | box-shadow: none;
554 | }
555 |
556 | .winbox.min {
557 | border-radius: 0;
558 | }
559 |
560 | .wb-body {
561 | /* set the width of window border via margin: */
562 | margin: 4px;
563 | color: #fff;
564 | background: #131820;
565 | }
566 |
567 | .wb-title {
568 | font-size: 13px;
569 | text-transform: uppercase;
570 | font-weight: 600;
571 | }
572 |
573 |
574 | Customize Control Icons
575 |
576 |
.wb-control * {
577 | opacity: 0.65;
578 | }
579 |
580 | .wb-control *:hover {
581 | opacity: 1;
582 | }
583 |
584 | .wb-min {
585 | background-image: url(src/img/min.svg);
586 | background-size: 15px center;
587 | }
588 |
589 | .wb-max {
590 | background-image: url(src/img/max.svg);
591 | }
592 |
593 | .wb-close {
594 | background-image: url(src/img/close.svg);
595 | }
596 |
597 | .wb-full {
598 | display: none;
599 | }
600 |
601 |
602 | Custom Scrollbars
603 |
604 |
.wb-body::-webkit-scrollbar {
605 | width: 12px;
606 | }
607 | .wb-body::-webkit-scrollbar-track {
608 | background: transparent;
609 | }
610 | .wb-body::-webkit-scrollbar-thumb {
611 | border-radius: 10px;
612 | background: #263040;
613 | }
614 | .wb-body::-webkit-scrollbar-thumb:window-inactive {
615 | background: #181f2a;
616 | }
617 | .wb-body::-webkit-scrollbar-corner {
618 | background: transparent;
619 | }
620 |
621 |
new WinBox("Custom CSS", {
622 | mount: document.getElementById("content")
623 | .cloneNode(true)
624 | });
625 |
626 |
Run Code
627 |
628 |
629 |
630 |
631 | Custom Styles By Classname
632 |
633 |
.winbox.my-theme{
634 | background: #fff;
635 | }
636 | .winbox.my-theme .wb-body {
637 | color: #fff;
638 | background: #131820;
639 | }
640 | .winbox.my-theme .wb-title {
641 | color: #000;
642 | }
643 | .winbox.my-theme .wb-control {
644 | filter: invert(1);
645 | }
646 |
647 |
new WinBox("Custom CSS (Class)", {
648 | class: "my-theme",
649 | mount: document.getElementById("content")
650 | .cloneNode(true)
651 | });
652 |
653 |
Run Code
654 |
655 |
656 |
657 |
658 | Use Theme
659 |
660 |
<head>
661 | <link rel="stylesheet" href="dist/css/winbox.min.css">
662 | <link rel="stylesheet" href="dist/css/themes/modern.min.css">
663 | <script src="dist/js/winbox.min.js"></script>
664 | </head>
665 |
666 |
new WinBox("Theme", {
667 | class: "modern",
668 | mount: document.getElementById("content")
669 | .cloneNode(true)
670 | });
671 |
672 |
Run Code
673 |
674 |
675 |
676 |
677 | Custom Controls
678 |
679 |
.wb-like {
680 | background-size: 20px auto;
681 | }
682 | .wb-like.active {
683 | background-image: url(demo/heart-filled.svg) !important;
684 | }
685 |
686 |
const winbox = new WinBox("Custom Controls");
687 | winbox.removeControl("wb-max").removeControl("wb-min");
688 | winbox.addControl({
689 | index: 0,
690 | class: "wb-like",
691 | image: "demo/heart.svg",
692 | click: function(event, winbox){
693 | // the winbox instance will be passed as 2nd parameter
694 | console.log(winbox.id);
695 | // "this" refers to the button which was clicked:
696 | this.classList.toggle("active");
697 | }
698 | });
699 |
700 |
Run Code
701 |
702 |
703 |
704 |
705 | Custom Template (Layout)
706 |
707 |
.wb-custom {
708 | background-image: url(demo/icon-github.svg);
709 | background-size: 17px auto;
710 | }
711 |
712 |
const template = document.createElement("div");
713 | template.innerHTML = `
714 | <div class=wb-header>
715 | <div class=wb-control>
716 | <span class=wb-custom></span>
717 | <span class=wb-close></span>
718 | </div>
719 | <div class=wb-drag>
720 | <div class=wb-title></div>
721 | </div>
722 | </div>
723 | <div class=wb-body></div>
724 | `;
725 |
726 | new WinBox("Custom Template", { template });
727 |
728 |
Run Code
729 |
730 |
731 |