Winbox:Web的现代窗口经理

2021-05-07 17:00:13

捆绑:(所有资产捆绑到一个文件:JS + CSS + HTML +图标)

只需将版本号从上面的URL交换," master",例如:" / winbox / 0.1.8 / dist /"进入" / winbox / master / dist"

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

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

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

< html> <头> <标题> < / title> <链接rel ="预加载" href =" winbox.bundle.js" AS ="脚本" > < / head> <身体> <! - HTML内容 - > <! - 身体底部 - > <脚本src =" winbox.bundle.js"推迟> < / script> <! - 你的脚本 - > <脚本src =" my-script.js"推迟> < / script> < / body> < / html>

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

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

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

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

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

设置窗口的初始位置(支持:"右"对于X轴,"底部"对于Y轴,"中心"对于两者,单位" 34; px"和"%"两者)。

设置或限制窗口的视口'可用区域(支持单位和#34; px"和"%")。

设置窗口的背景(支持样式属性和#34也支持的所有CSS样式;背景&#34 ;,,,,,,,,,,透明颜色,HSL,梯度,背景图像)

设置窗口的边框宽度(支持所有CSS单位,如PX,%,EM,REM,VH,VMAX)。

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

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

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

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

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

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

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

定义可用区域(相对于文档),其中窗口可以移动或者可以调整大小(支持单位" px"和#34;%")。

支持"右和#34;对于x轴,"底部"对于Y轴,"中心"对于两者,单位" px"和#34;%"也适用于两者。

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

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

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

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

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

< div id =" backstore"风格="显示:无" > < div id ="内容" > < H1> Lorem Ipsum< / h1> < P> Lorem Ipsum [...]< / p> < / div> < / div> < div id =" backstore-2"风格="显示:无" > < / div>

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

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

var winbox = new winbox(); Winbox。 x = 100; Winbox。 y = 100; Winbox。移动 ( ) ;安慰 。日志("当前位置x:",winbox。x);安慰 。日志("当前位置Y:",Winbox。Y);

var winbox = new winbox(); Winbox。 top = 50; Winbox。右= 50; Winbox。底部= 50; Winbox。左= 50;安慰 。日志("当前视口顶部:",Winbox。顶部);安慰 。日志("当前视口右:",Winbox。对);安慰 。日志("当前视口底:",Winbox。底部);安慰 。日志("当前视口左:",Winbox。左);

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

var winbox = winbox({onfocus:function(){the。setbackground("#fff");},Onbrur:function(){这个。leatbackground("#999"); },onResize:函数(宽度,高度){控制台。日志("宽度"宽度);控制台。日志("高度"高度);},onmove:函数(x ,y){控制台。日志(" x",x);控制台。日志(" y" y);},onclose:函数(力){//返回&# 34;真实"跳过关闭//返回" false"允许关闭//使用委派强制参数可选地返回!确认("关闭窗口?");}} );

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

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

新的Winbox({OnClose:函数(){//返回"真实"跳过关闭//返回" false"允许关闭if(do_some_checks()){return true;} }});

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

var winbox = winbox({OnClose:函数onClose(Force){//使用委派强制参数可选地返回!Force&&!确认("关闭窗口?");}};

关闭窗口并执行回调默认值(将显示上面示例的提示):

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

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

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

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

。 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时适用样式;焦点"状态(来自上面的例子相同的逻辑,但更短):

。 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;外面"一个窗口:

<身体> <主要ID ="内容" > <标题类=" wb-hide" >在窗口模式下隐藏此头部< / header> <部分> <! - 页面目录 - > < / section> <页脚类=" WB-Show" >当不在窗口模式下隐藏此页脚< /页脚> < / main> < / body>

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

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