nw.js 项目实现双击自定义的header全屏和还原切换,并且全屏和还原图标切换

版权声明:本文为博主原创文章,未经博主允许不得转载。 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就可以满足需求。

猜你喜欢

转载自blog.csdn.net/baidu_30907803/article/details/80075967