版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_30907803/article/details/80075967
如上图所示的header是自定义的。
点击放大后是
图标需要根据点击事件更改图标。但是如果是直接双击header空白处,窗口可以实现放大还原,但是怎么控制图标也更换?
直接上代码
'''sh
//最大窗口/还原窗口点击事件 function maxWindow() { if (!isMax) { win.maximize(); } else { win.restore(); } } //改变放大缩小的图标状态 function changeMaxOrNotIcon(isMax) { var button = document.getElementById("header-max-button"); var btnIclass = document.getElementById("header-max-button-i").getAttribute("class"); if (isMax) { button.title = "向下还原"; btnIclass = btnIclass.replace("icon-max", "icon-unmax"); document.getElementById("header-max-button-i").setAttribute("class", btnIclass); } else { button.title = "最大化"; btnIclass = btnIclass.replace("icon-unmax", "icon-max"); document.getElementById("header-max-button-i").setAttribute("class", btnIclass); } } //监听最大化事件 win.on('maximize', function () { isMax = true; changeMaxOrNotIcon(isMax); }); //监听还原事件 win.on('restore', function () { isMax = false; changeMaxOrNotIcon(isMax); });
'''
需要注意的是,还原事件的监听 不使用unmaximize,因为试过无效,监听不到,于是改成监听还原restore就可以满足需求。