html管理器,HTML5窗口管理器插件WinBox

插件描述：WinBox是一个现代的 HTML5网络窗口管理器。 轻量级、出色的性能、无依赖、完全可定制、免费和开源！

更新时间：2021-06-21 23:35:04

WinBox

现代 Web 窗口管理器：轻量级、出色的性能、无依赖、完全可定制、开源！

使用捆绑版本

捆绑版本包括所有资产，如 js、css、html 和图标图像作为 base64。

使用非捆绑版本

非捆绑版本需要分别加载js和css(css也包含base64的图标)。

预加载库/异步加载(推荐)

只需将链接标记添加到指示预加载脚本的标题部分。在正文关闭之前添加您的站点脚本。根据您的代码，您可能需要以正确的顺序加载它们。

您也可以以相同的方式加载非捆绑版本。

在极少数情况下，它可能会在页面加载后产生短暂的闪烁/回流，具体取决于您的堆栈。将 script 标签移动到 head 部分将解决这个问题。也尝试使用非捆绑版本。

ES6 模块

ES6 模块位于src/js/. 您需要显式加载样式表文件(包括 base64 格式的图标)。

import WinBox from "./src/js/winbox.js";

您还可以通过 CDN 加载模块，例如：

import WinBox from "https://unpkg.com/winbox@0.2.0/src/js/winbox.js";

选项选项值描述

idnumber | string为窗口设置一个唯一的 id。用于在 css 中定义自定义样式，通过上下文查询元素或仅用于标识相应的窗口实例。如果未设置 ID，它将自动为您创建一个。

indexnumber将z-index窗口的初始值设置为此值(未聚焦/聚焦时可以自动增加)。

titlestring窗口标题。

mountHTMLElement将元素(小部件、模板等)安装到窗口主体。

htmlstring设置innerHTML窗口主体的 。

urlstring在窗口内打开 URL(通过 iframe 加载)。

width

heightnumber | string设置窗口的初始宽度/高度(支持单位“px”和“%”)。

minwidth

minheightnumber | string设置窗口的最小宽度/高度(支持单位“px”和“%”)

x

ynumber | string设置窗口的初始位置(支持：x轴为“右”，y轴为“底部”，两者都为“中心”，两者的单位为“px”和“%”)。

maxboolean创建时自动将窗口切换到最大化状态。

top

right

bottom

leftnumber | string设置或限制窗口可用区域的视口(支持单位“px”和“%”)。

backgroundstring设置窗口的背景(支持样式属性“背景”也支持的所有CSS样式，例如颜色、透明颜色、hsl、渐变、背景图像)

bordernumber设置窗口的边框宽度(支持所有 css 单位，如 px、%、em、rem、vh、vmax)。

classstring向窗口添加一个或多个类名(多个类名作为数组或用空格分隔，例如“class-a class-b”)。用于在 css 中定义自定义样式，按上下文(也在 CSS 中)查询元素或仅标记相应的窗口实例。

modalboolean将窗口显示为模态。

onmovefunction(x, y)窗口移动时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。

onresizefunction(width, height)当窗口调整大小时触发回调。this回调函数内的关键字是指对应的 WinBox 实例。

onclosefunction(force)窗口关闭时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。注意：事件 'onclose' 将在关闭之前触发，并在应用回调并返回真值时停止关闭。

onfocus

onblurfunction()对多个事件的回调。this回调函数内的关键字是指对应的 WinBox 实例。

splitscreenboolean启用分屏功能，通过在窗口旁边拖动来并排查看两个窗口

创建和设置窗口

基本窗口

当root指定no时，窗口将附加到document.body.new WinBox("Window Title");

或者：WinBox.new("Window Title");

或者：new WinBox({

title: "Window Title"

});

或者：var winbox = WinBox();

winbox.setTitle("Window Title");

自定义根

根是窗口将附加到的文档中的唯一元素。在大多数情况下，这通常document.body是默认根。同时多个根只是部分支持(它们实际上共享相同的视口)。new WinBox("Window Title", {

root: document.body

});

自定义颜色

支持样式属性“背景”也支持的所有 CSS 样式，例如颜色、透明颜色、hsl、渐变、背景图像。new WinBox("Custom Color", {

background: "#ff005d"

});

或者：var winbox = new WinBox("Custom Color");

winbox.setBackground("#ff005d");

自定义边框

支持所有单位。new WinBox({

title: "Custom Border",

border: "1em"

});

您还可以定义多个边框值(顺序为：上、右、下、左)：new WinBox({

title: "Custom Border",

border: "0 1em 15px 1em"

});

自定义视口

定义窗口可以移动或可以调整大小的可用区域(相对于文档)(支持单位“px”和“%”)。new WinBox("Custom Viewport", {

top: "50px",

right: "5%",

bottom: 50,

left: "5%"

});

或者(只支持数字！)：var winbox = new WinBox("Custom Viewport");

winbox.top = 50;

winbox.right = 200;

winbox.bottom = 0;

winbox.left = 200

自定义位置/尺寸

支持 x 轴“右”，y 轴“底部”，两者都支持“中心”，单位“px”和“%”也都支持。new WinBox("Custom Viewport", {

x: "center",

y: "center",

width: "50%",

height: "50%"

});new WinBox("Custom Viewport", {

x: "right",

y: "bottom",

width: "50%",

height: "50%"

});

或者(也支持与上述相同的单位)：var winbox = new WinBox("Custom Viewport");

winbox.resize("50%", "50%")

.move("center", "center");

或者(只支持数字！)：ar winbox = new WinBox("Custom Viewport");

winbox.width = 200;

winbox.height = 200;

winbox.resize();

winbox.x = 100;

winbox.y = 100;

winbox.move();

模态窗口new WinBox({

title: "Modal Window",

modal: true

});

主题

随意创建您自己的主题并与我们分享。

加载相应的 css 文件(或使用打包器)，例如：

只需将主题名称添加为类：var winbox = new WinBox({

title: "Theme: Modern",

class: "modern"

});

或者：var winbox = new WinBox("Theme: Modern");

winbox.addClass("modern");

您可以在窗口的生命周期内更改主题。

管理窗口内容

设置内部HTML

不要忘记清理作为html一部分的任何用户输入，因为这可能导致意外的 XSS！new WinBox("Set innerHTML", {

html: "

Lorem Ipsum

"

});

或者：var winbox = new WinBox("Set innerHTML");

winbox.body.innerHTML = "

Lorem Ipsum

";

挂载 DOM(克隆)

通过克隆，您可以轻松地并行创建相同内容的多个窗口实例。

Lorem Ipsum

Lorem ipsum [...]

var node = document.getElementById("content");

new WinBox("Mount DOM", {

mount: node.cloneNode(true)

});

或者：var node = document.getElementById("content");

var winbox = new WinBox("Mount DOM");

winbox.mount(node.cloneNode(true));

窗口实例

窗口状态/信息：var winbox = new WinBox();

console.log("Window ID:", winbox.id);

console.log("Current Maximize State:", winbox.max);

console.log("Current Minimize State:", winbox.min);

窗口大小：var winbox = new WinBox();

winbox.width = 200;

winbox.height = 200;

winbox.resize();

console.log("Current Width:", winbox.width);

console.log("Current Height:", winbox.height);