HTML5窗口管理器插件WinBox

所属分类：UI-弹出层

13775 123 查看评论 (5)

分享到微信朋友圈

查看演示立即下载

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

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

WinBox

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

使用捆绑版本

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

<html>
<head>
    <script src="winbox.bundle.js"></script>
</head>
<body></body>
</html>

使用非捆绑版本

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

<html>
<head>
    <link rel="stylesheet" href="winbox.min.css">
    <script src="winbox.min.js"></script>
</head>
<body></body>
</html>

预加载库/异步加载（推荐）

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

<html>
<head>
    <title></title>
    <link rel="preload" href="winbox.bundle.js" as="script">
</head>
<body>
    <!--
    
    HTML CONTENT
    
    -->
    <!-- BOTTOM OF BODY -->
    <script src="winbox.bundle.js" defer></script>
    <!-- YOUR SCRIPT -->
    <script src="my-script.js" defer></script>
</body>
</html>

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

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

ES6 模块

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

<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
</head>

<script type="module">
  import WinBox from "./src/js/winbox.js";
</script>

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

<script type="module">
  import WinBox from "https://unpkg.com/winbox@0.2.0/src/js/winbox.js";
</script>

选项

选项	值	描述
id	number \| string	为窗口设置一个唯一的 id。用于在 css 中定义自定义样式，通过上下文查询元素或仅用于标识相应的窗口实例。如果未设置 ID，它将自动为您创建一个。
index	number	将z-index窗口的初始值设置为此值（未聚焦/聚焦时可以自动增加）。
title	string	窗口标题。
mount	HTMLElement	将元素（小部件、模板等）安装到窗口主体。
html	string	设置innerHTML窗口主体的。
url	string	在窗口内打开 URL（通过 iframe 加载）。
width height	number \| string	设置窗口的初始宽度/高度（支持单位“px”和“%”）。
minwidth minheight	number \| string	设置窗口的最小宽度/高度（支持单位“px”和“%”）
x y	number \| string	设置窗口的初始位置（支持：x轴为“右”，y轴为“底部”，两者都为“中心”，两者的单位为“px”和“%”）。
max	boolean	创建时自动将窗口切换到最大化状态。
top right bottom left	number \| string	设置或限制窗口可用区域的视口（支持单位“px”和“%”）。
background	string	设置窗口的背景（支持样式属性“背景”也支持的所有CSS样式，例如颜色、透明颜色、hsl、渐变、背景图像）
border	number	设置窗口的边框宽度（支持所有 css 单位，如 px、%、em、rem、vh、vmax）。
class	string	向窗口添加一个或多个类名（多个类名作为数组或用空格分隔，例如“class-a class-b”）。用于在 css 中定义自定义样式，按上下文（也在 CSS 中）查询元素或仅标记相应的窗口实例。
modal	boolean	将窗口显示为模态。
onmove	function(x, y)	窗口移动时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。
onresize	function(width, height)	当窗口调整大小时触发回调。this回调函数内的关键字是指对应的 WinBox 实例。
onclose	function(force)	窗口关闭时触发的回调。this回调函数内的关键字是指对应的 WinBox 实例。注意：事件 'onclose' 将在关闭之前触发，并在应用回调并返回真值时停止关闭。
onfocus onblur	function()	对多个事件的回调。this回调函数内的关键字是指对应的 WinBox 实例。
splitscreen	boolean	启用分屏功能，通过在窗口旁边拖动来并排查看两个窗口

创建和设置窗口

基本窗口

当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 文件（或使用打包器），例如：

<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <link rel="stylesheet" href="dist/css/themes/modern.min.css">
    <script src="dist/js/winbox.min.js"></script>
</head>

只需将主题名称添加为类：

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: "<h1>Lorem Ipsum</h1>"
});

或者：

var winbox = new WinBox("Set innerHTML");
winbox.body.innerHTML = "<h1>Lorem Ipsum</h1>";

挂载 DOM（克隆）

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

<div id="content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum [...]</p>
</div>

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);

jQuery bootstraps响应式商业银行类网站模板

响应式植物商城网站模板