自由窗口组件（iwindow）
你们的饺子
|
|
信息技术

3762 字
|
59 分钟
当前版本为历史版本V1.0。请点击此处以查询所有版本文章。
iwindow()参数已更新：更新为对象传参法，请注意参数更改。
已修复若干重大bug。

简介

本组件可实现在 HTML 页面中创建可自由移动、最大化、最小化的窗口。

功能

  • 窗口可最大化、最小化。
  • 窗口可自由移动。
  • 支持鼠标、触控移动窗口。
  • 支持更改窗口颜色。
  • 适应浏览器窗口大小改变，窗口总在用户视野内。
  • 用户点击的窗口自动置顶于其他窗口之上。

预览

屏幕截图

试用

试用仅对最新版本可用，当前版本为历史版本V1.0。请点击此处以寻找最新版本的文章。

使用方法（JavaScript）

常用函数

创建窗口

iwindow(parameter)
参数名描述可选值值的描述缺省值
parameter参数字典数组字典包含下表中的键与值对应各键的缺省值
iwindow 参数表
parameter 字典键值表
参数名描述可选值值的描述缺省值
height窗口高正整数，大于或等于100单位px100
width窗口宽正整数，大于或等于150单位px150
title窗口标题字符串任意字符串“窗口”+编号
content窗口内容字符串任意字符串null
mode窗口按钮样式数字1,2,3,41: 菜单、最小化、最大化、关闭 （若menu为null，则1表示2）
2: 最小化、最大化、关闭
3: 关闭
4: 无按钮		1
menu菜单二维数组Array每个字数组中第一项为显示文字，第二项为函数名称，其调用时附带参数“窗口编号”null
size窗口大小样式数字1,2,31: 普通
2: 最大化
3: 最小化		1
color窗口颜色字符串HEX或RGB或RGBA，决定标题栏、内容部分的背景颜色，以及文字颜色（自动调整明暗两色）#FFFFFF
x窗口横坐标数字单位pxnull
y窗口纵坐标数字单位pxnull
mask是否生成屏障布尔值true或falsefalse
content_overflow指定内容Overflow属性字符串参照CSS标准auto
parameter 字典键值表

获取窗口编号

尝试定位到父元素”iwindow_frame_”+i（i为窗口编号，如iwindow_frame_1），记为el，
则可通过以下代码获取窗口编号

var i = el.getAttribute("iNumber");

更改窗口颜色

iwindow_change_color(color, i)
参数名描述可选值解释缺省值
color目标颜色字符串HEX或RGB或RGBA#FFFFFF
i窗口编号正整数指定更改某一窗口颜色，缺省则为更改所有窗口颜色null
iwindow_change_color 参数表

设置窗口置顶

iwindow_top(i)
参数名描述可选值解释缺省值
i窗口编号正整数指定置顶某一窗口，缺省无效null
iwindow_top 参数表

关闭窗口

iwindow_close(i)
参数名描述可选值解释缺省值
i窗口编号正整数指定关闭某一窗口，缺省则为关闭所有窗口null
iwindow_close 参数表

最大化窗口

iwindow_maximize(i)
参数名描述可选值解释缺省值
i窗口编号正整数指定最大化某一窗口，缺省则为最大化所有窗口null
iwindow_maximize 参数表

最小化窗口

iwindow_minimize(i)
参数名描述可选值解释缺省值
i窗口编号正整数指定最小化某一窗口，缺省则为最小化所有窗口null
iwindow_minimize 参数表

打开窗口菜单

iwindow_create_menu(i, menu, cx, cy)
参数名描述可选值解释缺省值
i窗口编号正整数指定打开某一窗口的菜单null
menu菜单二维数组Array指定要打开的菜单，每个字数组中第一项为显示文字，第二项为函数名称，其调用时附带参数“窗口编号”，缺省则为打开创建窗口时的菜单，以创建窗口时指定的menu为准，而无论是否创建菜单按钮null
cx菜单横坐标数字指定菜单横坐标，缺省则为event.clientX，若event.clientX为null，则按如下过程处理：
若菜单按钮存在且可见，则cx=菜单横坐标+15，否则，cx=窗口横坐标+15
且无论如何，坐标都将坐标处理为菜单在屏幕中完整可见		null
cy菜单纵坐标数字指定菜单纵坐标缺省则为event.clientY，若event.clientY为null，则按如下过程处理：
若菜单按钮存在且可见，则cy=菜单纵坐标+15，否则，cy=窗口纵坐标+15
且无论如何，坐标都将坐标处理为菜单在屏幕中完整可见		null
iwindow_create_menu 参数表

全部函数

函数参数类型参数解释返回类型返回值解释解释
iwindow(parameter)parameter:Arrayparameter:数组字典，含指定参数voidnull创建窗口
iwindow_change_color(color, i)color:String
i:Int		color:HEX颜色代码
i:窗口编号		voidnull更改窗口颜色
iwindow_top(i)i:Inti:窗口编号voidnull设置窗口置顶
iwindow_close(i)i:Inti:窗口编号voidnull关闭窗口
iwindow_maximize(i)i:Inti:窗口编号voidnull最大化窗口
iwindow_minimize(i)i:Inti:窗口编号voidnull最小化窗口
iwindow_create_menu(i, menu, cx, cy)i:Inti:窗口编号
iwindow_menu:菜单二维数组
cx:菜单横坐标
cy:菜单纵坐标		voidnull打开窗口菜单
iwindow_dynamicColor(bg)bg:Stringbg:HEX颜色代码StringHEX颜色代码根据颜色返回亮/暗文字颜色
iwindow_isLight(rgb = [0, 0, 0])rgb:Arrayrgb:RGB颜色数组Booleantrue/false判断颜色亮/暗
iwindow_HexToRgb(str)str:Stringstr:HEX颜色代码ArrayRGB颜色数组将HEX颜色代码转换为RGB颜色数组
iwindow_RgbToHex(str)str:Stringstr:RGB颜色代码StringHEX颜色代码将RGB颜色代码转换为HEX颜色代码
iwindow_getDarkColor(color, level)color:String
level:Int		color:HEX颜色代码
level:程度值(0~1)		StringHEX颜色代码将颜色加深
iwindow_getLightColor(color, level)color:String
level:Int		color:HEX颜色代码
level:程度值(0~1)		StringHEX颜色代码将颜色变浅
iwindow_window_create_menu(i, iwindow_menu, mx, my)i:Int
iwindow_menu:Array
mx:Int
my:Int		i:窗口编号
iwindow_menu:菜单二维数组
mx:菜单横坐标
my:菜单纵坐标		voidnull创建菜单的操作
iwindow_menu_create_line(i, x, iwindow_menu)i:Int
x:Int
iwindow_menu:Array		i:窗口编号
x:行编号
iwindow_menu:菜单二维数组		voidnull创建菜单单行内容
iwindow_window_start_move(i)i:Inti:窗口编号voidnull开始通过鼠标移动窗口
iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y)i:Int
iwindow_delta_x:Int
iwindow_delta_y:Int		i:窗口编号
iwindow_delta_x:鼠标位置相对窗口原位置的差值
iwindow_delta_y:鼠标位置相对窗口原位置的差值		voidnull正在通过鼠标移动窗口
iwindow_window_complete_move(i)i:Inti:窗口编号voidnull完成通过鼠标移动窗口
window_window_start_move_touch(i)i:Inti:窗口编号voidnull开始通过触摸移动窗口
window_window_on_move_touch(i)i:Inti:窗口编号voidnull正在通过触摸移动窗口
iwindow_window_complete_move_touch(i)i:Inti:窗口编号voidnull完成通过触摸移动窗口
iwindow_window_move_step(i, w, z)i:Int
w:Int
z:Int		i:窗口编号
w:实时横坐标
z:实时纵坐标		voidnull移动窗口操作
iwindow_min_array_add(i)i:Inti:窗口编号voidnull向 iwindow_min_array 头部添加指定窗口编号
iwindow_min_array_remove(i)i:Inti:窗口编号voidnull在 iwindow_min_array 中移除指定窗口编号
iwindow_min_sort()voidnullvoidnull按照 iwindow_min_array 对最小化窗口排序
iwindow_change_color_execute(color, i)color:String
i:Int		color:HEX颜色代码
i:窗口编号		voidnull更改窗口颜色操作
iwindow_top_execute(i, m)i:Int
m:Int		i:要置顶的窗口编号
m:尝试操作的窗口编号		voidnull尝试置顶窗口操作
iwindow_close_execute(i)i:Inti:窗口编号voidnull关闭窗口操作
iwindow_maximize_execute(i)i:Inti:窗口编号voidnull最大化窗口操作
iwindow_minimize_execute(i)i:Inti:窗口编号voidnull最小化窗口操作
iwindow_check_body_overflow()voidnullvoidnull按照是否有窗口最大化来显示/隐藏页面滚动条
Dictionary()voidnullvoidnull创建 Dictionary 类型
add(key, value)key:Any
value:Any		key:键
value:值		voidnullDictionary 类型的成员函数，添加键值
find(key)key:Anykey:键Any值Dictionary 类型的成员函数，根据键查询值
remove(key)key:Anykey:键voidnullDictionary 类型的成员函数，根据键移除键值
showAll()voidnullvoidnullDictionary 类型的成员函数，在Console 以 String 类型输出Dictionary 的所有键值
count()voidnullInt键的个数Dictionary 类型的成员函数，在 Console 输出键的个数
clear()voidnullvoidnullDictionary 类型的成员函数，删除Dictionary 类型变量
全部函数表

自定义类型

本组件中使用以下自定义类型：

Dictionary

字典类型，与数组字典不同，Dictionary 类型便于对字典进行操作。
注意：iwindow(parameter) 的 parameter 参数为数组字典，而非 Dictionary 类型。

声明 Dictionary 类型变量的方法：


var dic = new Dictionary();

Dictionary 类型的代码如下：

function Dictionary() {
    this.add = add;
    this.datastore = new Array();
    this.find = find;
    this.remove = remove;
    this.showAll = showAll;
    this.count = count;
    this.clear = clear;
}
function add(key, value) {
    this.datastore[key] = value;
}
function find(key) {
    return this.datastore[key];
}
function remove(key) {
    delete this.datastore[key];
}
function showAll() {
    var str = "";
    for (var key in this.datastore) {
        str += key + " -> " + this.datastore[key] + "; "
    }
    console.log(str);
}
function count() {
    var n = 0;
    for (var key in Object.keys(this.datastore)) {
        ++n;
    }
    console.log(n);
    return n;
}
function clear() {
    for (var key in this.datastore) {
        delete this.datastore[key];
    }
}

全局变量

本组件中使用以下全局变量：

变量名类型解释
iwindow_min_arrayArray记录所有最小化的窗口编号，越新出现的最小化窗口，其窗口编号在数组的位置越前
iwindow_menusDictionary自定义类型，详见代码。记录了所有创建时附带菜单（无论是否创建菜单按钮）的窗口编号以及对应菜单，其中键key=窗口编号，值value=菜单
全局变量表

全局事件监听器

本组件中使用以下全局事件监听器：

事件名解释
resize适应窗口大小变化，调整最大化的窗口大小，调整在可见区域外的窗口位置
全局事件监听器表

代码（JavaScript）

//parameter 字典类型 可含如下键与值：
//height  窗口高          正整数，大于或等于100  缺省值为100
//width   窗口宽          正整数，大于或等于150  缺省值为150
//title   窗口标题        字符串                缺省值为“窗口”+编号
//content 窗口内容        字符串                缺省值为null
//mode    窗口按钮样式     数字1,2,3,4          缺省值为1
//                        1   菜单、最小化、最大化、关闭 （若iwindow_menu为null，则1表示2）
//                        2   最小化、最大化、关闭
//                        3   关闭
//                        4   无按钮
//menu    菜单            二维数组Array，例如 [["关于", about], ["帮助", help], ["使用", use]] 缺省值为null
//size    窗口大小样式     数字1,2,3            缺省值为1
//                        1   普通
//                        2   最大化
//                        3   最小化
//color   窗口颜色         字符串，HEX或RGB或RGBA，决定标题栏、内容部分的背景颜色，以及文字颜色（自动调整明暗两色），缺省值为"#FFFFFF"
//x       窗口横坐标       数字                  缺省值为null
//y       窗口纵坐标       数字                  缺省值为null
//mask    是否生成屏障     布尔值（true或false），缺省值为false
//content_overflow 指定内容Overflow属性 字符串   缺省值为auto
function iwindow(parameter) {
    for (var i = 1; ; i++) {
        if (document.getElementById("iwindow_frame_" + i) == null) break
    }
    if (parameter.width == null || parameter.width < 150) iwindow_width = 150;
    else iwindow_width = parameter.width;

    if (parameter.height == null || parameter.height < 100) iwindow_height = 100;
    else iwindow_height = parameter.height;

    if (parameter.title == null) iwindow_title = "窗口_" + i;
    else iwindow_title = parameter.title;

    if (parameter.content == null) iwindow_content = "窗口内容_" + i;
    else iwindow_content = parameter.content;

    if (parameter.mode != 1 && parameter.mode != 2 && parameter.mode != 3 && parameter.mode != 4) iwindow_mode = 1;
    else iwindow_mode = parameter.mode;
    if (iwindow_mode == 1 && parameter.menu == null) iwindow_mode = 2;

    if (parameter.size != 1 && parameter.size != 2 && parameter.size != 3) iwindow_size = 1;
    else iwindow_size = parameter.size;

    if (parameter.mask != true) iwindow_mask = false;
    else iwindow_mask = parameter.mask;

    if (parameter.color == null) iwindow_color = "#FFFFFF";
    else iwindow_color = parameter.color;

    if (parameter.content_overflow == null) iwindow_content_overflow = "auto";
    else iwindow_content_overflow = parameter.content_overflow;

    if (parameter.menu != null) iwindow_menus.add(i, parameter.menu);

    window.iwindow_top_zIndex = 10001;
    //框架
    var div = document.createElement("div");
    div.id = "iwindow_frame_" + i;
    div.setAttribute("iNumber", i);
    document.body.appendChild(div);

    //框架->窗口
    var div = document.createElement("div");
    div.id = "iwindow_window_" + i;
    div.style.transition = "all .3s ease";
    if (iwindow_mask) div.style.zIndex = "2000000002";
    else div.style.zIndex = "10001";
    div.style.color = "#000000";
    div.style.fontSize = "14px";
    div.style.lineHeight = "24px";
    div.style.position = "fixed";
    div.style.borderRadius = "5px";
    div.style.webkitBoxShadow = "2px 2px 10px #909090";
    div.style.boxShadow = "2px 2px 10px #909090";
    div.style.backgroundColor = "#FFFFFF";
    div.style.width = iwindow_width + "px";
    div.style.height = iwindow_height + "px";
    div.style.opacity = "0";
    div.setAttribute("display_mode", "normal");
    div.setAttribute("dafault_width", iwindow_width + "px");
    div.setAttribute("dafault_height", iwindow_height + "px");
    div.setAttribute("dafault_title_width", iwindow_width + "px");
    div.onmousedown = function () {
        iwindow_top(i);
    }
    div.ontouchstart = function () {
        iwindow_top(i);
    }
    if (iwindow_mode == 1) div.setAttribute("dafault_title_words_width", iwindow_width - 5 - 120 + "px");
    else if (iwindow_mode == 2) div.setAttribute("dafault_title_words_width", iwindow_width - 5 - 90 + "px");
    else if (iwindow_mode == 3) div.setAttribute("dafault_title_words_width", iwindow_width - 5 - 30 + "px");
    else if (iwindow_mode == 4) div.setAttribute("dafault_title_words_width", iwindow_width - 5 + "px");
    document.getElementById("iwindow_frame_" + i).appendChild(div);
    if (iwindow_mask) document.getElementById("iwindow_window_" + i).setAttribute("mask", "true");
    var mx;
    if (parameter.x == null) mx = document.documentElement.clientWidth - document.getElementById("iwindow_window_" + i).offsetWidth - 80 + "px";
    else mx = parameter.x + 10 + "px";
    document.getElementById("iwindow_window_" + i).style.left = mx;
    var uy;
    if (parameter.y == null) uy = document.documentElement.clientHeight - document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
    else uy = parameter.y + "px";
    document.getElementById("iwindow_window_" + i).style.top = uy;

    //框架->窗口->标题
    var div = document.createElement("div");
    div.id = "iwindow_window_title_" + i;
    div.style.webkitUserSelect = "none";
    div.style.userSelect = "none";
    div.onselectstart = function () { return false; }
    div.style.borderRadius = "5px 5px 0 0";
    div.style.height = "30px";
    div.style.borderBottom = "solid 1px #F2F2F2";
    div.style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_width");
    document.getElementById("iwindow_window_" + i).appendChild(div);

    //框架->窗口->标题->标题文字
    var div = document.createElement("div");
    div.id = "iwindow_window_title_words_" + i;
    div.style.float = "left";
    div.style.fontSize = "14px";
    div.style.lineHeight = "30px";
    div.style.padding = "0 0 0 5px";
    div.style.overflow = "hidden";
    div.style.textOverflow = "ellipsis";
    div.style.whiteSpace = "nowrap";
    div.style.cursor = "move";
    div.style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_words_width");
    div.innerHTML = iwindow_title;
    div.onmousedown = function () {
        iwindow_window_start_move(i);
    }
    div.ontouchstart = function () {
        window_window_start_move_touch(i);
    }
    div.ontouchmove = function () {
        window_window_on_move_touch(i);
    }
    div.ontouchend = function () {
        iwindow_window_complete_move_touch(i);
    }
    div.ontouchcancel = function () {
        iwindow_window_complete_move_touch(i);
    }
    document.getElementById("iwindow_window_title_" + i).appendChild(div);


    if (iwindow_mode == 1) {
        //框架->窗口->标题->菜单按钮
        var div = document.createElement("div");
        div.id = "iwindow_window_menu_button_" + i;
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.style.position = "absolute";
        div.style.right = "90px";
        div.style.textAlign = "center";
        div.style.height = "30px";
        div.style.width = "30px";
        div.style.border = "none";
        div.style.transition = "all .3s ease";
        div.onmouseover = function () {
            document.getElementById("iwindow_window_menu_button_" + i).style.backgroundColor = "#12B7F5";
            document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = "#FFFFFF";
            document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = "#FFFFFF";
            document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = "#FFFFFF";
        }
        div.onmouseleave = function () {
            document.getElementById("iwindow_window_menu_button_" + i).style.backgroundColor = "";
            var ncol;
            if (document.getElementById("iwindow_window_" + i).getAttribute("content_color")) ncol = document.getElementById("iwindow_window_" + i).getAttribute("content_color");
            else ncol = "#000000";
            document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = ncol;
            document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = ncol;
            document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = ncol;
        }
        div.onclick = function () {
            iwindow_create_menu(i, parameter.menu);
        }
        div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_menu_button_svg{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_menu_button_svg_line1_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"320\" x2=\"507.5\" y2=\"320\"/><line id=\"iwindow_window_menu_button_svg_line2_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"180\" x2=\"507.5\" y2=\"180\"/><line id=\"iwindow_window_menu_button_svg_line3_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"460\" x2=\"507.5\" y2=\"460\"/></svg>"
        document.getElementById("iwindow_window_title_" + i).appendChild(div);
    }
    if (iwindow_mode == 1 || iwindow_mode == 2) {
        //框架->窗口->标题->最小化按钮
        var div = document.createElement("div");
        div.id = "iwindow_window_minimize_button_" + i;
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.style.position = "absolute";
        div.style.right = "60px";
        div.style.textAlign = "center";
        div.style.height = "30px";
        div.style.width = "30px";
        div.style.border = "none";
        div.style.transition = "all .3s ease";
        div.onmouseover = function () {
            document.getElementById("iwindow_window_minimize_button_" + i).style.backgroundColor = "#12B7F5";
            if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = "#FFFFFF";
            if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = "#FFFFFF";
            if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = "#FFFFFF";
        }
        div.onmouseleave = function () {
            document.getElementById("iwindow_window_minimize_button_" + i).style.backgroundColor = "";
            var ncol;
            if (document.getElementById("iwindow_window_" + i).getAttribute("content_color")) ncol = document.getElementById("iwindow_window_" + i).getAttribute("content_color");
            else ncol = "#000000";
            if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = ncol;
            if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = ncol;
            if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = ncol;
        }
        div.onclick = function () {
            iwindow_minimize(i);
        }
        div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>"
        document.getElementById("iwindow_window_title_" + i).appendChild(div);

        //框架->窗口->标题->最大化按钮
        var div = document.createElement("div");
        div.id = "iwindow_window_maximize_button_" + i;
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.style.position = "absolute";
        div.style.right = "30px";
        div.style.textAlign = "center";
        div.style.height = "30px";
        div.style.width = "30px";
        div.style.border = "none";
        div.style.transition = "all .3s ease";
        div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
        div.onmouseover = function () {
            document.getElementById("iwindow_window_maximize_button_" + i).style.backgroundColor = "#12B7F5";
            document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = "#FFFFFF";
            if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = "#FFFFFF";
        }
        div.onmouseleave = function () {
            document.getElementById("iwindow_window_maximize_button_" + i).style.backgroundColor = "";
            var ncol;
            if (document.getElementById("iwindow_window_" + i).getAttribute("content_color")) ncol = document.getElementById("iwindow_window_" + i).getAttribute("content_color");
            else ncol = "#000000";
            document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = ncol;
            if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = ncol;
        }
        div.onclick = function () {
            iwindow_maximize(i);
        }
        document.getElementById("iwindow_window_title_" + i).appendChild(div);
    }
    if (iwindow_mode == 1 || iwindow_mode == 2 || iwindow_mode == 3) {
        //框架->窗口->标题->关闭按钮
        var div = document.createElement("div");
        div.id = "iwindow_window_close_button_" + i;
        div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
        div.style.position = "absolute";
        div.style.right = "0";
        div.style.textAlign = "center";
        div.style.height = "30px";
        div.style.width = "30px";
        div.style.border = "none";
        div.style.borderRadius = "0 5px 0 0";
        div.style.transition = "all .3s ease";
        div.onmouseover = function () {
            document.getElementById("iwindow_window_close_button_" + i).style.backgroundColor = "#FF0000";
            document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = "#FFFFFF";
            document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = "#FFFFFF";
        }
        div.onmouseleave = function () {
            document.getElementById("iwindow_window_close_button_" + i).style.backgroundColor = "";
            var ncol;
            if (document.getElementById("iwindow_window_" + i).getAttribute("content_color")) ncol = document.getElementById("iwindow_window_" + i).getAttribute("content_color");
            else ncol = "#000000";
            document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = ncol;
            document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = ncol;
        }
        div.onclick = function () {
            iwindow_close(i);
        }
        div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_close_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:50px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_close_button_svg_line1_" + i + "\" class=\"cls-iwindow_window_close_button_svg\" x1=\"496.78\" y1=\"496.78\" x2=\"143.22\" y2=\"143.22\"/><line id=\"iwindow_window_close_button_svg_line2_" + i + "\" class=\"cls-iwindow_window_close_button_svg\" x1=\"143.22\" y1=\"496.78\" x2=\"496.78\" y2=\"143.22\"/></svg>"
        document.getElementById("iwindow_window_title_" + i).appendChild(div);
    }

    //框架->窗口->内容

    var div = document.createElement("div");
    div.id = "iwindow_window_content_" + i;
    div.style.width = "100%";
    div.style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
    div.style.borderRadius = "0 0 5px 5px";
    div.style.overflow = iwindow_content_overflow;
    div.innerHTML = iwindow_content;
    document.getElementById("iwindow_window_" + i).appendChild(div);

    //框架->屏障
    if (iwindow_mask) {
        var div = document.createElement("div");
        div.id = "iwindow_mask_x_" + i;
        div.style.position = "fixed";
        div.style.top = "0";
        div.style.right = "0";
        div.style.bottom = "0";
        div.style.left = "0";
        div.style.zIndex = "2000000001";
        div.style.backgroundColor = "#000000";
        div.style.opacity = "0.5";
        document.getElementById("iwindow_frame_" + i).appendChild(div);
    }

    setTimeout(() => {
        if (document.getElementById("iwindow_window_" + i) != null) {
            document.getElementById("iwindow_window_" + i).style.opacity = "1";
            var ux;
            if (parameter.x == null) ux = document.documentElement.clientWidth - document.getElementById("iwindow_window_" + i).offsetWidth - 90 + "px";
            else ux = parameter.x + "px";
            iwindow_change_color(iwindow_color, i);
            if (iwindow_size != 1) {
                document.getElementById("iwindow_window_" + i).style.display = "none";
            }
            document.getElementById("iwindow_window_" + i).style.left = ux;
            setTimeout(() => {
                if (iwindow_size == 2) document.getElementById("iwindow_window_maximize_button_" + i).onclick();
                if (iwindow_size == 3) document.getElementById("iwindow_window_minimize_button_" + i).onclick();
                document.getElementById("iwindow_window_" + i).setAttribute("old_left", ux);
                document.getElementById("iwindow_window_" + i).setAttribute("old_top", uy);
                document.getElementById("iwindow_window_" + i).style.display = "";
            }, 300);
        }
    }, 1);
}
function iwindow_dynamicColor(bg) {
    if (!bg || bg.search('gradient') != -1) {
        return '#000000';
    }
    var bgcolorArry;
    if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(bg)) bgcolorArry = iwindow_HexToRgb(bg);
    else if (/^(rgb|RGB|rgba|RGBA)/.test(bg)) bgcolorArry = bg.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
    return iwindow_isLight(bgcolorArry) ? '#000000' : 'rgb(255,255,255,0.7)';
}
function iwindow_isLight(rgb = [0, 0, 0]) {
    return (0.213 * rgb[0] + 0.715 * rgb[1] + 0.072 * rgb[2] > 255 / 2);
};
function iwindow_HexToRgb(str) {
    var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
    if (!reg.test(str)) { return; }
    let newStr = (str.toLowerCase()).replace(/\#/g, '')
    let len = newStr.length;
    if (len == 3) {
        let t = ''
        for (var i = 0; i < len; i++) {
            t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1))
        }
        newStr = t
    }
    let arr = [];
    for (var i = 0; i < 6; i = i + 2) {
        let s = newStr.slice(i, i + 2)
        arr.push(parseInt("0x" + s))
    }
    return arr;
}
function iwindow_RgbToHex(str) {
    let reg = /^(rgb|RGB|rgba|RGBA)/;
    if (!reg.test(str)) { return; }
    var arr = str.slice(4, str.length - 1).split(",")
    let color = '#';
    for (var i = 0; i < arr.length; i++) {
        var t = Number(arr[i]).toString(16)
        if (t == "0") {
            t = t + "0"
        }
        color += t;
    }
    return color;
}
function iwindow_getDarkColor(color, level) {
    var r = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
    var trgb = /^(rgb|RGB|rgba|RGBA)/;
    var rgbc;
    if (r.test(color)) rgbc = iwindow_HexToRgb(color);
    else if (trgb.test(color)) rgbc = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
    else rgbc = iwindow_HexToRgb("#FFFFFF");
    for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
    return iwindow_RgbToHex("rgb(" + rgbc.join(',') + ")");
}
function iwindow_getLightColor(color, level) {
    var r = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
    var trgb = /^(rgb|RGB|rgba|RGBA)/;
    var rgbc;
    if (r.test(color)) rgbc = iwindow_HexToRgb(color);
    else if (trgb.test(color)) rgbc = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
    else rgbc = iwindow_HexToRgb("#FFFFFF");
    for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    return iwindow_RgbToHex("rgb(" + rgbc.join(',') + ")");
}
function iwindow_window_create_menu(i, iwindow_menu, mx, my) {
    //框架
    var div = document.createElement("div");
    div.id = "iwindow_menu_frame_" + i;
    document.getElementById("iwindow_frame_" + i).appendChild(div);

    //框架->菜单
    var div = document.createElement("div");
    div.className = "iwindow_menu";
    div.id = "iwindow_menu_" + i;
    div.style.top = my + "px";
    div.style.left = mx + "px";
    div.style.zIndex = "2000000005";
    div.style.webkitUserSelect = "none";
    div.style.userSelect = "none";
    div.style.fontSize = "14px";
    div.style.position = "fixed";
    div.style.borderRadius = "5px";
    if (document.getElementById("iwindow_window_" + i).getAttribute("background_color") == null) div.style.backgroundColor = "#FFFFFF";
    else div.style.backgroundColor = document.getElementById("iwindow_window_" + i).getAttribute("background_color");
    if (document.getElementById("iwindow_window_" + i).getAttribute("content_color") == null) div.style.color = "#000000";
    else div.style.color = document.getElementById("iwindow_window_" + i).getAttribute("content_color");
    div.style.webkitBoxShadow = "2px 2px 10px #909090";
    div.style.boxShadow = "2px 2px 10px #909090";
    div.style.transition = "all .1s ease";
    div.style.padding = "5px 0";
    div.style.opacity = "0";
    div.style.lineHeight = "30px";
    document.getElementById("iwindow_menu_frame_" + i).appendChild(div);

    //框架->菜单->行
    var x = 0;
    for (; ;) {
        if (iwindow_menu[x] != null) {
            iwindow_menu_create_line(i, x, iwindow_menu);
            x++;
        }
        else break;
    }

    //框架->遮罩
    var div = document.createElement("div");
    div.id = "iwindow_menu_mask_" + i;
    div.style.position = "fixed";
    div.style.top = "0";
    div.style.right = "0";
    div.style.bottom = "0";
    div.style.left = "0";
    div.style.zIndex = "2000000004";
    div.style.opacity = "0";
    div.onclick = function () { iwindow_menu_close(i); };
    document.getElementById("iwindow_menu_frame_" + i).appendChild(div);

    if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().left < 0) document.getElementById("iwindow_menu_" + i).style.left = 10 + "px";
    if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().left > document.documentElement.clientWidth - 10 - document.getElementById("iwindow_menu_" + i).offsetWidth) document.getElementById("iwindow_menu_" + i).style.left = document.documentElement.clientWidth - 10 - document.getElementById("iwindow_menu_" + i).offsetWidth + "px";
    if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().top < 0) document.getElementById("iwindow_menu_" + i).style.top = 10 + "px";
    if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().top > document.documentElement.clientHeight - 10 - document.getElementById("iwindow_menu_" + i).offsetHeight) document.getElementById("iwindow_menu_" + i).style.top = document.documentElement.clientHeight - 10 - document.getElementById("iwindow_menu_" + i).offsetHeight + "px";
    setTimeout(() => {
        if (document.getElementById("iwindow_menu_" + i) != null) document.getElementById("iwindow_menu_" + i).style.opacity = "1";
    }, 100);
}

function iwindow_menu_create_line(i, x, iwindow_menu) {
    var div = document.createElement("div");
    div.id = "iwindow_menu_line_" + x + "_" + i;
    div.style.height = "30px";
    div.style.lineHeight = "30px";
    div.style.margin = "0";
    div.style.padding = "0 5px";
    div.style.whiteSpace = "nowrap";
    div.innerHTML = iwindow_menu[x][0];
    div.onclick = function () {
        iwindow_menu[x][1](i);
        iwindow_menu_close(i);
    }
    div.onmouseover = function () {
        document.getElementById("iwindow_menu_line_" + x + "_" + i).style.backgroundColor = "#F0F0F0";
        document.getElementById("iwindow_menu_line_" + x + "_" + i).style.color = "#000000";
    }
    div.onmouseleave = function () {
        document.getElementById("iwindow_menu_line_" + x + "_" + i).style.backgroundColor = "";
        document.getElementById("iwindow_menu_line_" + x + "_" + i).style.color = "";
    }
    document.getElementById("iwindow_menu_" + i).appendChild(div);
}
function iwindow_menu_close(i) {
    if (document.getElementById("iwindow_menu_frame_" + i) != null) document.getElementById("iwindow_menu_frame_" + i).parentNode.removeChild(document.getElementById("iwindow_menu_frame_" + i));
}
function iwindow_window_start_move(i) {
    var iwindow_delta_x = event.clientX - document.getElementById("iwindow_window_" + i).getBoundingClientRect().left;
    var iwindow_delta_y = event.clientY - document.getElementById("iwindow_window_" + i).getBoundingClientRect().top;
    var div = document.createElement("div");
    div.id = "iwindow_mask_" + i;
    div.style.position = "fixed";
    div.style.top = "0";
    div.style.right = "0";
    div.style.bottom = "0";
    div.style.left = "0";
    div.style.zIndex = "2000000003";
    div.style.opacity = "0";
    div.style.cursor = "move";
    document.getElementById("iwindow_frame_" + i).appendChild(div);
    document.getElementById("iwindow_window_" + i).style.transition = "";
    div.onmousemove = function () {
        iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y);
    }
    div.onmouseup = function () {
        iwindow_window_complete_move(i);
    }
}
function iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y) {
    iwindow_check_body_overflow();
    iwindow_min_array_remove(i);
    var z, w;
    if (iwindow_delta_x > document.getElementById("iwindow_window_" + i).offsetWidth)
        var z = event.clientX - document.getElementById("iwindow_window_" + i).offsetWidth / 2;
    else var z = event.clientX - iwindow_delta_x;
    var w = event.clientY - iwindow_delta_y;
    iwindow_window_move_step(i, w, z);

}
function iwindow_window_complete_move(i) {
    document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
    document.getElementById("iwindow_mask_" + i).parentNode.removeChild(document.getElementById("iwindow_mask_" + i));
}
function window_window_start_move_touch(i) {
    document.getElementById("iwindow_window_" + i).setAttribute("iwindow_delta_x", event.touches[0].pageX - document.getElementById("iwindow_window_" + i).getBoundingClientRect().left);
    document.getElementById("iwindow_window_" + i).setAttribute("iwindow_delta_y", event.touches[0].pageY - document.getElementById("iwindow_window_" + i).getBoundingClientRect().top);
    document.getElementById("iwindow_window_" + i).style.transition = "";
}
function window_window_on_move_touch(i) {
    iwindow_check_body_overflow();
    iwindow_min_array_remove(i);
    var iwindow_delta_x = document.getElementById("iwindow_window_" + i).getAttribute("iwindow_delta_x");
    var iwindow_delta_y = document.getElementById("iwindow_window_" + i).getAttribute("iwindow_delta_y");
    var z, w;
    if (iwindow_delta_x > document.getElementById("iwindow_window_" + i).offsetWidth)
        var z = event.touches[0].pageX - document.getElementById("iwindow_window_" + i).offsetWidth / 2;
    else var z = event.touches[0].pageX - iwindow_delta_x;
    var w = event.touches[0].pageY - iwindow_delta_y;
    iwindow_window_move_step(i, w, z);
}
function iwindow_window_complete_move_touch(i) {
    document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
    document.getElementById("iwindow_window_" + i).removeAttribute("iwindow_delta_x");
    document.getElementById("iwindow_window_" + i).removeAttribute("iwindow_delta_y");
}

function iwindow_window_move_step(i, w, z) {
    if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "minimize") {
        if (z < 110 - document.getElementById("iwindow_window_" + i).offsetWidth) z = 110 - document.getElementById("iwindow_window_" + i).offsetWidth;
    }
    else if (z < 140 - document.getElementById("iwindow_window_" + i).offsetWidth) z = 140 - document.getElementById("iwindow_window_" + i).offsetWidth;
    if (z > (document.documentElement.clientWidth - 20)) z = document.documentElement.clientWidth - 20;
    if (w < -10) w = -10;
    if (w > (document.documentElement.clientHeight - 20)) w = document.documentElement.clientHeight - 20;
    document.getElementById("iwindow_window_" + i).style.left = z + "px";
    document.getElementById("iwindow_window_" + i).style.top = w + "px";
    if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "minimize") {
        document.getElementById("iwindow_window_" + i).setAttribute("minimize_top", w + "px");
        document.getElementById("iwindow_window_" + i).setAttribute("minimize_left", z + "px");
    }
    if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "maximize") {
        document.getElementById("iwindow_window_" + i).style.height = document.getElementById("iwindow_window_" + i).getAttribute("dafault_height");
        document.getElementById("iwindow_window_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_width");
        document.getElementById("iwindow_window_title_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_width");
        document.getElementById("iwindow_window_title_words_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_words_width");
        document.getElementById("iwindow_window_content_" + i).style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
        document.getElementById("iwindow_window_" + i).style.bottom = "";
        document.getElementById("iwindow_window_" + i).style.right = "";
        document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "normal");
        document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
        document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 0 0";
        document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
        document.getElementById("iwindow_window_content_" + i).style.borderRadius = "0 0 5px 5px";
        document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
        document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
    }
}
function iwindow_min_array_add(i) {
    if (!(document.getElementById("iwindow_window_" + i).getAttribute("minimize_top") && document.getElementById("iwindow_window_" + i).getAttribute("minimize_left"))) {
        iwindow_min_array.unshift(i);
        iwindow_min_sort();
    }
}
function iwindow_min_array_remove(i) {
    for (var mm = 0; mm + 1 <= iwindow_min_array.length; mm++) {
        if (iwindow_min_array[mm] == i) {
            iwindow_min_array.splice(mm, 1);
            break;
        }
    }
    iwindow_min_sort();
}
function iwindow_min_sort() {
    for (var mm = 0; mm + 1 <= iwindow_min_array.length; mm++) {
        if (!(document.getElementById("iwindow_window_" + iwindow_min_array[mm]).getAttribute("minimize_top") && document.getElementById("iwindow_window_" + iwindow_min_array[mm]).getAttribute("minimize_left"))) {
            document.getElementById("iwindow_window_" + iwindow_min_array[mm]).style.top = document.documentElement.clientHeight - document.getElementById("iwindow_window_title_" + iwindow_min_array[mm]).offsetHeight - 20 - Math.floor(mm / Math.floor((document.documentElement.clientWidth - 10) / 160)) * 35 + "px";
            document.getElementById("iwindow_window_" + iwindow_min_array[mm]).style.left = 10 + mm % Math.floor((document.documentElement.clientWidth - 10) / 160) * 160 + "px";
        }
    }
}
function iwindow_change_color(color, i) {
    if (i == null) for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) iwindow_change_color_execute(color, m);
        else break;
    }
    else iwindow_change_color_execute(color, i);
}
function iwindow_change_color_execute(color, i) {
    if (document.getElementById("iwindow_window_" + i) != null) {
        document.getElementById("iwindow_window_" + i).style.backgroundColor = color;
        document.getElementById("iwindow_window_title_" + i).style.borderBottomColor = iwindow_getDarkColor(color, 0.05);
        document.getElementById("iwindow_window_" + i).style.color = iwindow_dynamicColor(color);
        document.getElementById("iwindow_window_" + i).setAttribute("background_color", color);
        document.getElementById("iwindow_window_" + i).setAttribute("content_color", iwindow_dynamicColor(color));
        if (document.getElementById("iwindow_window_close_button_svg_line1_" + i) != null) document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_close_button_svg_line2_" + i) != null) document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_maximize_button_svg_rect_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_menu_button_svg_line1_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_menu_button_svg_line2_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_window_menu_button_svg_line3_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = iwindow_dynamicColor(color);
        if (document.getElementById("iwindow_menu_" + i) != null) {
            document.getElementById("iwindow_menu_" + i).style.backgroundColor = color;
            document.getElementById("iwindow_menu_" + i).style.color = iwindow_dynamicColor(color);
        }
    }
}
function iwindow_top(i) {
    if (i == null || document.getElementById("iwindow_window_" + i) == null) return;
    for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) iwindow_top_execute(i, m);
        else break;
    }
}
function iwindow_top_execute(i, m) {
    if (document.getElementById("iwindow_window_" + m) != null && document.getElementById("iwindow_window_" + m).getAttribute("mask") != "true") {
        if (document.getElementById("iwindow_window_" + m).getAttribute("topmost") != "true" && m == i) {
            document.getElementById("iwindow_window_" + m).setAttribute("topmost", "true");
            iwindow_top_zIndex++;
            if (iwindow_top_zIndex >= 2000000000) iwindow_top_zIndex = 2000000000;
            document.getElementById("iwindow_window_" + m).style.zIndex = iwindow_top_zIndex;
        }
        else if (document.getElementById("iwindow_window_" + m).getAttribute("topmost") == "true" && m != i) document.getElementById("iwindow_window_" + m).removeAttribute("topmost");
    }
}
function iwindow_close(i) {
    if (i == null) for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) iwindow_close_execute(m);
        else break;
    }
    else iwindow_close_execute(i);
}
function iwindow_close_execute(i) {
    if (document.getElementById("iwindow_window_" + i) != null) {
        document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "close");
        if (iwindow_menus.find(i) != null) iwindow_menus.remove(i);
        iwindow_min_array_remove(i);
        iwindow_check_body_overflow();
        document.getElementById("iwindow_window_" + i).style.transition = "all .1s ease";
        document.getElementById("iwindow_window_" + i).style.webkitTransform = "translate(2px, 2px)";
        document.getElementById("iwindow_window_" + i).style.transform = "translate(2px, 2px)";
        document.getElementById("iwindow_window_" + i).style.opacity = "0";
        setTimeout(function () { if (document.getElementById("iwindow_frame_" + i) != null) document.getElementById("iwindow_frame_" + i).parentNode.removeChild(document.getElementById("iwindow_frame_" + i)); }, 100);
    }
}
function iwindow_maximize(i) {
    if (i == null) for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) iwindow_maximize_execute(m);
        else break;
    }
    else iwindow_maximize_execute(i);
}
function iwindow_maximize_execute(i) {
    if (document.getElementById("iwindow_window_" + i) != null) {
        iwindow_top(i);
        if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") != "maximize") {
            iwindow_min_array_remove(i);
            if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "normal") {
                document.getElementById("iwindow_window_" + i).setAttribute("old_top", document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + "px");
                document.getElementById("iwindow_window_" + i).setAttribute("old_left", document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + "px");
            }
            document.getElementById("iwindow_window_" + i).style.height = "";
            document.getElementById("iwindow_window_" + i).style.width = "";
            document.getElementById("iwindow_window_title_" + i).style.width = "100%";
            if (iwindow_mode == 1) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 120 + "px";
            else document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 90 + "px";
            document.getElementById("iwindow_window_content_" + i).style.height = document.documentElement.clientHeight - 30 + "px";
            document.getElementById("iwindow_window_content_" + i).style.display = "";
            if (iwindow_mode == 1) document.getElementById("iwindow_window_menu_button_" + i).style.display = "";
            document.getElementById("iwindow_window_" + i).style.top = "0";
            document.getElementById("iwindow_window_" + i).style.left = "0";
            document.getElementById("iwindow_window_" + i).style.right = "0";
            document.getElementById("iwindow_window_" + i).style.bottom = "0";
            document.getElementById("iwindow_window_" + i).style.borderRadius = "0";
            document.getElementById("iwindow_window_title_" + i).style.borderRadius = "0";
            document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0";
            document.getElementById("iwindow_window_content_" + i).style.borderRadius = "0";
            document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>";
            document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><polygon id=\"iwindow_window_maximize_button_svg_polygon_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" points=\"202.16 201.39 202.16 281.19 412.72 281.19 412.72 413.28 502.02 413.28 502.02 201.39 202.16 201.39\"/><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"112.87\" y=\"281.19\" width=\"299.86\" height=\"211.89\"/></svg>";
            document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
            document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
            document.body.parentNode.style.overflow = "hidden";
            document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "maximize");
        }
        else {
            iwindow_min_array_remove(i);
            document.getElementById("iwindow_window_" + i).style.height = document.getElementById("iwindow_window_" + i).getAttribute("dafault_height");
            document.getElementById("iwindow_window_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_width");
            document.getElementById("iwindow_window_title_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_width");
            document.getElementById("iwindow_window_title_words_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_words_width");
            document.getElementById("iwindow_window_content_" + i).style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
            document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "normal");
            if ((document.documentElement.clientWidth - 75) < parseFloat(document.getElementById("iwindow_window_" + i).getAttribute("old_left"))) {
                document.getElementById("iwindow_window_" + i).style.left = document.documentElement.clientWidth - 75 + "px";
            }
            else document.getElementById("iwindow_window_" + i).style.left = document.getElementById("iwindow_window_" + i).getAttribute("old_left");
            if ((document.documentElement.clientHeight - 75) < parseFloat(document.getElementById("iwindow_window_" + i).getAttribute("old_top"))) {
                document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - 75 + "px";
            }
            else document.getElementById("iwindow_window_" + i).style.top = document.getElementById("iwindow_window_" + i).getAttribute("old_top");
            document.getElementById("iwindow_window_" + i).style.bottom = "";
            document.getElementById("iwindow_window_" + i).style.right = "";
            document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
            document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 0 0";
            document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
            document.getElementById("iwindow_window_content_" + i).style.borderRadius = "0 0 5px 5px";
            document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
            document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
            iwindow_check_body_overflow();
        }
    }
}
function iwindow_minimize(i) {
    if (i == null) for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) iwindow_minimize_execute(m);
        else break;
    }
    else iwindow_minimize_execute(i);
}
function iwindow_minimize_execute(i) {
    if (document.getElementById("iwindow_window_" + i) != null) {
        if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") != "minimize") {
            if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "normal") {
                document.getElementById("iwindow_window_" + i).setAttribute("old_top", document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + "px");
                document.getElementById("iwindow_window_" + i).setAttribute("old_left", document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + "px");
            }
            document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
            document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
            document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "minimize");
            if (document.getElementById("iwindow_window_" + i).getAttribute("minimize_top") && document.getElementById("iwindow_window_" + i).getAttribute("minimize_left")) {
                document.getElementById("iwindow_window_" + i).style.top = document.getElementById("iwindow_window_" + i).getAttribute("minimize_top");
                document.getElementById("iwindow_window_" + i).style.left = document.getElementById("iwindow_window_" + i).getAttribute("minimize_left");
            }
            else {
                document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - document.getElementById("iwindow_window_title_" + i).offsetHeight - 20 + "px";
                document.getElementById("iwindow_window_" + i).style.left = 10 + "px";
            }
            document.getElementById("iwindow_window_" + i).style.right = "";
            document.getElementById("iwindow_window_" + i).style.bottom = "";
            document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
            document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 5px 5px";
            document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
            document.getElementById("iwindow_window_" + i).style.width = "150px";
            document.getElementById("iwindow_window_" + i).style.height = "";
            document.getElementById("iwindow_window_title_" + i).style.width = "150px";
            document.getElementById("iwindow_window_title_words_" + i).style.width = "55px";
            if (iwindow_mode == 1) document.getElementById("iwindow_window_menu_button_" + i).style.display = "none";
            document.getElementById("iwindow_window_content_" + i).style.display = "none";
            document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg2{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><polygon id=\"iwindow_window_minimize_button_svg2_polygon_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg2\" points=\"202.16 201.39 202.16 281.19 412.72 281.19 412.72 413.28 502.02 413.28 502.02 201.39 202.16 201.39\"/><rect id=\"iwindow_window_minimize_button_svg2_rect_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg2\" x=\"112.87\" y=\"281.19\" width=\"299.86\" height=\"211.89\"/></svg>";
            document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
            document.getElementById("iwindow_window_" + i).style.zIndex = 10001;
            iwindow_min_array_add(i);
            iwindow_check_body_overflow();
        }
        else {
            document.getElementById("iwindow_window_" + i).setAttribute("display_mode", "normal");
            if ((document.documentElement.clientWidth - 75) < parseFloat(document.getElementById("iwindow_window_" + i).getAttribute("old_left"))) {
                document.getElementById("iwindow_window_" + i).style.left = document.documentElement.clientWidth - 75 + "px";
            }
            else document.getElementById("iwindow_window_" + i).style.left = document.getElementById("iwindow_window_" + i).getAttribute("old_left");
            if ((document.documentElement.clientHeight - 75) < parseFloat(document.getElementById("iwindow_window_" + i).getAttribute("old_top"))) {
                document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - 75 + "px";
            }
            else document.getElementById("iwindow_window_" + i).style.top = document.getElementById("iwindow_window_" + i).getAttribute("old_top");
            document.getElementById("iwindow_window_" + i).style.bottom = "";
            document.getElementById("iwindow_window_" + i).style.right = "";
            document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
            document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 0 0";
            document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
            document.getElementById("iwindow_window_" + i).style.height = document.getElementById("iwindow_window_" + i).getAttribute("dafault_height");
            document.getElementById("iwindow_window_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_width");
            document.getElementById("iwindow_window_title_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_width");
            document.getElementById("iwindow_window_title_words_" + i).style.width = document.getElementById("iwindow_window_" + i).getAttribute("dafault_title_words_width");
            document.getElementById("iwindow_window_content_" + i).style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
            document.getElementById("iwindow_window_content_" + i).style.display = "";
            if (iwindow_mode == 1) document.getElementById("iwindow_window_menu_button_" + i).style.display = "";
            document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>";
            document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
            iwindow_min_array_remove(i);
            iwindow_check_body_overflow();
        }
    }
}
function iwindow_create_menu(i, menu, cx, cy) {
    if (document.getElementById("iwindow_window_" + i) != null) {
        if (cx == null) {
            if (event != null) cx = event.clientX;
            else if (document.getElementById("iwindow_window_menu_button_" + i) != null && document.getElementById("iwindow_window_menu_button_" + i).style.display != "none") cx = document.getElementById("iwindow_window_menu_button_" + i).getBoundingClientRect().left + 15;
            else cx = document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + 15;
        }
        if (cy == null) {
            if (event != null) cy = event.clientY;
            else if (document.getElementById("iwindow_window_menu_button_" + i) != null && document.getElementById("iwindow_window_menu_button_" + i).style.display != "none") cy = document.getElementById("iwindow_window_menu_button_" + i).getBoundingClientRect().top + 15;
            else cy = document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + 15;
        }
        if (menu != null) iwindow_window_create_menu(i, menu, cx, cy);
        else if (iwindow_menus.find(i) != null) iwindow_window_create_menu(i, iwindow_menus.find(i), cx, cy);
    }
}
function iwindow_check_body_overflow() {
    var ifmm = false;
    for (var m = 1; ; m++) {
        if (document.getElementById("iwindow_window_" + m) != null) {
            if (document.getElementById("iwindow_window_" + m).getAttribute("display_mode") == "maximize") {
                ifmm = true;
                break;
            }
        }
        else break;
    }
    if (!ifmm) document.body.parentNode.style.overflow = "auto";
}
window.iwindow_min_array = new Array();
window.iwindow_menus = new Dictionary();
window.addEventListener("resize", () => {
    for (var i = 1; ; i++) {
        if (document.getElementById("iwindow_window_" + i) != null) {
            document.getElementById("iwindow_window_" + i).style.transition = "";
            if (document.getElementById("iwindow_window_" + i).getAttribute("display_mode") == "maximize") {
                document.getElementById("iwindow_window_title_" + i).style.width = "100%";
                if (iwindow_mode == 1) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 120 + "px";
                else document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 90 + "px";
                document.getElementById("iwindow_window_content_" + i).style.height = document.documentElement.clientHeight - 30 + "px";
            }
            else {
                if ((document.documentElement.clientWidth - 100) < document.getElementById("iwindow_window_" + i).getBoundingClientRect().left) {
                    document.getElementById("iwindow_window_" + i).style.left = document.documentElement.clientWidth - 100 + "px";
                }
                if ((document.documentElement.clientHeight - 100) < document.getElementById("iwindow_window_" + i).getBoundingClientRect().top) {
                    document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - 100 + "px";
                }
            }
            document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
        }
        else break;
    }
});

function Dictionary() {
    this.add = add;
    this.datastore = new Array();
    this.find = find;
    this.remove = remove;
    this.showAll = showAll;
    this.count = count;
    this.clear = clear;
}
function add(key, value) {
    this.datastore[key] = value;
}
function find(key) {
    return this.datastore[key];
}
function remove(key) {
    delete this.datastore[key];
}
function showAll() {
    var str = "";
    for (var key in this.datastore) {
        str += key + " -> " + this.datastore[key] + "; "
    }
    console.log(str);
}
function count() {
    var n = 0;
    for (var key in Object.keys(this.datastore)) {
        ++n;
    }
    console.log(n);
    return n;
}
function clear() {
    for (var key in this.datastore) {
        delete this.datastore[key];
    }
}

兼容性

不支持Internet Explorer。

HTMLJavaScript自由窗口组件

评论

  1. BlaSil
    BlaSil
    Windows Edge 107.0.1418.62
    3 年前
    2022-11-30 13:54:47

    好b（￣▽￣）d　

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
点名器

							
							

							
自由窗口组件（iwindow）V1.5

							
							

							
内联框架控件Ⅱ（基于自由窗口组件）

							
							

							
自由窗口组件（iwindow）V1.4

							
							

							
自由窗口组件（iwindow）V1.3

							
							

							
自由窗口组件（iwindow）V1.2

							
							

							
自由窗口组件（iwindow）V1.1

							
							

							
MFC创建托盘栏图标及其响应操作

							
							

							
内联框架控件

							
							

							
随机整数生成器（代码及其应用）