科学技术NanUI文档 – 使用网页来统筹总体窗口

NanUI文档目录

  • NanUI简介
  • 始发动NanUI
  • 包装并使内嵌式的HTML/CSS/JS资源
  • 使用网页来设计总体窗口
  • 怎样贯彻C#与Javascript的竞相通信
  • 怎么样处理NanUI中之下载过程 – DonwloadHandler的运用(待更新。。。)
  • 什么处理NanUI中之弹窗过程 – LifeSpanHandler的运(待更新。。。)
  • 何以支配Javascript对话框 – JsDialogHandler的以(待更新。。。)
  • 起定义资源处理程序 (待更新。。。)

使网页来规划总体窗口

创造NanUI应用的计本文不再阐述,具体方法请参见文章目录里的连带文章。本文将介绍NanUI的中坚作用,用平等摆放网页铺满所有窗体区域,并以叙如何下CSS和HTML来贯彻对窗体的拖动、最大化、最小化、关闭等操作。

科学技术 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中之法来赢得当前窗体的状态值,执行最大化、最小化和关闭操作。

科学技术 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的开发工作。你可采取微信或者支付宝来围观下的次维码进行资助。

科学技术 3

Leave a Comment.