回复：类似windows xp的web应用程序使用jquery，不起作用

我最近碰巧在处理JQuery，我决定做一些类似WinXP的东西，在那里你可以使用windows：最小化、关闭和最大化。当最小化窗口时，应在任务栏中将其标记为最小化

我的代码： 对于你们感兴趣的人，请看下面的片段：

$（函数（）{
var window=“.window”；
var head=“.head”；
var close=“.close”；
var maximize=“.maximize”；
var minimize=“.minimize”；
var app=“.app”；
var w1=$（“.w1”）.clone（）；
var w2=$（“.w2”）.clone（）；
$（window）.draggable（{handle:head}）.resizeable（）；
$（窗口）.focus（函数（）{
$（this.css）({
“背景色”：“#000000”，
“z索引”：“1”
});
});
$（头）。焦点（函数（）{
$（this.parent（）.css）({
“背景色”：“#000000”，
“z索引”：“1”
});
});
$（窗口）.blur（函数（）{
$（this.css）({
“背景色”：“#4444”，
z索引：“0”
});
});
$（关闭）。单击（函数（）{
$（this.parents（“.window”）.remove（）；
警报（“关闭窗口”）；
});
$（最大化）。单击（函数（）{
if（$（this）.parents（“.window”）.css（“width”）==“100vw”和（&$（this）.parents（.window”）.css（“height”）==“100vh”）{
$（this.parents（“.window”）.css({
“顶部”：“0”，
“左”：“0”，
“宽度”：“500px”，
“高度”：“200px”
});
}否则{
$（this.parents（“.window”）.css({
“顶部”：“0”，
“左”：“0”，
“宽度”：“100vw”，
“高度”：“100vh”
});
}
});
$（最小化）。单击（函数（）{
var元素=$（this.parents（“.window”）[0]；
$（this.parents（“.window”）.css({
“显示”：“无”
});
如果（元素==$（“.w1”）[0]）{
$（“.app1”）.css({
“背景色”：“AAAAA”
});
}else if（元素==$（“.w2”）[0]）{
$（“.app2”）.css({
“背景色”：“AAAAA”
});
}
});
$（“.app1”）。单击（函数（）{
if（$（“.w1”）.长度）{
如果（$（“.w1”）.css（“显示”）=“无”）{
$（“.w1”）.css({
“显示”：“块”
});
$（“.app1”）.css({
“背景色”：“#ffffff”
});
}否则{
警报（“应用程序已存在”）；
}
}否则{
警报（“制作新应用程序”）；
$（“正文”）。附加（w1）；
newapp（）；
}
});
$（“.app2”）。单击（函数（）{
如果（$（“.w2”）.长度）{
如果（$（“.w2”）.css（“显示”）=“无”）{
$（“.w2”）.css({
“显示”：“块”
});
$（“.app2”）.css({
“背景色”：“#ffffff”
});
}否则{
警报（“应用程序已存在”）；
}
}否则{
警报（“制作新应用程序”）；
$（“正文”）。附加（第2页）；
newapp（）；
}
});
函数newapp（）{
$（window）.draggable（{handle:head}）.resizeable（）；
$（窗口）.focus（函数（）{
$（this.css）({
“背景色”：“#000000”，
“z索引”：“1”
});
});
$（头）。焦点（函数（）{
$（this.parent（）.css）({
“背景色”：“#000000”，
“z索引”：“1”
});
});
$（窗口）.blur（函数（）{
$（this.css）({
“背景色”：“#4444”，
z索引：“0”
});
});
$（关闭）。单击（函数（）{
$（this.parents（“.window”）.remove（）；
警报（“关闭窗口”）；
});
$（最小化）。单击（函数（）{
var元素=$（this.parents（“.window”）[0]；
$（this.parents（“.window”）.css({
“显示”：“无”
});
如果（元素==$（“.w1”）[0]）{
$（“.app1”）.css({
“背景色”：“AAAAA”
});
}else if（元素==$（“.w2”）[0]）{
$（“.app2”）.css({
“背景色”：“AAAAA”
});
}
});
$（最大化）。单击（函数（）{
if（$（this）.parents（“.window”）.css（“width”）==“100vw”和（&$（this）.parents（.window”）.css（“height”）==“100vh”）{
$（this.parents（“.window”）.css({
“顶部”：“0”，
“左”：“0”，
“宽度”：“500px”，
“高度”：“200px”
});
}否则{
$（this.parents（“.window”）.css({
“顶部”：“0”，
“左”：“0”，
“宽度”：“100vw”，
“高度”：“100vh”
});
}
});
}
});
*{
填充：0；
保证金：0；
}
身体{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
#任务栏{
宽度：100vw；
高度：2米；
背景色：#000000；
位置：绝对位置；
左：0；
底部：0；
z指数：2；
}
/*#开始菜单{
背景色：#ffffff；
宽度：2米；
高度：2米；
}*/
/*#菜单{
高度：150像素；
宽度：100px；
背景色：#AAAAA；
位置：绝对位置；
z指数：7；
左：0；
底部：2米；
显示：无；
}*/
.app{
高度：2米；
宽度：2米；
颜色：#000000；
背景色：#ffffff；
浮动：左；
光标：指针；
边框：实心#000000 1px；
}
.窗户{
宽度：500px；
最小宽度：275px；
最大宽度：100vw；
高度：200px；
最小高度：125px；
最大高度：计算值（100vh-2米）；
背景色：#4444；
颜色：#ffffff；
z指数：0；
边框：1px#000000实心；
位置：绝对位置；
排名：0；
左：0；
}
.头{
背景色：#ffffff；
颜色：#000000；
}
.头衔{
文本对齐：居中；
游标：默认值；
}
.按钮{
位置：相对位置；
}
.结束{
位置：绝对位置；
右：.1em；
顶部：-1.1米；
背景色：#aa0000；
高度：1米；
宽度：1米；
边界半径：100%；
光标：指针；
}
.最大化{
位置：绝对位置；
右：1.4em；
顶部：-1.1米；
背景色：#DD00；
高度：1米；
宽度：1米；
边界半径：100%；
光标：指针；
}
.最小化{
位置：绝对位置；
右：2.6em；
顶部：-1.1米；
背景色：#0000dd；
高度：1米；
宽度：1米；
边界半径：100%；
光标：指针；
}
.内容{
身高：100%；
填充：8px；
字体大小：.8em；
文本对齐：对齐；
溢出y：自动；
溢出x：隐藏；
}

W1
W2
窗口1

同侧隐窝
$(maximize).click(function() {
        if($(this).parents(".window").css("width") == "500px" && $(this).parents(".window").css("height") == "200px") {
      $(this).parents(".window").css({
        "top": "0",
        "left": "0",
        "width": "100vw",
        "height": "100vh"
      });
    } else {
      $(this).parents(".window").css({
        "top": "0",
        "left": "0",
        "width": "500px",
        "height": "200px"
      });
    }
  });

 $(window).focus(function() {
    $(this).css({
      "background-color": "#000000",
      "z-index": "1"
    });
  });
  $(head).focus(function() {
    $(this).parent().css({
      "background-color": "#000000",
      "z-index": "1"
    });
  });
  $(window).blur(function() {
    $(this).css({
      "background-color": "#444444",
      "z-index": "0"
    });
  });

<div class="window w1" tabindex="-1">
<div class="window w2" tabindex="-1">

$(window).draggable({containment: "parent",handle:head}).resizable();

<div class="window w1" tabindex="-1">
  <div class="head">
    <div class="title">Window 1</div>
    <div class="buttons">
      <div class="close"></div>
      <div class="maximize"></div>
      <div class="minimize"></div>
    </div>
</div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
    </p>
  </div>
</div>

//  $(window).draggable({containment: "parent",handle:head}).resizable();

    $(document).ready(function() {
        // the below $mywindow is important as that starts and stops the drag operation
        var $mywindow = null;
        var xdiff=0;
        var ydiff=0;
        $(document.body).on("mousemove", function(e) {

            if ($mywindow) {   // see if drag started on our element
                if($mywindow.attr("class")==="head"){  // see if whether it is actually our head element for dragging
                    // and by the way we have to drag our whole window not just head, so .parent()
                    $mywindow.parent().offset({
                        top: e.pageY - ydiff,
                        left: e.pageX - xdiff
                    });                 
                }
            }
        });
        $(document.body).on("mousedown", "div", function (e) {
            // level up to head as we are clicking on title element
            $mywindow = $(e.target).parent(); 
              xdiff=e.pageX -$mywindow.offset().left;
              ydiff=e.pageY - $mywindow.offset().top;
        });

        $(document.body).on("mouseup", function (e) {
            xdiff=0;
            ydiff=0;

            // make it null so that the above if($mywindow) will fail on mousemove
            $mywindow = null;
        });
    });