Winbox：Web的现代窗口经理

捆绑：（所有资产捆绑到一个文件：JS + CSS + HTML +图标）

只需将版本号从上面的URL交换，＆＃34; master＆＃34;，例如：＆＃34; / winbox / 0.1.8 / dist /＆＃34;进入＆＃34; / winbox / master / dist＆＃34;

捆绑版的版本包括JS，CSS，HTML和ICON图像等所有资产为BASE64。

非捆绑版本需要单独加载JS和CSS（CSS还包括Base64的图标）。

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

＆lt; html＆gt; ＆lt;头＆gt; ＆lt;标题＆gt; ＆lt; / title＆gt; ＆lt;链接rel =＆＃34;预加载＆＃34; href =＆＃34; winbox.bundle.js＆＃34; AS =＆＃34;脚本＆＃34; ＆gt; ＆lt; / head＆gt; ＆lt;身体＆gt; ＆lt;！ - HTML内容 - ＆gt; ＆lt;！ - 身体底部 - ＆gt; ＆lt;脚本src =＆＃34; winbox.bundle.js＆＃34;推迟＆gt; ＆lt; / script＆gt; ＆lt;！ - 你的脚本 - ＆gt; ＆lt;脚本src =＆＃34; my-script.js＆＃34;推迟＆gt; ＆lt; / script＆gt; ＆lt; / body＆gt; ＆lt; / html＆gt;

在罕见的情况下，取决于您的堆栈，它可能会在页面加载后产生短暂的闪烁/回流。将脚本标记移动到头部部分将解决此问题。还尝试使用非捆绑版本。

ES6模块位于SRC / JS /。您需要明确加载样式表文件（包括Base64的图标）。

ES6模块未缩小。请为此目的使用您喜欢的Bundler或构建工具。

将唯一ID设置为窗口。用于在CSS中定义自定义样式，通过上下文或仅用于标识相应的窗口实例。如果没有设置ID，它将自动为您创建一个。

将窗口的初始Z索引设置为此值（可以在未聚焦/聚焦时自动增加）。

设置窗口的初始位置（支持：＆＃34;右＆＃34;对于X轴，＆＃34;底部＆＃34;对于Y轴，＆＃34;中心＆＃34;对于两者，单位＆＃34; 34; px＆＃34;和＆＃34;％＆＃34;两者）。

设置或限制窗口的视口＆＃39;可用区域（支持单位和＃34; px＆＃34;和＆＃34;％＆＃34;）。

设置窗口的背景（支持样式属性和＃34也支持的所有CSS样式;背景＆＃34 ;,,,,,,,,,,透明颜色，HSL，梯度，背景图像）

设置窗口的边框宽度（支持所有CSS单位，如PX，％，EM，REM，VH，VMAX）。

将一个或多个ClassNames添加到窗口（多个类名为数组或用WhiteSpaces分隔，例如，＆＃34;类-A类-B＆＃34;）。用于定义CSS中的自定义样式，按上下文（也在CSS中）或仅用于标记相应的窗口实例的查询元素。 Winbox为您提供一些有用的内置控制类，以便轻松设置自定义配置。

窗口移动时触发回调。回调函数内部的关键字是指相应的WinBox实例。

窗口调整大小时触发回调。回调函数内部的关键字是指相应的WinBox实例。

窗口关闭时触发回调。回调函数内部的关键字是指相应的WinBox实例。注意：事件＆＃39; onclose＆＃39;将在关闭之前触发并在应用回调时停止关闭并返回真实值。

回调到几个事件。回调函数内部的关键字是指相应的WinBox实例。

根是窗口将附加到的文档中的唯一元素。在大多数情况下，通常是文档。是默认根的Body。恰好地支持同一时间的多根根（它们实际上共享相同的视口）。

支持所有CSS样式，也支持Style-Attribute＆＃34;背景＆＃34 ;,,,,,,,颜色，透明颜色，hsl，梯度，背景图像。

定义可用区域（相对于文档），其中窗口可以移动或者可以调整大小（支持单位＆＃34; px＆＃34;和＃34;％＆＃34;）。

支持＆＃34;右和＃34;对于x轴，＆＃34;底部＆＃34;对于Y轴，＆＃34;中心＆＃34;对于两者，单位＆＃34; px＆＃34;和＃34;％＆＃34;也适用于两者。

不要忘记消毒是HTML的一部分的用户输入，因为这可能导致意外XSS！

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

单例是一个唯一的片段，可以在文档内移动。在创建多个窗口并将相同的片段安装到它时，片段将离开旧窗口（请参阅上面的方法以克隆）。

您只需使用隐藏的BackStore来保持内容，也可以使用像模板发动机等的任何其他策略。

自动卸载是一个很棒的功能，在关闭窗口时自动将片段移回到BackStore源。

＆lt; div id =＆＃34; backstore＆＃34;风格=＆＃34;显示：无＆＃34; ＆gt; ＆lt; div id =＆＃34;内容＆＃34; ＆gt; ＆lt; H1＆gt; Lorem Ipsum＆lt; / h1＆gt; ＆lt; P＆gt; Lorem Ipsum [...]＆lt; / p＆gt; ＆lt; / div＆gt; ＆lt; / div＆gt; ＆lt; div id =＆＃34; backstore-2＆＃34;风格=＆＃34;显示：无＆＃34; ＆gt; ＆lt; / div＆gt;

不要忘记消除任何用户输入，这是URL的一部分，因为这可能导致意外XSS！

您可以使用SRC属性支持的每个URI方案，例如， URL，图像或视频，Base64编码数据。

var winbox = new winbox（）; Winbox。 x = 100; Winbox。 y = 100; Winbox。移动 （ ） ;安慰 。日志（＆＃34;当前位置x：＆＃34;，winbox。x）;安慰 。日志（＆＃34;当前位置Y：＆＃34;，Winbox。Y）;

var winbox = new winbox（）; Winbox。 top = 50; Winbox。右= 50; Winbox。底部= 50; Winbox。左= 50;安慰 。日志（＆＃34;当前视口顶部：＆＃34;，Winbox。顶部）;安慰 。日志（＆＃34;当前视口右：＆＃34;，Winbox。对）;安慰 。日志（＆＃34;当前视口底：＆＃34;，Winbox。底部）;安慰 。日志（＆＃34;当前视口左：＆＃34;，Winbox。左）;

Window Body Winbox.Body.ParentNode指向窗口的ParentNode指向大多数外根元素，也包含窗口控件和状态类：

var winbox = winbox（{onfocus：function（）{the。setbackground（＆＃34;＃fff＆＃34;）;}，Onbrur：function（）{这个。leatbackground（＆＃34;＃999＆＃34;）; }，onResize：函数（宽度，高度）{控制台。日志（＆＃34;宽度＆＃34;宽度）;控制台。日志（＆＃34;高度＆＃34;高度）;}，onmove：函数（x ，y）{控制台。日志（＆＃34; x＆＃34;，x）;控制台。日志（＆＃34; y＆＃34; y）;}，onclose：函数（力）{//返回＆＃ 34;真实＆＃34;跳过关闭//返回＆＃34; false＆＃34;允许关闭//使用委派强制参数可选地返回！确认（＆＃34;关闭窗口？＆＃34;）;}} ）;

在关闭之前，将触发onclose的事件，并在应用回调时停止关闭并返回真实值。

在回调函数中，返回true以停止关闭或返回false以执行关闭默认情况。

新的Winbox（{OnClose：函数（）{//返回＆＃34;真实＆＃34;跳过关闭//返回＆＃34; false＆＃34;允许关闭if（do_some_checks（））{return true;} }}）;

Winbox.close（布尔值）的强制参数将被委派给回调函数作为第一个参数。你需要处理＆＃34;力量＆＃34;在回调函数中的状态。

var winbox = winbox（{OnClose：函数onClose（Force）{//使用委派强制参数可选地返回！Force＆amp;＆amp;！确认（＆＃34;关闭窗口？＆＃34;）;}};

关闭窗口并执行回调默认值（将显示上面示例的提示）：

Winbox为您提供创建窗口实例时可以通过的一些内置控制类。

可以在窗口的寿命期间添加或删除来自此列表的所有控件类（创建后）。州课程和＃34; Max＆＃34 ;,＆＃34; min＆＃34;和＃34;焦点＆＃34;无法手动更改。

没有标题的用户ISN＆＃39;它能够移动窗口框架。它对创建固定弹出窗口可能很有用。

此外，请查看主题文件夹以获取一些想法如何自定义窗口。

。 WB-MIN {显示：无}。 WB-Full {显示：无}。 wb-max {显示：无}。 wb-close {显示：无}

/* 北 */。 WB-N {显示：无} / * EAST * /。 WB-E {显示：无} / * South * /。 WB-S {显示：无} / * West * /。 WB-W {显示：无} / *西北* /。 WB-NW {显示：无} / *东北* /。 WB-NE {显示：无} / * Suist-West * /。 WB-SW {显示：无} / * South-East * /。 WB-SE {显示：无}

。 WB-body {/ *窗框边框的宽度：* /边缘：4 px;颜色：#fff;背景：＃131820;}

。 Winbox {背景：＃999;}。 Winbox。焦点{背景：＃0050FF; }。 Winbox。 WB-icon {显示：无;}。 Winbox。重点 。 WB-icon {显示：块;}

当窗口不在＆＃34时适用样式;焦点＆＃34;状态（来自上面的例子相同的逻辑，但更短）：

。 WB-body :: -webkit-scrollar {宽度：12 px;}。 WB-body :: -Webkit-滚动条 - 轨道{背景：透明;}。 WB-body :: -webkit-scrollbar-thumb {边界半径：10 px;背景：＃263040;}。 WB-body :: -webkit-scrollbar - 拇指：窗口 - 非活动{背景：＃181f2a;}。 WB-Body :: -Webkit-滚动条 - 角{背景：透明;}

通常，您需要在安装到窗口时隐藏特定的内容部件。您可以使用一些CSS轻松解决：

现在，您可以将这两个类添加到任何元素以控制两个状态和＃34之间的可见性;内部＆＃34;和＃34;外面＆＃34;一个窗口：

＆lt;身体＆gt; ＆lt;主要ID =＆＃34;内容＆＃34; ＆gt; ＆lt;标题类=＆＃34; wb-hide＆＃34; ＆gt;在窗口模式下隐藏此头部＆lt; / header＆gt; ＆lt;部分＆gt; ＆lt;！ - 页面目录 - ＆gt; ＆lt; / section＆gt; ＆lt;页脚类=＆＃34; WB-Show＆＃34; ＆gt;当不在窗口模式下隐藏此页脚＆lt; /页脚＆gt; ＆lt; / main＆gt; ＆lt; / body＆gt;

属性显示：块可能不适合您的需求。为什么这个解决方法没有添加为一个内置的类别。请相应地更改为您所需的显示状态。

提供移动设备的替代视图策略，例如， 当设备是触摸设备时，打开古典应用程序视图。 如果鼠标指针可用将此视图安装到Winbox窗口。 此外，您可以在应用程序中放置一个交换机按钮，其中用户也可以在这两种模式之间切换。