C++NanUI文档 – 使用网页来规划总体窗口

NanUI文档目录

动用网页来统筹总体窗口

创制NanUI应用的不二法门本文不再演讲,具体方法请参考作品目录里的有关随笔。本文将介绍NanUI的主干职能,用一张网页铺满所有窗体区域,并将讲述如何接纳CSS和HTML来实现对窗体的拖动、最大化、最小化、关闭等操作。

C++ 1

如图所示的界面,整个窗体的样式都是由HTML和CSS等前端技术来显现的。具体的HTML/CSS/JS代码本文不详细描述,因为这么些和NanUI的涉嫌不大,依照实际项目标急需,您能够为你的软件界面设计出更棒的效果。

在示例界面中,我们将着重介绍系统命令菜单部分的最小化、最大化和关闭按钮,以及界面左边黑色的可用作拖动窗体的纵向标题栏的落实。

用前端技术来分析,左侧纵向标题栏其本质是一条宽度固定,低度100%的DIV;命令区域内的最小化、最大化和关闭按钮其本质是六个SPAN标签内嵌套了五个不同的FontAwsome的图标。上边的情节将介绍它们是如何实现对承载窗体状态改变的。

怎样通过拖拽HTML元平昔运动窗体地方

假若你需要实现类似示例中拖动右边粉红色区域标题栏来改变窗体地点的机能,那么在该因素对应的CSS中只需点名该因素所在区域的-webkit-app-region属性值为drag即可兑现:

.some-class{
    -webkit-app-region:drag;
}

指定此体制后,只要鼠标指针在该样式效用的区域内实施拖拽操作,那么NanUI的承前启后窗体的职位将随鼠标的拖动而暴发改变。

但在设计界面时,假若你希望在可拖动元素区域内的少数区域不收取拖动信号,那么只需要将-webkit-app-region属性值改为no-drag即可。

诸如示例中,两个系统命令按钮实际上是包括在一个DIV元素内,同时这多少个DIV设置了-webkit-app-region属性值为drag,这时你会发现,拖动这么些DIV所在区域(包括五个指令按钮的区域)时窗体都实现了移动,不过这也阻断了这一个区域内的此外鼠标操作,包括三个指令按钮的鼠标点击操作。这明确不是所企盼的意义。如下,该区域的HTML代码为:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

在css样式.app-sys-command-container中安装了-webkit-app-region属性值为drag,这致使了ul.sys-commands区域也显现可拖动的情况。为了制止这几个区域被默认的拖动事件影响到此外事件的相应,那么就需要设置.sys-commands的体制-webkit-app-region属性值为no-drag,那么这一部分区域将不再相应窗体拖动的事件。这部分的CSS代码为:

.demo-app > content > .app-sys-command-container {
    ...
    -webkit-app-region: drag;
    ...
}

.demo-app > content > .app-sys-command-container > .sys-commands {
    ...
    -webkit-app-region: no-drag;
    ...
}

如此,您就足以灵活的支配可拖动来改变窗体地点的区域了。

如何通过HTML元一直施行窗体的最大化/最小化/关闭操作

在下边的html代码片段中,显示了示范程序的多少个系统命令按钮的落实形式:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

个中的i标签内,可以见见不常见的html属性n-ui-command,这一特性是NanUI用来标注按钮行为的专用属性,通过其属性值minimize/maximize/close不难看出,通过点击具备这一专用属性的价签,就可以实现窗体对应的最小化/最大化/关闭操作。

专程需要指出的,在示范窗体中点击最大化按钮后可以看来,最大化按钮的图标从最大化转移成了还原的样式,这是通过应用Javascript监测窗体事件来兑现的。

犹如上边介绍的专用属性,NanUI还停放了有些专用的风波。通过监听这么些事件来贯彻部分例外的功能,例如地点所说的最大化窗体时改变系统按钮的图标,又或者是窗体市区主旨时改变标题栏的水彩等。

NanUI 窗体专用事件

脚下NanUI实现的专用事件有以下两个:

  • hoststatechange:
    窗体状态(最大化、最小化、还原)发生变更时接触。
  • hostactivestate: 窗体得到或有失大旨时接触。
  • hostsizechange: 窗体大小改变时接触。

因此监听这一个事件,您就能够遵照要求来实现部分一定的效能。如示例项目中,使用了jQuery来监听那五个专用事件:

$(function () {
    //窗口状态改变
    $(window).on("hoststatechange", function (e) {
        console.log(e.detail);
        $("#label-form-state").text(e.detail.stateName);

    });

    //窗口激活状态改变
    $(window).on("hostactivestate", function (e) {
        console.log(e.detail);
        $("#label-activated-state").text(e.detail.stateName);

        if (e.detail) {
            if (e.detail.state === 1) {
                $("html").addClass("app-active");
            }
            else {
                $("html").removeClass("app-active");
            }
        }
    });
    //窗口尺寸改变
    $(window).on("hostsizechange", function (e) {
        console.log(e.detail);
        $("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

    });

});

上述代码的求实职能,可以自动对示范程序举办调节来查阅效果。

内置Javascript对象 – NanUI

NanUI除了落实了上述的专用html属性n-ui-command和五个专用事件外,在Javascript全局环境中还放置了一个专用对象NanUI,通过该对象您能够查询当前NanUI和CEF的本子号,通过hostWindow中的方法来博取当前窗体的景色值,执行最大化、最小化和关闭操作。

C++ 2

以身作则源码

git clone https://github.com/NetDimension/NanUI-Examples-03-Design-Your-Form-With-Html.git

社群和增援

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

援助作者

假如您欣赏我的办事,并且希望NanUI持续的提高,请对NanUI项目进展援助以此来鼓励和匡助自己继续NanUI的支付工作。你可以接纳微信或者支付宝来围观下边的二维码举办接济。

C++ 3